Today, I’m going to show you something interesting with jQuery. Yesterday I was thinking something to post something programming related stuff  in blog after long time and I came across a website, whose menu impressed me a lot. But checking it in a while, I found it it was built using mootools.  Since it was in mootools, I thought of replicating it in jQuery. I have two example of similar menu, first using jQuery core and CSS and another uses jQuery easing plugin to give bounce effect to the same menu.And I’ve added one more example which I though would be nice menu to show you guys.

VIEW DEMO

First of let me start, with the images which i’ve used in the background to create the first two menus.

and

Please note that the please keep the left image as big as possible if you’re menu text can be long.

Now, let’s look at the html code

Html code for the animated jquery menu

<ul class="nav" id="nav1">
   <li class="first"><a href="#">Home</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">Blog</a></li>
   <li class="last"><a href="#">Tutorials</a></li>
   <li class="bg"><div class="left"></div></li>
</ul>

All the list elements are fairly simple and the list with class “bg” is the one which holds the background image for the menu. The code is same for the first and second example but for the third example we use list with class ybg instead of bg.

 <li class="ybg"></li>

CSS code for the smooth jQuery menu

ul.nav { list-style:none;  overflow:hidden;  }

ul.nav li { float:left; height:39px; background-color:#000;  padding:0 5px;  }

ul.nav li.first {
  -moz-border-radius-topleft:9px; -webkit-border-top-left-radius:9px;
  -moz-border-radius-bottomleft:9px;  -webkit-border-bottom-left-radius:9px;
}

ul.nav li.last {
-moz-border-radius-topright:9px; -webkit-border-top-right-radius:9px;
-moz-border-radius-bottomright:9px; -webkit-border-bottom-right-radius:9px;
}

ul.nav li.bg {
   margin:7px 0px 0px 3px; padding-right:8px; position:absolute;
   z-index:50; left:155px; width:60px; background:url(bg-right.png) no-repeat right top;
}

ul.nav li .left { background:url(bg.png) no-repeat left top; height:39px;  }

ul.nav li a {
  padding:8px 20px;  color:#FFF; font-size:18px; font-weight:bold; display:block;
  text-decoration:none; z-index:100; position:relative;
}

ul.nav li.ybg {
  background-color:#FB0; position:absolute; z-index:50;
  left:165px; width:55px; height:4px; margin-top:6px;
}

As you can see there, I’ve used CSS3 rounded corners for the first and last elements of list(obviously doesn’t work IE). Furthermore, the list with class bg is used for the first and second menu examples where the image is used in the background and which moves around on mouse hover on menu with sleek effect. Please note that this list must be positioned absolutely.

The ybg class is used for the background effect for the third menu in the example, which first moves to the menu which has current mouse position and then starts sliding down.
After this, let’s get into jQuery code for providing the sleek effect for the hover menu.

jQuery code for animation in the  on menu

$('#nav1 li a').hover(function()
{
  var offset=$(this).offset();
  var thiswidth =$(this).width()+13;
  $('#nav1 li.bg').stop().animate({left:offset.left+"px",width:thiswidth+"px"},600);
},
function()
{
  $('#nav1 li.bg').stop().animate({left:"155px",width:"60px"},600);
});

The above is the code for the first menu. You can see that on the hover effect of anchor, first we’ve calculated the offset of menu and also width of the anchor element. Then, finally used animate function of jQuery to move the menu and increse the width of the background to create the nice and sleek effect.

As you can see the second function of hover menu, which is called when mouse is released from the anchor, just reset back the menu to it’s original position.

The code is exactly same for the second menu except the following line,

$('#nav3 li.bg').stop().animate({left:"155px",width:"60px"},600,'easeOutBounce');

You can see the difference easily where I’ve used easeOutBounce easing effect for the bounce out effect when mouse is released form the menu.

$('#nav2 li a').hover(function()
{
  var offset=$(this).offset();
  var thiswidth =$(this).width()+13;
  $('#nav2 li.ybg').stop().animate({left:offset.left+9+"px",width:thiswidth+"px"},400,function(){
     $(this).animate({height:"28px"},150);
  });
},
function()
{
   $('#nav2 li.ybg').stop().animate({height:"4px"},150,function(){
      $(this).animate({left:"165px",width:"55px"},600,'easeOutBounce');
   });
});

And you can see in the above code of the third menu, first of all the menu gets slided to the current position of menu and then the height of the background gets increased to 28px, giving a nice effect. And when mouse is released from the menu, the same things happens but in the reverse order.

DOWNLOAD SOURCE CODE

Few times back, sNare asked me how do display wordpress like overlay box where you can pass the variables when you click on the link and manipulate simultaneous actions in the overlay until user choose to close it. Today, I’ve come up with the solution of this with model upload overlay box using thickbox, a jquery plugin. I’ve used the Iframe content of thickbox while displaying the box as modal box.

LIVE DEMO

How to use the thickbox as modal overlay box?

Let’s look at the step by step to use thickbox for passing variables.

First of all, we have to include jQuery JavaScript Library to our page,

<script type="text/javascript" src="jquery.js"></script>

After this, include the thickbox plugin of jQuery,

<script type="text/javascript" src="thickbox-compressed.js"></script>

There is a CSS for using thickbox which also need to linked to the current page,

<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />

Now, let’s look at the anchor tag which passes the variables to overlay box and keep the overlay at top no matter how many simultaneous accesses occur in the box.

<a href="file_upload.php?post_id=5&TB_iframe=true&height=200&width=300&modal=true" class="thickbox" ><strong>Upload Files</strong></a>

If you want to know how to use the thickbox, then you can checkout their home page which contains good documentation. The main point is, class=’thickbox’ must be used for the displaying the content in overlay.

How to pass variables to overlay box (thickbox)?

If you look at the href attribute of anchor tag, you can see clearly that I’ve passed post_id variable with value 5 to file_upload.php, which can be easily fetched from PHP using $_GET['post_id'].

How to make overlay box stay opened on simultaneous access?

Now this is part which many people has asked me how to do it. To use thickbox in this fashion, you’ve to use it in iframe content mode.The following property of thickbox make it remained open on simultaneous access,

TB_iframe=true

Furthermore, We’ve used the following property to display the overlay box as modal box.

modal=true

DOWNLOAD SOURCE CODE

Sorry friends on the way of move to new home I’ve been lost from the blog as I didn’t have internet connection for few last weeks. Now, I’m back and I try to be regular as much as I can. Inspired from the new feature of wordpress 2.6.x which displays word count of each post, I’ve developed jQuery plugin to display word-count of Textarea. Please note that it is word count plugin not character counter.

LIVE DEMO

Jquery plugin: Word-count code

jQuery.fn.wordCount = function(params)
{
   var p =  {
   counterElement:"display_count"
   };
   var total_words;

  if(params) {
      jQuery.extend(p, params);
   }

  //for each keypress function on text areas
  this.keypress(function()
  {
    total_words=this.value.split(/[\s\.\?]+/).length;
    jQuery('#'+p.counterElement).html(total_words);
   });
};

VIEW PLUGIN’S CODE

As you can in the above code, I assume that each words of a paragraph are separated by the either spaces or dots(.) . Please have your suggestion if i can more characters to improve this plugin.

How to use this plugin?

Well, you can guess that a Textarea is needed of whose words are counted and another element like div or span needed to display the word count.

For example, the below HTML code contains Textarea (whose total word is counted) and span (for displaying counted word).

<textarea name="word_count" id="word_count" cols="30" rows="6"></textarea>
Total word Count : <span id="display_count">0</span>

Remember that the id of text area is “word_count” and “display_count“.

Now, let look at the jQuery code for displaying word count of text area , note that we are calling the function wordCount() which we’ve just developed in the plugin of jQuery.

$('#word_count').wordCount();

Note: display_count  is default id of element which is already defined in the plugin if you want to use the different id of elment then you’ve to override the value of variable counterElement which contains the id of element displaying word count.

$('#word_count').wordCount({counterElement:"word_counter"});

DOWNLOAD EXAMPLE CODE

In a jQuery tutorial, I’ve shown how to display different color in alternate row of table using jQuery. This time I’ve come up with advanced version of same tutorial where you can add different color in alternate row of table whereas you can display a different color when mouse moves over each row of table furthermore you can assign a different color to table row when mouse is clicked in the table row.

View Live Demo

HTML code for table row filtering using jQuery

<table id="mytable" border="0" width="40%">
  <tr><td>Michael</td><td>21</td></tr>
  <tr><td>Sam</td><td>22</td></tr>
</table>

As you can see there is nothing special in the above code where I’ve defined a table with id “mytable”.

CSS code for table row manipulation

.oddtr
{
	background-color:#EFF1F1;
}
.eventr
{
	background-color:#F8F8F8;
}
.trover
{
	background-color: #0099CC;
}
.trclick
{
	background-color: #00CCCC;
}

As you can above code, I’ve defined four different classes with four different color. oddtr for coloring the odd row of table, similarly eventr for even row of table then trover class for displaying different color when mouse moves over the table row i.e on mouse over event. Finally, trclick class for displaying different color of the row when mouse is clicked in the table row. Note that you can change these colors according to your choice.

jQuery’s JavaScript code for table row manipulation

//these two line adds the color to each different row
$("#mytable tr:even").addClass("eventr");;
$("#mytable tr:odd").addClass("oddtr");;
//handle the mouseover , mouseout and click event
$("#mytable tr").mouseover(function() {$(this).addClass("trover");}).mouseout(function() {$(this).removeClass("trover");}).click(function() {$(this).toggleClass("trclick");});

The first two line of jQuery adds two differnt classes to the alternate rows of  table with id “mytable“. The last line of jQuery acts for three differnt on the table row. When mouse is moved over the table row trover class is added to that table row. When mouse moves away form that table row trover class is removed from that particular row and finally when mouse is clicked on tha particular row it toggles the class trclick on that particular row.

Download Full Source Code

Yesterday, my friend Sujit asked me how can we get the mouse clicked position and display the pop-up message in that mouse clicked position using jQuery.Today, I’ve come up with the tutorial for the solution of this problem. In this tutorial, you’ll see how to display the pop-up message in mouse clicked position using jQuery. When you click the mouse in any position of document, the pop-up message gets displayed with the mouse position around the middle part of the pop-up message.

Live Demo                 Download Full Source Code

HTML code to display pop-up message on mouse clicked position

<div id="popuup_div" class="popup_msg">
   ....you can write the mssage here...
</div>

As you can above, the element displaying pop-up message is defined with the id “popup_div” and class of this element is “popup_msg“. You can write your custom message inside that div.

CSS code to display pop-up message on mouse clicked position

.popup_msg{
position:absolute;
z-index:10;
width:172px;
height:102px;
text-align:center;
color:#FF0000;
font: 14px Verdana, Arial, Helvetica, sans-serif;
background:url(bg_image.gif) bottom right no-repeat;
display:none;
}

The above CSS attribute is straightforward and you can change the attribute according to your requirement. But remember that, the position attribute should be set to absolute value and z-index should be greater than the other element’s z-index. Furthermore, the width and height attribute must be set according to the background image of pop-up message.

JavaScript ( jQuery ) code for displaying pop-up message

$(document).click(function(e)
{
  //getting height and width of the message box
  var height = $('#popuup_div').height();
  var width = $('#popuup_div').width();
  //calculating offset for displaying popup message
  leftVal=e.pageX-(width/2)+"px";
  topVal=e.pageY-(height/2)+"px";
  //show the popup message and hide with fading effect
  $('#popuup_div').css({left:leftVal,top:topVal}).show().fadeOut(1500);
});

As the above code is well document. I’m just going to give you the brief description. First of all, we took the height and width of the pop-up element. After that, we’ve calculated the left and top offset of element so that it gets displayed with the mouse position is around in it’s middle part. of the element With the last line of jQuery code, pop-up message’s left and top position is set and displayed. This pop-up message gets hidden with fading effect with the fadeOut() function of jQuery.

Live Demo                  Download Full Source Code

Last time, I’ve made the top floating message box using jquery. And a lot of people has asked me how can I preserve the state of that message box so that when it is closed.It won’t be open to for some time interval. Today, I’ve come with state preserved bottom hanging message box. When you close the message box, it’s state is preserved in cookie created using JavScript so that this message box won’t show up for certain hours.

View Live Demo

I’m not going to post the HTML code, it is same the previous post of floating message box using jQuery. You can refer to that article for HTML code.

CSS code for state preserved hanging message

#message_box { 
position: absolute;
left: 0px;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
width:99%;
display:none;
color:#0000FF;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
}

The element with id “message_box” is made hidden first with it’s position set to “absolute” for making it hanging. Other attribute you can change according to your need.

JavaScript Code for state preserved hanging message box

As this time, I’ve come up with the state preserved solution. I’ve used JavaScript for setting and getting value from cookie. I’ve used two functions getCookie() directly taken from w2school’s JavaScript cookie tutorial.But I’ve modified the setCookie() functions where you can set the cookie expirty time in number of hours Here is that function,

//function to set the cookie name, values and expiry time in hours
function setCookie(c_name,value,expireHours)
{
  var exhour=new Date(); //create the current date object
  exhour.setHours(exhour.getHours()+1); //setting hours
  document.cookie=c_name+ "=" +escape(value)+
  ((expireHours==null) ? "" : ";expires="+exhour.toGMTString());
}

Now, let’s dig through the jQuery code to provide the state preserved bottom hanging message box.

//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
  //the messagebox gets scrool down with top property and gets hidden with zero opacity
  $('#message_box').animate({ top:"-=15px",opacity:0 }, "slow");
   setCookie('show_message','no',1); //cookies is set to "no" value
});

As you can see above, when the cross icon is clicked the message box gets hidden and furtheremroe, it sets a cookie “show_message” with value “no” which expires in one hour. Now, look at the jquery code,

if(getCookie('show_message')!='no')
{
  var pos=parseInt($(window).scrollTop())+parseInt($(window).height());
  $('#message_box').css("top",pos-26+"px");
  $('#message_box').show(); //display the message box

  //scroll the message box to the top offset of browser's scrool bar
  $(window).scroll(function()
  {
    var pos=parseInt($(window).scrollTop())+parseInt($(window).height());
    $('#message_box').animate({top:pos-26+"px" },{queue: false, duration: 500});
  });
}

As, you can see there is condition to show the message box and  code inside scroll event to execute. If the cookie is not set then the message box gets displayed and it will be shown to the bottom of the page according to the requirement.

Download Full Source Code

Last time, I’ve shown you how to create a alert box using jQuery. This time, I’ve come up with another tutorial to show you how to display floating message box in the top of  the browser using jQuery. The message box always get displayed at the top of the browser although you move across the document with help of scroll bar. Now, let’s kick out this tutorial for creating floating message box using jQuery.

LIVE DEMO

HTML code for floating message box using jQuery

<div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
    The floating message goes here
</div>

<div>
  ..............
  other content goes here
  ..................
</div>

The message box which is going to float in the top of the browser is inside the div with id “message-box” and this div is defined with the class “cornerbox”. And the small image with id “close_message” to close the message box and is displayed in the right hand side by setting the float attribute of CSS to right .

CSS code for floating message box using jQuery

#message_box {
position: absolute;
top: 0; left: 0;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
font-weight:bold;
width:99%;
}

You can see that CSS code for the floating message box is straightforward and you can change the color , size etc. according to your choice. But keep in mind that, “position” property must be absolute so that this message box doesn’t distract the other boxes and “z-index” must be set higher so that the it overlaps the other content of the web page.

jQuery code for floating message box

<script type="text/javascript" language="javascript" src="jquery-1.2.6.min.js"></script>

You must notice that I’ve used jquery 1.2.6 in this example as dimension plugin of jquery is embedded in the this version of jQuery. If you use the lesser version of jQuery than 1.2.6 then must use the dimension plugin of jQuery to use this example.

//scroll the message box to the top offset of browser's scrool bar
$(window).scroll(function()
{
  $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});

As you can when the window gets scrolled this function is called and the box gets moved as the “top” property of message box is set to different pixel using scrollTop() function, which had been the part dimension plugin of jQuery. This function return the scroll top offset of the matched element and in our example this return the scroll top offeset of the browser’s window. Another thing you must notice in the animate function that queue is set to false which makes the animation to skip the queue and begins running immediately otherwise the animation may stuck in the queue and looks ugly.

//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
  //the messagebox gets scrool down with top property and gets hidden with zero opacity
  $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");
});

It is the simple animation when the image with close sign is clicked, the message box slides down below and gets hidden because its opacity set to zero in the animation function.

DOWNLOAD FULL SOURCE CODE

As you can see in the poll running on this blog, jQuery is leading among the other JavaScript framework by a good margin. And, this blogger is also a great fan of jQuery.This time, I’ve come up with another tutorial of jquery. In this post I’ll show you how to make sliding and flashing alert box in top left corner of the browser using jQuery. This alert box gets displayed with animation when the page is loaded for the first time.

Live Demo

Let’s start looking at the HTML, CSS and JavaScript Code in jquery to make the animated alerting message box using jQuery.

HTML code for Flashing Alert Message using jQuery

<div id="object" class="message">
  <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
  <strong>Massive Offer </strong>
  <p>The detail of this offer goes here dude just Grab this offer !!!!!!! </p>
</div>

As you the message box which I want to display is inside the “div” element with id “object”. And there is an image inside of this box with id “close_window”, when this image is clicked the message box gets vanished with fading effect.

CSS code for Flashing Alert Message Box using jQuery

.message{
border:1px solid #CCCCCC;
position:absolute;
width:150px;
border:1px solid #c93;
background:#ffc;
padding:5px;
left:0px;
top : -170px;
}

As you know, I’m very poor in selecting good colors, please forgive me for the bad design of the alert box.

Above is the class which I’ve used for flashing message box. The position property must be “absolute” and the top property should be choosen such a way that the message box gets hidden in the top part of the browser. The other part property of CSS is straightforward you can change them according to your need.

JavaScript code in jQuery for Flashing Alert Message Box

$(document).ready(function()
{
  //first slide down and blink the message box
  $("#object").animate({
  top: "0px"
  }, 2000 ).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

  //close the message box when cross red image is clicked
  $("#close_message").click(function()
  {
     $("#object").fadeOut("slow");
  });
});

As you know, we’ve placed the message box in the top of the browser in such a way that it is not visible in the browsers. Now, the above jQuery code is used this message box to get slide down and gets flashed in the browser. For this, I’ve used animate() and fadeOut() and fadeIn() functions of jQuery.

And, when the close image of the message box is clicked, the alert box gets vanished with the fading effect.

Download Full Source Code

Last time, I showed you how to navigate the content in various effect using jQuery. In this post, I’ll show you how can you generate the shuffle effect i.e one block moves under another block with sliding from the left.

LIVE DEMO

Now let’s look at the various code to perform this task.

HTML and CSS code for shuffling the block

This code is same as the the one I’ve shown you in the content navigation effect using jquery post. Please refer to that post to view the HTML and CSS code for detail. Note that, each link’s “href” attribute is pointing to the “id” element of the block.

JavaScript code in jQuery to shuffle the block

//when the anchor is clicked
$("a.linkclass").click(function()
{
   //check weather the visible block and clicked link's block is same or different
   if($(this).attr("href")!="#"+$(".msg_body:visible").attr("id"))
   {
      //reduces the z-index and margin of left side increased and decreased by 400px and hide
      $(".msg_body:visible").css("z-index","0").animate({marginLeft: "-=400px"},"500").animate({marginLeft: "+=400px"},"500").hide("1");
     //increase the z-index of the new visible block
     $($(this).attr("href")).css("z-index","10").fadeIn(400);
   }
}

When the anchor with the “linkclass” is clicked, first of all it is check that weather the clicked anchor’s link is same as the visible block. If it is the same then the animation doesn’t take place. When these are different, then the visible block’s “z-index” is decreased to zero and it gets slides to the left and then into right by using altering the value in the “margin-left” property. And, finally this block gets hidden. In the meanwhile, block whose name in the “href” attribute of the clicked anchor gets visible with fade in effect and “z-index” of this block is set to “10″ so that it overlaps the slided block.

Download Full Source Code

Last time, I’ve shown how to create accordion using jquery. But, In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.

Live Demo of accordion menu using jQuery

HTML structure for accordion menu using jQuery

<div id="firstpane" class="menu_list">
  <p class="menu_head">Header-1</p>
    <div class="menu_body">
	<a href="#">Link-1</a>
    </div>
  <p class="menu_head">Header-2</p>
    <div class="menu_body">
	<a href="#">Link-1</a>
    </div>
  <p class="menu_head">Header-3</p>
    <div class="menu_body">
        <a href="#">Link-1</a>
   </div>
</div>

As you can see the structure, the elements of the menu are inside the div with class “menu_list”. And each blocks of menu contains the header with class “menu_head” and div with class “menu_body”. Note that, there is another pane with the id “secondpane” whose code is similar as above and not posted above.

CSS code for accordion menu using jQuery

.menu_list {
	width: 150px;
}
.menu_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
       font-weight:bold;
       background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
	display:none;
}
.menu_body a {
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover {
  color: #000000;
  text-decoration:underline;
}

I’m not a good color chooser so please forgive me for the color combinations. Above CSS code is straight forward and you can change is according to your need. Note that, the display property in “menu_body” is set to “hidden” so that the menu links are hidden when the page is loaded. Furthermore, the display property in the link inside “menu_body” class is set to “block” so that each menu appears in new line. You can see a image in the “menu_head” class, this is the image which gets changes with the visibility of the menu item in each menu’s head.

I’ve used the images from sweetie icon pack, you can download the other beautiful icon from the their website.

Javascript Code using jQuery

Now finally look at the JavaScript code to accomplish this, first of we need to import the jQuery library

<script type="text/javascript" language="javascript" src="jquery.js"></script>

And, then we need to write few lines of simple code in jQuery to do this, let’s look at the jquery code of the first accordion menu whose visibility gets toggled on the mouse click event on each header,

//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
    $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    $(this).siblings().css({backgroundImage:"url(left.png)"});
});

When the paragraph with class “menu_head” inside the element with the id “firstpane” gets clicked, the background image of it changed to down arrow. And then, next div with class “menu_body” gets slided in toggling it’s visibility. Furthermore, the other sibling’s div with class “menu_body” gets slided up. And then, the background image of the other sibling’s of “p” is changed to left arrow. Now look at the code of the accordion menu under mouse over effect.

//slides the element with class "menu_body" when mouse is over the paragraph
$("#secondpane p.menu_head").mouseover(function()
{
   $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
   $(this).siblings().css({backgroundImage:"url(left.png)"});
});

This code is preety similar to the above code but the difference is only that this accordion menu works on the mouse over effect whereas the above accordion menu works on the mouse click event.

Download Source Code

If you want to learn more about jQuery then you can check the following books and buy them.I really recommend the book “jQuery in Action” for starting your way for jQuery.

I always get bored with the same stuffs. And, I see same kind of content navigation to the different websites. Click a link, let’s the whole web page gets loaded and new page gets displayed. It would be better to show another content in the same page with few animation without loading the whole page.

In this post, I’ll show you how to make various animation to the content using jQuery. First of let’s start looking at the HTML and CSS code,

HTML Code for animated content navigation

<a href="#home" class="linkclass" >Home</a>
<a href="#about_us" class="linkclass" >About Us</a>
<a href="#service" class="linkclass" >Services</a>
<a href="#contact_us" class="linkclass" >Contact Us</a>

<div class="container">
    <div id="home" class="msg_body"> content goes here </div>
    <div id="about_us" class="msg_body"> content goes here </div>
    <div id="service" class="msg_body"> content goes here </div>
    <div id="contact_us" class="msg_body">  content goes here </div>
</div>

As you can see above, the “href” attribute of the anchor tag is pointing to the id of the “div”. “Home” anchor tag is pointing to “#home”. In jquery, id of a element is represented by adding “#” prefix to the id of that element.

CSS code for animated content navigation

.container
{
   width:312px;
   margin-top:20px;
}
.msg_body
{
  border:1px solid #CCCCCC;
  padding: 5px;
  width: 300px;
  background-color:#F4F4F8;
  text-align:justify;
  position:absolute;
}
.linkclass
{
  font-weight:bold;
  color:#006699;
}

Above CSS code is pretty straight forward and you can change it according to your need. Note that, there is position attribute to “absolute” in the “msg_body” class. Now let’s look at various the javaScript code in jQuery to make the various animated content navigation

Faded content navigation

View Live Demo

 //hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
  $('.msg_body').fadeOut("slow");
  $($(this).attr("href")).fadeIn("slow");
});

In the first line of javaScript code, all the element with class “msg_body” is made hidden except the first element with same class. And when the anchor with class “linkclass” is clicked, the element with class “msg_body” gets faded out which is being displayed in browser. And, the element with the id value in the “href” attribute of the clicked anchor tag, get displayed in browser with fading effect.

Shutter like content navigation effect

View Live Demo

//hide the all div except first one
$('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
   $('.msg_body').hide("fast");
   $($(this).attr("href")).show("slow");
});

The code is same as the above code but here “hide()” and “show()” function of jQuery is used to hide and display the content in different manner.

Sliding Content Navigation Effect

View Live Demo

 //hide the all div except first one
 $('.msg_body:not(:first)').hide();
//when the anchor is clicked content gets faded
$("a.linkclass").click(function()
{
   $('.msg_body').slideUp("slow");
   $($(this).attr("href")).slideDown("slow"););
});

This is another content navigation effect with sliding manner. “slideUp()” and “slideDown()” functions of jQuery is used to display this kind of effect.

Download full source code

Last time, I’ve showed you how to check user availability in Ajax using jQuery’s fading effect. But I’ve just shown the example without connecting the database and some people have faced problem with database connecting solution of that problem.In this post, I’ll show you how to use Ajax login system in php using jQuery and some animation as well.

View Demo

In this example, first of all we’ll validate the user login detail from ajax showing the messages with some animation. If authenticated, the user will be redirected to the secure page “secure.php”. If you’ll try to directly access “secure.php”, you can’t do that.

Now let’s look at the code how to do this,

HTML Code

< form method="post" action="" id="login_form" />
  < input name="username" type="text" id="username" value="" maxlength="20" />
  < input name="password" type="password" id="password" value="" maxlength="20" />
  < input name="Submit" type="submit" id="submit" value="Login" />
< /form >

As you can see in html code, we’ve created the form with id “login_form”.

And furthermore, the CSS code is same as the one available in the pervious post of checking user availability in ajax and php.

JavaScript Code for Ajax Login validation system in PHP

First of all we need to use the jQuery library in our code,

< script src="jquery.js" type="text/javascript" language="javascript"></script >

Now let’s look at the code in javaScript to call ajax and show the animated message with fading effects.

$("#login_form").submit(function()
{
	//remove all the class add the messagebox classes and start fading
	$("#msgbox").removeClass().addClass('messagebox').text('Validating....').fadeIn(1000);
	//check the username exists or not from ajax
	$.post("ajax_login.php",{ user_name:$('#username').val(),password:$('#password').val(),rand:Math.random() } ,function(data)
        {
	  if(data=='yes') //if correct login detail
	  {
		$("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
		{
 		  //add message and change the class of the box and start fading
		  $(this).html('Logging in.....').addClass('messageboxok').fadeTo(900,1,
                  function()
		  {
  	  	     //redirect to secure page
		     document.location='secure.php';
		  });
		});
	  }
	  else
	  {
	  	$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
		{
		  //add message and change the class of the box and start fading
		  $(this).html('Your login detail sucks...').addClass('messageboxerror').fadeTo(900,1);
		});
          }
       });
       return false;//not to post the  form physically
});

As you can see above this code is preety much similar to the previous post of checking username availability in ajax and php and you can see the explanation of the above code from that post. But in above code, where the user is validated, he’ll be logged into the “secure.php” using “document.location” in JavaScript.

$("#password").blur(function()
{
	$("#login_form").trigger('submit');
});

Well, as you can see above javaScript’s code, when focus is moved away from the password it also call the for sumit action. Basically whenever you hit tab button in password field, it starts validating the user detail using ajax.

PHP Code for Ajax Login validation system

First of all lets’s look at the code of the “ajax_login.php”.

//get the posted values
$user_name=htmlspecialchars($_POST['user_name'],ENT_QUOTES);
$pass=md5($_POST['password']); 

//now validating the username and password
$sql="SELECT user_name, password FROM tbl_user WHERE user_name='".$user_name."'";
$result=mysql_query($sql);
$row=mysql_fetch_array($result); 

//if username exists
if(mysql_num_rows($result)>0)
{
	//compare the password
	if(strcmp($row['password'],$pass)==0)
	{
		echo "yes";
		//now set the session from here if needed
		$_SESSION['u_name']=$user_name;
	}
	else
		echo "no";
}
else
	echo "no"; //Invalid Login

As you can see above, the user login detial is validated from the database. If the user login detail doesn’t exists, it just returns the “no” values and if the user login detial does exists the it just return “yes” values with setting username in session variable.

Finally, let’s look at the code of secure.php

if(empty($_SESSION['u_name']))
  header("Location:index.html");
//if logout then destroy the session and redirect the user
if(isset($_GET['logout']))
{
  session_destroy();
  header("Location:index.html");
}
echo " <a href='secure.php?logout'><b>Logout<b></a> ";
echo " <div align='center'>You Are inside secured Page</a> ";

As you can see above the code of “secure.php” is simpleforward. If the user is not authenticated by session then he’ll be redirected to “index.html”. And there is link for “logout” in this page form where user can destroy the seession.

Download Full Source Code

Implementation Guide:

To implement this code, dump the tbl_user “table” available in the zip file to your database and configure the database connection in “ajax_login.php”.

Few days back, my friend Parleen asked me how can we make a textbox which just accepts only numbers specially digits only. And, for his I come up with this solution of textbox which only accepts digits, and if you try to enter any alpha bates in it then it displays the error message with animation.

View Demo

HTML Code

<input type="text" name="quantity" id="quantity" /> <span id="errmsg"></span>

As you can see above, I’ve given the name and id of textbox to “quantity” in this example.This is the textbox which only accepts numbers (digits only). You can see “span” after textbox which is used to display the error message with fading effect using jQuery.

Javascript Code

First of all, we need to use jQuery library as we’re using the jquery’s function to accept only digits.

<script type="text/javascript" src="jquery.js"></script>

Now le’ts write the code in JavaScript using jQuery to accept only digits in textbox and displaying error with animation.

//when key is pressed in the textbox$("#quantity").keypress(function (e)
{
  //if the letter is not digit then display error and don't type anything
  if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57))
  {
    //display error message
    $("#errmsg").html("Digits Only").show().fadeOut("slow");
    return false;
  }
});

When the key is pressed, we’re using the key’s ASCII value to check which button is pressed. In first expression, delete, tab or backspace button is is checked and “8″ is the ASCII values of the Back-space. Digits are checked in the second expression. “48″ is the ASCII values of “0″ and “57″ is the ASCII values of “9″. The the ASCII values of the other digits lies between “48″ to “57″. And, if the key pressed values doesn’t lies withing these range, then we are displaying the error message with jQuery’s fading effect.

And, the “return false” statement means that this functions returns false values which means not to type anything on the text box.

Download Full Source Code

Yesterday, Sushil asked me how can we bounce and blink an image or div using jQuery.In this post, I”ll show you how you can add bounce or blink effect to an image or div using jQuery.

Live Demo

First of all, let’s begin with the html code to add blink and bounce effect to your object using jQuery.

HTML Code:

<div id="object" class="message"> lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div>

Here the object which is needed to be animated is defined with the class”message” and with id “object”. Remember that, you can also put image in that “div” to bounce or blink.

Css Code:

.message{
border:1px solid #CCCCCC;
padding: 5px;
width: 150px;
background-color:#F4F4F8;
text-align:justify;
position:absolute;
top:50px;
}

You can see the attributes of the “message” class in css. You can change the above attributes as your need but remember one thing that the position property should be “absolute”. If you put it “relative”, the other object around the animated “div” or “image” starts get moved.

Javascript Code:

For blinking out the Object

//hide the object with blink effect
$("#blink_out").click(function()
{
  $("#object").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100);
});

As you can see above code, it is straightforward. When an element with id “blink_out” gets clicked, the element with id “object” gets animated with “fade out” and “fade in” effect of jQuery in alternative manner.

For blinking in the Object

//show the object with blink effect
$("#blink_in").click(function()
{
  $("#object").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
});

As you can see this code is same as the above code but altered the way the “image” or “div” gets faded.

For bouncing the Object

//bounce an object
$("#bounce").click(function()
{
  $("#object").fadeIn(100).animate({top:"-=20px"},100).animate({top:"+=20px"},100).animate({top:"-=20px"},100)
.animate({top:"+=20px"},100).animate({top:"-=20px"},100).animate({top:"+=20px"},100);
});

In the above code, we’ve used jquery’s animate() function to bounce an “image” or “div”. The “top” attribute of the object is toggled to show the bouncing effect on the object.

Download full source code

In this post,I’ll show you how to make a fancy username availability checking in ajax and php using jquery.When, you check the the username avaiability a fancy message box will show you the message with a little bit of animation. If you are looking for such kind of effect for checking username availability, then this might be right post for you.

View Live Demo

Now let’s check it how to do check the username avaiability in ajax and php using jQuery.

Html Code :

<div >
 User Name : <input name="username" type="text" id="username" value="" maxlength="15" />
 <span id="msgbox" style="display:none"></span>
</div>

As you can see the above the “span” with id “msgbox” will show you the username availability message from ajax.

Css code :

.messagebox{
 position:absolute;
 width:100px;
 margin-left:30px;
 border:1px solid #c93;
 background:#ffc;
 padding:3px;
}
.messageboxok{
 position:absolute;
 width:auto;
 margin-left:30px;
 border:1px solid #349534;
 background:#C9FFCA;
 padding:3px;
 font-weight:bold;
 color:#008000;
}
.messageboxerror{
 position:absolute;
 width:auto;
 margin-left:30px;
 border:1px solid #CC0000;
 background:#F7CBCA;
 padding:3px;
 font-weight:bold;
 color:#CC0000;
}

I’ve defined three different class for three type of different message class “messagebox” for “checking….” message, “messageboxok” and “messageboxerror” class for displaying username available and not available messages.

As you know you can change the attriubutes of the css of the above code but keep in mind that “position” property should be “absolute”.

Javascript code :

First of all, the jQuery library is used,

<script src="jquery.js" type="text/javascript" language="javascript"></script>

And when the focus is moved from the textbox of username the following function is called which call “user_availability.php” through ajax and display the appropriate message with fading effect.

$("#username").blur(function()
{
 //remove all the class add the messagebox classes and start fading
 $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
 //check the username exists or not from ajax
 $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
 {
  if(data=='no') //if username not avaiable
  {
   $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
   {
    //add message and change the class of the box and start fading
    $(this).html('This User name Already exists').addClass('messageboxerror').fadeTo(900,1);
   });
  }
  else
  {
   $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
   {
    //add message and change the class of the box and start fading
    $(this).html('Username available to register').addClass('messageboxok').fadeTo(900,1);
   });
  }
 });
});

As you can see in the first line, “all” css class is removed from the div displaying the message and then “messagebox” class is added to that that element with adding the text “checking” within the element and displaying with fading effect.

After that, ajax is used to call the PHP file, and when response is received through Ajax then jQuery is used to show the respective message-box with fading effects.

Php Code:

//this varible contains the array of existing users
$existing_users=array('roshan','mike','jason');
//value got from the get metho
$user_name=$_POST['user_name'];
//checking weather user exists or not in $existing_users array
if (in_array($user_name, $existing_users))
{
 //user name is not available
 echo "no";
}
else
{
  //username available i.e. user name doesn't exists in array
  echo "yes";
}

In the above PHP code, I’ve added three usernames in a array and then check weather that user exists or not in that array and print “yes” or “no” accordingly. The response taken from ajax is used within JavaScript function to display the appropriate message.But, you can use database connection to check the the availability of username in your code.

Download full source