Rohit Singh Sengar

jQuery Tag Cloud Plugin

admin — Thu, 27 May 2010 10:53:19 +0000

See Online Demo

This plugin will create a animated tag cloud out of the list of tags for your blog/site. It is based upon the jQuery framework. Although there are many tag cloud available in jQuery Plugin arsenal, I really felt the need to create this one. The plugin include font animation as well as tag animation in three ways (horizontal, vertical and random). The animation will stop when user mouse over on the tag cloud, restarts after sometime after mouse out. Very easy to implement and customize. You just need to write a simple line apply it on the

See online demo | Download Tag Cloud Plugin

ScreenShot jQuery Tag Cloud Plugin

Usage

Step 1: Style tags container. The tags container can be div, ul or anything else. But you need to define these style properties for the tags container before using the plugin – Position, Width and Height. You can style of the tags as you wish.

Step 2: Include latest jquery.js and jquery.tagcloud.min.js in section of the page like following,

Step 3: Apply the tag cloud plugin on the tags container. like following

Instead of #tag-cloud, just give #

Customize

Direction: You can choose the direction of the tags movement. There are 3 options – “vertical” (see Example3), “horizontal” (see Example2) and “random” (see Example1). The default option is “random”. You can set it as following,

$(“#tag-cloud”).tagCloud({“direction”:”horizontal”});

See Example2 and Example3.

Easein: You can use various kinds of easing effects provided by the jquery easing plugin. The list of easing effects can be found at http://gsgd.co.uk/sandbox/jquery/easing/ . Please Note if you want to use this option, then first include the easing plugin before applying the plugin. See Example2 and Example3. You can set this option like,

Speed: You can set the speed of the tags animation in the plugin. You simply need to set the speed option parameter. It only accept numeric value like 2000 (2 seconds). Keep it more than 2000 for smooth animation. It can be set as,

$(“#tag-cloud”).tagCloud({“speed”:2000});

Combination: You can set all the options at once like

$(“#tag-cloud”).tagCloud({“direction”:”vertical”, “easein”:”easeOutBack”, “speed”:2000});

See online demo | Download Tag Cloud Plugin

As you see its pretty straight to apply it and its effects are amazing. You can have as many tag cloud on your blog/site as you wish. I tried to keep it very simple, but if you still have some doubts/difficulties in implementing it or need help, feel free to post your comments. If anyone want to extend this plugin here is its uncompressed version . Hope it will help in making your blog/site more dazzling !!!

Analog Clock using Javascript & Raphael

admin — Wed, 12 May 2010 06:38:41 +0000

Click to see online demo

Last weekend, I was playing with Raphaël – A JavaScript Library for drawing/graphics. Its like drawing anything on a canvas, pretty easy and impressive. In that, there was a function call rotate() which can rotate any element(line, circle, rectangle, image etc.) at any angle from a given axis. This gives me an idea to have 3 lines of different color, stroke and length for second, minute and hour hand in a clock. After every second, we need to check the time with the help of javascript Date(). Then rotate the second hand line, about the center axis with [6 * number of seconds] degrees (as 1 sec is equal to 6 degrees). Rotate the minute hand line with [6 * number of minutes] degrees. Rotate the hour hand with [30 * number of hours] degrees (as 1 hour is equal to 30 degrees). Combining this logic, I built a clock (with just 30 lines of code), whose demo is given below,

For this demo, I have used images of different dials (which I have downloaded from google) as backgound. Upon which the clock is drawn through Raphaël. Luckly, for me, the center of these dials images excatly conicides with the center for clock. Another option I provided in the demo is to change the color of second, minute and hour hand of the clock according to the dial selected by the user. It can be used anywhere with any size, styling and customization. I can also help you with that.

Open the demo in new window. As this clock is based upon Raphaël (which is dependent upon CSS 3), it may not work in certain versions of different browsers. Kindly get back to in that case with browser name and version. Lastly, your feedback and suggestions are welcomed as always. Raphaël is a powerful library and you can built some really fancy stuff with it. Here is my bit, hope you guys like it.

Build Calendar with PHP

admin — Wed, 05 May 2010 13:01:38 +0000

CLICK HERE TO SEE ONLINE DEMO

For my last project I required to use calendar in PHP. I searched of it online and there were lots of them. But all of them were complicated, packed with lots of features (appointments etc.) and lacks examples. There were calendar classes but of no use. So, instead of searching, I decided to create code for calendar myself in PHP. Working on logic I used for creating calendar, I didn’t find it hard to build it. On the other hand, it was way too easy to create it than it actually looks like. No doubts, I was very much helped by many date and time pre built functions provided by PHP. Hence I am providing you with the code that creates and displays calendar. The outcome of the code is below (Apologies for my poor styling skills),

Screenshot for php calendar

The table head section shows the current month and year along with 2 links (Previous & Next Month) for navigating to different months. Below that there are columns for various days in week. The table body section consists of 6 rows and 7 columns. The reason behind 7 columns is easy, for 7 days in a week. The logic behind 6 rows lies in the fact that even if the 1 of the month (with 31 days) starts from the last day of week, the last day won’t go beyond 2 column of 6th row. I used some CSS classes like “.holiday” for Sundays “.day” for normal days of month and no class for blank .

The logic starts with two loops with outer loop running 6 times (for weeks) and inner 7 times (for week days). In first loop we will put till it encounter the 1 day of the month (variable – $skip). Both the loop will run fine till the days in that month (variable – $daysInMonth). If it’s Sunday then we will add “.holiday ” class in otherwise “. day ” class along with date. The next and previous month links is formed with adding year + month as string (e.g. 201005 for May, 2010) and pass it as parameter to the page itself. The rest of the code is self-explanatory. Below is the PHP code for the calendar ( or DOWNLOAD CODE)

// if ym is set, i.e. somebody clicked on next or previous months link
if(isset($_GET["ym"]))
{
$year = (int)substr($_GET["ym"], 0, 4);
$month = (int)substr($_GET["ym"], 4, 2);
}
else   // otherwise take current month & year
{
$month = date(“m”, mktime(0,0,0,date(‘m’),1,date(‘Y’)));
$year = date(“Y”, mktime(0,0,0,date(‘m’),1,date(‘Y’)));
}

$skip = date(“w”, mktime(0,0,0,$month,1,$year)); // days to skip in 1 row of week.
$daysInMonth = date(“t”, mktime(0,0,0,$month,1,$year));   // total number of dates in the month.
$calendar_head = ”;   // for calendar head
$calendar_body = ”;   // for calendar boday
$day = 1;   // For date in calendar

for($i = 0; $i < 6; $i++) // Outer loop for weeks
{
$calendar_body .= ‘’;   // start row tag
for($j = 0; $j < 7; $j++)   // Inner loop for week days
{
if(($skip > 0)||($day > $daysInMonth)) // display blank till 1 day of month or after total numnber of days in that month
{
$calendar_body .= ‘ ’;
$skip–;
}
else
{
if($j == 0)   // if its Sunday then add class holiday
$calendar_body .= ‘’.$day.’’;
else   // otherwise add day class
$calendar_body .= ‘’.$day.’’;

$day++; // Increment $day
}

}   // inner loop closes
$calendar_body .= ‘’; // end row tag
} // outer loop closes

// Calendar head section
$calendar_head = ‘

« Previous Month
’.date(“F, Y”, mktime(0,0,0,$month,1,$year)).’
Next Month »

Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
’;
// PHP code for calendar ends

?>

A Calendar Built in PHP

A Calendar Built in PHP

The code is pretty easy to understand and you can figure out where to put your code to display your required info in the calendar. I used very basic CSS in this which you can style it as you wish. Integrate it according to your requirements. Hope it would help you guys. Your feedback and suggestions are always welcomed.

Image Puzzle Using jQuery

admin — Wed, 28 Apr 2010 06:04:02 +0000

SOLVE THE PUZZLE

We all had played image puzzle at some point in our life. The game in which we have to arrange various shuffled pieces of a picture in an order. The inspiration to build this game using jQuery, came into my mind when I was surfing the jQuery UI examples. In those examples there was a example of jQuery UI sortable() function, which can sort li elements in a grid. The same functionality is needed for the game, where user can sort it using drag and drop in order to arrange the pieces. And here is the result:

For building this game I used jQuery, ui.core.js, ui.sortable.js files. When user clicks on the

elements with 100px height & width. Each
have same background image as of
- is checked. If order matches, then success message is displayed. The main functionality used here is the jQuery UI sortable() function.
  
  You can try out the puzzle in new window. Things are not hard as they look. We can create amazing things using already built functions/plugins/code of jQuery. Please share if you have developed something interesting or have some great ideas. Solve the puzzle in your free time… Have fun!!!

A Fancy Image Gallery using jQuery

admin — Tue, 20 Apr 2010 12:46:30 +0000

CLICK HERE TO CHECK IT OUT !!!

Last week I thought of making a image gallery using jQuery (again not to mention I am one of jQuery’s fan). There were already so many nice image gallerias available online. People have almost used all the jQuery effects to create different gallerias. So, I was searching to create something unique as its no fun to create what is already made.

ScreenShot of Image Gallery

Recently while browsering Cue Blocks Website (http://www.cueblocks.com/), I came across office gallery made in Flash which caught my eye. As it was built in Flash, the image were tilted at random angles, the images spreads on load, you can drag them anywhere inside gallery area and you can preview image by double clicking on it. Never seen such type of gallery built through jQuery. I imagined all these features can be implemented by jQuery (except for tilted images, for which there were no plugins available).

I found many of these effects can be implemented through jQuery UI or plugins. I built the logic in jQuery to spread the images randomly over gallery area. Used jQuery UI drag.js to make image thumbnail draggable. Easing plugin to give cool effects while spreading and showing preview. Then I thought of adding some auto animation in spreading images after some fixed interval of time. For which I used timer.js (jQuery plugin).

Result of all above is this image gallery. I am posting this on my blog so that you all can provide me your feedback and suggestions on it. I am planning to build a jQuery plugin for this, so all your ideas will be very helpful to me and hence welcomed.

Also, write to me if you want this gallery on your site.

Tutorial to build a simple Content Slider using jQuery

admin — Tue, 16 Mar 2010 10:38:13 +0000

Content Slider is very popular now-a-days and used in various websites. You may choose from a wide range of jQuery plugins available online, or you can write it on your own. Yes it’s not a rocket science to create the content slider. This simple tutorial will guide you to build your own content slider, with simple Javascript code and animate() function provided in jQuery. This tutorial is divided into 4 parts – the html code, the style code, the jQuery code and additional functions.

View Demo (online) | Download Source Code (Zip)

The HTML Code

Copy and paste the following code inside body code. The code has a div with id “content” which contains a list. In these li elements you can have any other content or images, which you want to show. The code also includes two buttons Previous and Next. We will bind functions to these buttons to slide the next or previous content with their onclick event. Instead of these buttons you can use any other element like anchor tag (place and style them as you wish), and add those functions on its onclick event. You can Copy Paste the code below inside tag.





Content for 1st li element.


Content for 2nd li element.


Content for 3rd li element.


Content for 4th li element.


Content for 5th li element.


Content for 6th li element.


Content for 7th li element.

Now your page will look somewhat like html-code.html

The Style Code

The diagram below explains the basic logic of content slider.

Layout of Content Slider

The div will remain fixed and the ul will be moved left or right in the background. The movement will be such that a li element will always shows up in the div. For implementing it we need to follow the styling below.

The div will be of fixed width and height. The overflow property of the div should be set to hidden, so other li elements are not visible.
The ul should have position property relative and padding as 0px. It will help us in controlling its movement inside the div. The width of the ul should be multiplication of number of li elements and width of the div (3500px in our case).
The height and width of the div should be same as that of the div. The list-style and float properties should be set as none and left respectively.

Therefore our style code will look like following. Copy Paste it into your page’s section.

After putting the code run the html on browser. You page will look like style-code.html. The first li element will be visible in the “content” div.

The jQuery Code

First include the jQuery library in the page.

Now we create functions inside the script tags. First let’s create the function to slide the content to show next li element in div. For that we need to move ul element in left. You need to keep following points in mind,

Move ul to left using jQuery animate function. Initially the ul element left position is at 0px inside the div. Therefore we have to increment the left position of ul in negative.
The movement should be such that the next li element completely fits into the “content” div. So, we will add -500px (width of the div) to the left position.
When the last li element is reached, the function will do nothing. So, we need to check every time the function is called if the last element is reached or not. For that we need to see if the current position of the ul is greater than negative of the multiplication of width of div (500px) and one less in number of li element (which comes out to be -3000px in our case). If current position of ul is greater than -3000px then we can slide to next element. If current position of ul is equals to -3000px, its means the last li is visible in the div.

Below is the function to slide to next li, copy paste it into section

For sliding to the previous li, the function needs to do following things,

Move ul to right using jQuery animate function. We have to increment the left position of ul.
The movement should be such that the previous li element completely fits into the “content” div. So, we will add 500px (width of the div) to the left position of ul.
We need to check every time the function is called if the current li visible is first or not. For that we need to see if the current position of the ul is less than position of first li element i.e. 0px.

Below is the function slide to previous li, which needs to be added inside the script tag along with the above slidePrev() function.

function slideNext(){ if(parseInt($("#content ul").css("left")) < 0) { $("#content ul").animate({ left: parseInt($("#content ul").css("left"))+500+"px" },1000); }
}

Now we just have to add these functions to the buttons onclick events as below,

Now your page will look like jquery-code.html. That’s it, your content slider is ready. Now run the html page on browser and play with Next and Previous buttons. You can change the animation speed from 1000 to whatever you like to make the sliding slow or fast.

Additional Functions

You can add more functions to your content slider, like slide to the first element or slide to last element or slide to any particular li element. Copy paste following functions into

3) Initiate pagination by writing following code in head section inside

// instead of , type in id of the div on which you want to create pagination.

Its all you need to do. Load the page on browser and now you can see a simple, basic pagination on the page. See Demo.

Customization:

1) Style Paginator: There are 3 classes – paginator (container for paginator), active (class for active pages) and inactive (class for current page). We can apply little css on these classes to make paginator looks pretty, either in document itself or in stylesheet. See demo

2) Paginator Style: Open paginator.js, there is a variable called paginatorStyle. This variable accepts values from 1 to 4, for displaying different styles of paginator. More info is given in comments below that.

3) Pagination Position: By default the position of paginator is below the div where pagination is applied. In paginator.js you can change paginatorPosition to ‘top’ if you want paginator to be on the top instead of bottom, or ‘both’ if you want it to be on both (top and bottom).

4) Changing Symbols: Open paginator.js, there are variables like firstPageSymbol, previousPageSymbol, nextPageSymbol, lastPageSymbol. You can change these symbols, so instead of << as symbol for first page, you can write FIRST PAGE, or give img tag if you want fancy image for first page. Also, there is a variable called separator, which will appear in-between page options. Make it blank if you don’t want it.

5) Changing Items per page and Start Page: By default there are 5 items per page and start page for pagination is first page. You can change them in paginator.js, the variables are named itemsPerPage and startPage.

6) Enabling other options: There are 3 options available, like goto to page, change items per page, display page info. By default these are disabled, you can enable them according to your needs. You can enable them by replacing false with true as variables value, in paginator.js. More info is given in comments besides each option.

7) Calling pagination again after changing content: If you change content, upon which pagination is applied in-between, just call initPaginator(); after changing content. It will apply pagination again on the new content with same previous settings.

8) De-paginating Content : At any time, if you want to remove pagination from the content, just call $("#").depagination(); You can call $("#").pagination(); to apply pagination again on same or any other content. Kindly remember, at one time you can apply pagination on only one div or content. If you want to apply pagination on other div during program, first call depagination function on previous div and then pagination function on new div.

9) Don’t want to open paginator.js: No worries, if you don’t want to change these variables in paginator.js, you can still change these variables in html documents just before calling the pagination function. Like See Demo.

$(function(){ itemsPerPage = 3; paginatorStyle = 2; paginatorPosition = 'both'; enableGoToPage = true; $("#result").pagination(); });

That’s it. Apply it wherever you want. Play around it with, try different styles and options. Email me in case of any bug, error, confusion or you need any further assistance/customization. All kinds of feedbacks are appreciated and welcomed.

I also recently uploaded uncompressed version of the plugin for development purposes, download it. feel free to download and extend it. Also, I have uploaded this plugin on jquery plugin directory. Here is the link – http://plugins.jquery.com/project/jquery-pagination

Tested in all major Browsers

Why Facebook is following Twitter?

admin — Sat, 12 Sep 2009 12:21:47 +0000

Twitter caught the eyes of people with its unique idea of micro blogging. Twitter provided the stage and the way to say what you feel like, to whole world with 140 characters. Growing number of twitter users proved that the world is accepting and going with twitter. The Facebook (referred as fb in this article) on the other hand is the biggest medium to be social on internet. Fb has largest user base in social networking. Idea of fb is completely different and deals with sharing your personal life with your friends and staying updated on what happening in your friend circle.

However, It became quite obvious after fb brought Friend feed, that it will go twitter’s way. Fb started status message. Recently gave option to open your status message to world and allowed third party applications to access its API. Just few days back it introduced the mention feature with @, same as twitter. Clearly, fb trying to adopt the twitter idea to reach maximum people and retains its own users from going to twitter.

So, what makes the Fb to follow twitter? Here are some of main reasons,

1. Growing popularity of twitter: Even fb is the big boss in online social networking, it certainly sense the growing number of people using twitter. It was apparent that fb users are turning to twitter for its ability to reach out to maximum people than fb. Fb certainly doesn’t want its users to go for some other service and as result fb decided to implement same functionality within its own app.

2. Real time searches: This is muscular feature twitter came up with. After Google taken over the searching on internet, this unique feature proved very crucial for twitter in setting its position on internet. With Real time searches twitter soon became the apple of everyone’s eye. It was very easy for twitter as people are tweeting like hell every second and from every part of world. Moreover twitter already has efficient and reliable search algorithm, structure and server power to back this feature. Along with that, twitter is coming with geo location for every tweet, adding new dimension to its search. Google and fb both are looking to grab on to this feature, because it is going to be very critical which of these three make most of it, because I think it is surely going to be next big thing on internet.

3. Reach to maximum people: With fb you are linked to your friends and some known ones. Your reach is limited and bonded by fb privacy terms. You cannot state your viewpoint to whole world. Twitter overcame this without much difficultly as its idea was clear to provide people a universal platform, to reach masses with your tweet. That’s the reason which attracted many celebrities and famous personalities to twitter.

4. Twitter versatilities: People use fb to be in touch with friends. On the other side twitter can be used in various ways like conversation, spreading idea, links, giving opinion, stating one’s viewpoint or simply conveying world what you are doing. Well you can say fb allows photo and video sharing which is absent from twitter. But twitter showed maturity on this by providing third parties its API to create applications which fills its void of media sharing. Twitter apps grown hastily and used twitter’s 140 characters in so many different and creative ways, is just in sane. These app ranges from business to entertainment to information to anything you can think of. I personally like twitter apps more than fb’s useless games, quizzes and questionnaires.

What-so-ever be the reason, the fact that fb going after twitter, makes a point very clear that twitter has lots of potential which can turn social networking in big way. Fb doesn’t want to lose his grip on social networking. Whichever way this struggle goes, the ultimate judge is audience. Personally I feel it is the idea or its excellent implementation which is going turn stone for these social networking giants on internet. Lastly, may the best application wins.

Stupid Mistakes I made

admin — Sun, 09 Aug 2009 10:11:49 +0000

Well this is about the unbelievable but honestly UN-intentional mistakes I made during programming. It might sound funny but true that we programmers (Intelligent techie geeks) often make some stupid and illogical mistakes. I beg to differ from those programmers who didn’t agree with this generalization. However, I often hear about similar silly mistakes been made by my fellow programmers and friends.

When program don’t run as I expected, I start debugging the program rigorously, looking at each line of code to find out what went wrong. Seldom, despite of my best efforts and hours of frustration, I cannot figure out the bug. After that I have to keep my programming self respect at bay and call upon my co-programmers to rescue me. Here comes the most embarrassing moment. The error has been found and it happens to be a missing “+” sign. It was in front of me
and I had gone through many times, still cannot figure it out. I had experienced this situation many times during programming. Here are some of them,

After one year of programming in PHP, one of my friends asked me for help on some C++ program. I wrote the program and emailed him. Next day I get call from him, telling the program is giving lots of errors during compilation. I checked the program and soon I realized that I had mixed PHP in C++. I had declared variables as int $xyz = 0; which should be without dollar sign (int xyz=0;). When I told about this to my friend, he advised me not to do similar things in PHP.

Next one took almost 2 hours to figure out that it was just a spelling mistake. The PHP program I made generates results with link. Everything is fine in the page except for some links on left sidebar. Those are not appearing as link on browser besides having anchor tag. While other anchor tags were showing correctly as links on browser these are shown as simple text. I checked again and again just to find the code was correct in every way. I tested it on all
browsers but result was same. Then my senior programmer pointed out a silly spelling mistake in my code. I had written

Recently, I was working a lot in JavaScript for one of my project. While programming backend for the project, I encountered a strange problem. I was returning some text from database through Ajax. On the browser it was showing a big zero instead of text. After all the regular debugging I have to call my colleague. He smiled when he looked at my code. Soon I know that it was one of those embarrassing moments. I had used plus(+) sign instead of dot(.) sign to concate the strings in PHP. Plus sign is used in JavaScript for string concatenation.

Obviously, these were not my best days and this post is its going to spoil my portfolio. Anyways, I surely will be updating this post till I become perfect in programming. Also I am expecting some contributions in this from honest programmers.

Highlight Your Searches

admin — Fri, 07 Aug 2009 09:32:00 +0000

Recently I was strucked with one BIG problem in programming my one of the application. How to highlight the search phases in the result through javascript? The problem was simple enough for any programmer and there are lots of srcipts available online.

However, this problem is lot more complicated than it seems to be. The searched result should be checked for any link, hashtag or at the rate symbol. If found the script needs to convert them into a specific link. That’s fine, I searched on google, found some script and implemented them without any much difficulty.

The real problem arises when after converting all links I need to highlight searched phase in result. The very initial reaction was to search for the phase and replace it with word. However, this script searches for the word even inside the anchor tag or any other tag … and boom everything is converted into link or some codeline.

Therefore, I needed some script which does not search for the word inside anchor or any tag. I know Regex is the solution but I am not so good at it. Even after lots of searching, I I just found related questions and solutions that never worked for me. The problem presist.

Yesterday, I encountered one of the articles on devthought.com by Guillermo Rauch. He has written code for highlighting searched word as extended function in jquery and mootool. As I was already using Jquery, I decided to give this code a try. I modified the code to fit into my application and it worked flawlessly.

The article can be reached here. It helped me a lot in highlighting the searches in result. It can be used anywhere with any script for highlighting anything. Its really amazing that how any small function can solve BIG problems.