ViralPatel.net » JQuery

Facebook Style Scroll Fixed Header in JQuery

Viral Patel — Wed, 11 Jan 2012 12:22:41 +0000

While doing some UI changes of a website, we had to implement a FIX header which remains fix on top of screen while scrolling. Facebook has a similar header which remains on top of content.

Now for this, there are number of jQuery plugins available out there! But in our case we weren’t allowed to add any new plugins to the technology stack of application (I know it sucks ). So here is a small JQuery based solution to make a DIV of header fixed on top of the screen while scrolling.

Related: Mouse Scroll Events in JQuery

The HTML

Below is the HTML code. It contain a simple div #header which we want to freeze at the top. Note that we have included JQuery directly from jquery.com site (In my application we have included older version of jquery from out tech stack).

Scroll Fixed Header like Facebook in JQuery - viralpatel.net

Some dumb text to add scrolling in page

Some more dumb text to add scrolling in page

In above HTML, we added few lines “Some dumb text to add…” just to make page scrollable.

The JQuery

The JQuery code is pretty straight forward. Take a look:

We have added an event listener to “scroll” event. This handler function gets called each time scroll event is fired in browser.

Now we select the header element (highlighted in above code) and simply do some position stuff. We make the header div’s position fixed of static depending upon the state of scroll position. Also the top attribute is set to 0px in case we want to make it fix, when page is scrolled down.

Online Demo

Demo Download

Create a Clearable TextBox with jQuery

Viral Patel — Wed, 23 Feb 2011 23:50:54 +0000

Recently I came across a wonderful article by David Walsh on Clearable Textboxes with Dojo Toolkit [link]. This is a simple implementation where a clear button (x) added in a textbox which lets user to clear the content of the textbox. I have seen this simple feature in many websites and feel its very useful to have. It increase the usability of form.

I thought to implement the same feature using jQuery. Here is a simple plugin that I wrote to add clearable feature to any textbox in your HTML form. All you need is to call clearable() method on the textbox. For example.

...
...



...
...

But by the definition the .text() returns all the text inside an element. What if you have an element which contains child elements and you want text of only the selected element ignoring all the child elements?

For example: Here we have a DIV which has text “A quick brown fox” and also contain a child DIV which has text “jumps over a lazy dog!”


	A quick brown fox
	
		jumps over a lazy dog!

What if you just want “A quick brown fox” and wants to ignore all the child element? Well, here is a simple solution using jQuery.

We clone the element that you want text of, then remove all the child elements from this cloned element and then returns the text of element.

I have written a small jQuery plugin “justtext” which you can use to get the text of element and ignore all child elements. Here is the code of justtext plugin.

jQuery.fn.justtext = function() {

	return $(this)	.clone()
			.children()
			.remove()
			.end()
			.text();

};

So the usage is just by calling justtext() method on any element.





	A quick brown fox
	
		jumps over a lazy dog!

Online Demo

Online Demo Link

Dynamically shortened Text with “Show More” link using jQuery

Viral Patel — Tue, 28 Dec 2010 12:40:07 +0000

Facebook user updates has a great functionality. If the comment text is larger than few characters, the extra words are hide and a show more link is presented to user. This way you can keep long text out of the view to user and stop the cluttering of page. Also interested users can click on more link and see the full content.

Here is a simple tutorial to achieve this using jQuery / Javascript.

The HTML

Below is the sample text. Each text is wrapped in a DIV tag. Note that we have added a class “more” in each div. This class will decide if a text needs to be shortened and show more link showed or not.


	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Vestibulum laoreet, nunc eget laoreet sagittis,
	quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
	Duis eget nisl orci. Aliquam mattis purus non mauris
	blandit id luctus felis convallis.
	Integer varius egestas vestibulum.
	Nullam a dolor arcu, ac tempor elit. Donec.


	Duis nisl nibh, egestas at fermentum at, viverra et purus.
	Maecenas lobortis odio id sapien facilisis elementum.
	Curabitur et magna justo, et gravida augue.
	Sed tristique pellentesque arcu quis tempor.


	consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit.
	Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum.
	Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.

The CSS

Below is the CSS code for our example. Note the class “.morecontent span” is hidden. The extra text from the content is wrapped in this span and is hidden at time of page loading.

a {
	color: #0254EB
}
a:visited {
	color: #0254EB
}
a.morelink {
	text-decoration:none;
	outline: none;
}
.morecontent span {
	display: none;
}
.comment {
	width: 400px;
	background-color: #f0f0f0;
	margin: 10px;
}

The Javascript

Below is the Javascript code which iterate through each DIV tags with class “more” and split the text in two. First half is showed to user and second is made hidden with a link “more..”.

You can change the behaviour by changing following js variables.

showChar: Total characters to show to user. If the content is more then showChar, it will be split into two halves and first one will be showed to user.
ellipsestext: The text displayed before “more” link. Default is “…”
moretext: The text shown in more link. Default is “more”. You can change to “>>”
lesstext: The text shown in less link. Default is “less”. You can change to “<<"

$(document).ready(function() {
	var showChar = 100;
	var ellipsestext = "...";
	var moretext = "more";
	var lesstext = "less";
	$('.more').each(function() {
		var content = $(this).html();

		if(content.length > showChar) {

			var c = content.substr(0, showChar);
			var h = content.substr(showChar-1, content.length - showChar);

			var html = c + '' + ellipsestext+ ' ' + h + '  ' + moretext + '';

			$(this).html(html);
		}

	});

	$(".morelink").click(function(){
		if($(this).hasClass("less")) {
			$(this).removeClass("less");
			$(this).html(moretext);
		} else {
			$(this).addClass("less");
			$(this).html(lesstext);
		}
		$(this).parent().prev().toggle();
		$(this).prev().toggle();
		return false;
	});
});

Online Demo

Click here to view demo

Download Source Code

Click here to download (ZIP, 2KB)

Update:
The above code is modified into jQuery plugin. Thanks to Jay. Following is the code.

jQuery Plugin

Code

jQuery.fn.shorten = function(settings) {
  var config = {
    showChars : 100,
    ellipsesText : "...",
    moreText : "more",
    lessText : "less"
  };

  if (settings) {
    $.extend(config, settings);
  }

  $('.morelink').live('click', function() {
    var $this = $(this);
    if ($this.hasClass('less')) {
      $this.removeClass('less');
      $this.html(config.moreText);
    } else {
      $this.addClass('less');
      $this.html(config.lessText);
    }
    $this.parent().prev().toggle();
    $this.prev().toggle();
    return false;
  });

  return this.each(function() {
    var $this = $(this);

    var content = $this.html();
    if (content.length > config.showChars) {
      var c = content.substr(0, config.showChars);
      var h = content.substr(config.showChars , content.length - config.showChars);
      var html = c + '' + config.ellipsesText + ' ' + h + '  ' + config.moreText + '';
      $this.html(html);
      $(".morecontent span").hide();
    }
  });
}

Download

Click to login jQuery Shorten plugin

Usage

Step 1: Include the jQuery plugin in your HTML

Step 2: Add the code to shorten any DIV content. In below example we are shortening DIV with class “comment”.


	This is a long comment text.
	This is a long comment text.
	This is a long comment text.
	This is a long comment text. This is a long comment text.

You may want to pass the parameters to shorten() method and override the default ones.

$(".comment").shorten({
	"showChars" : 200
});

$(".comment").shorten({
	"showChars" : 150,
	"moreText"	: "See More",
});

$(".comment").shorten({
	"showChars" : 50,
	"moreText"	: "See More",
	"lessText"	: "Less",
});

jQuery Ajax – Handling unauthenticated requests via Ajax

Viral Patel — Fri, 24 Dec 2010 10:12:54 +0000

Since few days I am working on a small project where I have to deal with lot of Ajax requests. The whole UI is designed such that only appropriate parts are refreshed with required information through Ajax.

The application needs user authentication before accessing any part of it. Although this is easy to achieve in any MVC based framework, its a whole new thing when dealing with Ajax requests.

In a normal request/response based MVC application, if a user is not authenticated and tries to view a webpage, the request is redirected to the Login page. Almost all MVC framework comes with this functionality. When the request gets redirected to Login page, the Status Code 403 (Forbidden) is set in HTTP header. 403 Forbidden is a HTTP status code returned by a web server when a user agent requests a resource that the server does not allow them to.

But when using Ajax for getting the content, if the request is redirected to Login page, it is difficult to handle this scenario.

Here is a simplest solution that can be implemented in your Ajax based application. Just add this code in your Javascript file.

    $(document).ready(
        function() {
            $("body").ajaxError(
                function(e,request) {
                    if (request.status == 403) {
                        window.location.reload();
                        //window.location.href = "/myapp/login";
                    }
                }
            );
        }
    );

In above code, we have added a handler function to ajaxError which gets called by jQuery whenever there is an error in the HTTP Response. The function checks if the status code is 403, if it is then it simply tries to reload the URL. This generate a new request to the server which automatically gets redirected to the login page. The only disadvantage of reloading the page is that you generate a new HTTP request which server has to handle and redirect to Login page.

You may wish to directly redirect user to login page from client code itself. Check the Line XX where we are changing the windows location and redirecting user. I personally dont like this method as you have to hard code the path for login page in javascript. I prefer using the previous solution to reload the page.

I am sure there must be several way of implementing this in Javascript. Share yours if you think you have a better one

Multiple Checkbox Select/Deselect using jQuery – Tutorial with Example

Viral Patel — Thu, 11 Nov 2010 07:08:34 +0000

Almost all the user interfaces that I have created had this functionality of selecting multiple items from a list to process them or delete them. Although its very very easy to implement this functionality in Javascript, using jQuery for this is real fun. I will show you a simple implementation of adding multiple checkbox select and deselect functionality to any webpage. We will have a table with some data in it and checkbox in each row. There will be a select all checkbox in the header of the table. If user select/deselect the selectall checkbox, all the checkbox in table will get selected or deselected accordingly. Now one more thing we would like here to add is, suppose user select all the checkbox one by one then the selectall checkbox should be automatically gets selected. And if user click selectall first and then unchecks any of the checkbox, then the selectall also should be unchecked automatically.

The HTML



	
	Multiple Checkbox Select/Deselect - DEMO


	Multiple Checkbox Select/Deselect - DEMO


	
	Cell phone
	Rating


	
	BlackBerry Bold 9650
	2/5


	
	Samsung Galaxy
	3.5/5


	
	Droid X
	4.5/5


	
	HTC Desire
	3/5


	
	Apple iPhone 4
	5/5

	Cell phone	Rating
	BlackBerry Bold 9650	2/5
	Samsung Galaxy	3.5/5
	Droid X	4.5/5
	HTC Desire	3/5
	Apple iPhone 4	5/5

The jQuery Code

Add following jQuery code in HEAD section of above HTML

Here in above code at line 05, we register a handler on click of selectall checkbox. On click of this checkbox, we check/uncheck all checkbox in the datatable.
Also check the link 13, where we check the selectall checkbox, if all the checkbox are selected manually. To get more idea, play with the below demo.

Online Demo

Click here to view Online Demo

Understanding jQuery animate() function

Viral Patel — Tue, 09 Mar 2010 12:38:15 +0000

jQuery animate() function is very powerful API to manipulate html elements and add animation functionality. The use of animate function is very simple. First lets check the syntax of this function.

.animate( properties, [ duration ], [ easing ], [ callback ] )

properties: A map of CSS properties that the animation will move toward.
duration: A string or number determining how long the animation will run.
easing: A string indicating which easing function to use for the transition.
callback: A function to call once the animation is complete.

.animate( properties, options )

properties: A map of CSS properties that the animation will move toward.
options: A map of additional options to pass to the method. Supported keys:
- duration: A string or number determining how long the animation will run.
- easing: A string indicating which easing function to use for the transition.
- complete: A function to call once the animation is complete.
- step: A function to be called after each step of the animation.
- queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.
- specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

Lets learn the animate() function with set of examples.

First include the jQuery javascript library in your html file. Add following in your html tag:

For all the demos, we will use a sample DIV tag for animating. Following is the div code and its stylesheet.



Animate Height

Animate height/width

Animating height and width in jQuery is very easy. Lets assume you have a DIV that you want to animate i.e. increase the height.

$("#animate").click(function() {
	$("#content").animate(
			{"height": "80px"},
			"fast");
});

Demo 1:

Also following will be the code to animate Width of the element.

$("#animate").click(function() {
	$("#content").animate(
			{"width": "350px"},
			"fast");
});

Demo 2:

Animate opacity

$("#animate").click(function() {
	$("#content").animate(
			{"opacity": "0.15"},
			"slow");
});

Demo 3:

Moving elements using animate()




Move

$("#right").click(function() {
	$("#content").animate(
			{"left": "+=50px"},
			"slow");
});
$("#left").click(function() {
	$("#content").animate(
			{"left": "-=50px"},
			"slow");
});

Demo 4:

Callback Function

Callback functions are very useful to perform certain activity when the animation is completed. Also note here when multiple elements are mapped with the animation and we have specified a callback function. Then the callback will get called for each of the element.

Let us see an example where we use callback function to display a message when animation is completed.

$("#animate").click(function() {
	$("#content").animate(
			{"height": "100px", "width": "250px"},
			"slow", function(){
				$(this).html("Animation Completed");
			});
});

Demo 5:

Combine multiple animations

You may want to combine multiple animations. Following are few demos will help you understanding this.

Example 1: Animate both height and width at same time.
This example is pretty straight forward. You can animate both height and width at same time by specifying it in animate function. For example: In below code we specified height and width value in animate function.

$("#animate").click(function() {
	$("#content").animate(
			{"height": "100px", "width": "250px"},
			"slow", );
});

Example 2: Queuing the animations.

$("#animate").click(function() {
	$("#content")
		.animate({"height": "100px"}, 500)
		.animate({"width": "250px"}, 500);
});

Demo 6:

Queuing of Events

In above demo (Demo 6) we saw that when we queued up the events with multiple .animate() method call, the animation is actually queued up. i.e. it completes the first animation and then proceed with next. Let see an example were we use queue parameter to disable queuing. In following example we have set parameter queue to false. The code is exactly same as demo 6, only change we added is queue = false. Also note that queue parameter is added with second argument.

$("#animate").click(function() {
	$("#content")
		.animate({"height": "100px"}, {"queue": false, "duration": 500})
		.animate({"width": "250px"}, 500);
});

Demo 7:

oEmbed: An Open Format Every Developer Should Know About

Viral Patel — Tue, 26 Jan 2010 09:24:36 +0000

Most of the internet users spend their online time in creating and sharing content on internet. Sharing has became one of the most popular activity of internet users. This is attributed to formats like RSS and services like Twitter, Facebook etc. that allows user to share content with each other.

oEmbed addresses the important task of sharing and embedding information anywhere on internet. It allows developers to build applications that can easily access data from vast number of websites like youtube, flickr, google video, wordpress, wikipedia and many many more.

So what’s oEmbed? Well if you go by the definition on oEmbed’s official website:

oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.

The best example of oEmbed can be Facebook’s status update feature. When you paste a youtube movie link in Facebook’s status bar, it automatically identify the link content as youtube movie and embed it in the status. Similarly you can paste any kind of content link: Flickr, Wikipedia etc.

Basics of oEmbed

In this document I will use two terms very often, consumer and provider. Consumer is the client who wants to convert a link into embedded content. And Provider is one who get the request and send the oembed response. For example, if you paste a youtube URL in Facebook’s status update, Facebook will be the consumer and Youtube will be the provider.

A consumer who wants to convert a link into content will make an HTTP request like:


http://www.flickr.com/services/oembed/?url=http%3A//www.flickr.com/photos/bees/2341623661/

and the provider, in this case Flickr will send response in JSON format:

{
	"version": "1.0",
	"type": "photo",
	"width": 240,
	"height": 160,
	"title": "ZB8T0193",
	"url": "http://farm4.static.flickr.com/3123/2341623661_7c99f48bbf_m.jpg",
	"author_name": "Bees",
	"author_url": "http://www.flickr.com/photos/bees/",
	"provider_name": "Flickr",
	"provider_url": "http://www.flickr.com/"
}

Youtube example:
Request URL:


http://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json

Response:

{
	"version": "1.0",
	"type": "video",
	"provider_name": "YouTube",
	"provider_url": "http://youtube.com/",
	"width": 425,
	"height": 344,
	"title": "Amazing Nintendo Facts",
	"author_name": "ZackScott",
	"author_url": "http://www.youtube.com/user/ZackScott",
	"html":
		"
			
			
			
			
		",
}

Once the consumer get the response, all it has to do is to utilize the content and embed it in the page.

Request Format

The consumer who is requesting for the embed content must follow some basic rules while sending request. Requests sent to the API must be HTTP GET requests, with all arguments sent as query parameters. All arguments must be urlencoded.
Following are the request parameters:

url (required): This is the URL for which embedded content is requested
maxwidth (optional): An optional parameter for maxwidth can be passed. Some of the content provider who support this param will send the response content accordingly. For example, Flickr may set the maxwidth of image.
maxheight (optional): Similar to maxwidth, maxheight is an optional param.
format (optional): By default the content provider’s response is in JSON. But consumer may want the response in other formats like XML. This parameter will determine is response format

Response Format

The provider who sends the response back to consumer may send it with following parameters.

type (required): The resource type. Valid values, along with value-specific parameters, are described below.
version (required): The oEmbed version number. This must be 1.0.
title (optional): A text title, describing the resource.
author_name (optional): The name of the author/owner of the resource.
author_url (optional): A URL for the author/owner of the resource.
provider_name (optional): The name of the resource provider.
provider_url (optional): The url of the resource provider.
cache_age (optional): The suggested cache lifetime for this resource, in seconds. Consumers may choose to use this value or not.
thumbnail_url (optional): A URL to a thumbnail image representing the resource. The thumbnail must respect any maxwidth and maxheight parameters. If this paramater is present, thumbnail_width and thumbnail_height must also be present.
thumbnail_width (optional): The width of the optional thumbnail. If this paramater is present, thumbnail_url and thumbnail_height must also be present.
thumbnail_height (optional): The height of the optional thumbnail. If this paramater is present, thumbnail_url and thumbnail_width must also be present.

The provider may wants to add more attributes to the response.

Letting People Know You Support oEmbed

The oEmbed providers can make their service discoverable by adding following element in HEAD for the HTML document.

The URLs contained within the href attribute should be the full oEmebed endpoint plus URL and any needed format parameter. No other request parameters should be included in this URL.

The type attribute must contain either application/json+oembed for JSON responses, or text/xml+oembed for XML.

oEmbed Demo with jQuery

Integrating oEmbed support in your application using jQuery is very easy using jQuery oEmbed plugin. Following is the source code the of demo.
The HTML Code

Content URL:

The jQuery Code

$(function(){
	$('#btn').click(function() {
		$("#embed").oembed($('#update').val());
	});
});

Don’t forget to include jquery library and jquery oembed javascript in the demo.
The Demo
Enter any oEmbed supporting URL (Youtube video link or Flickr link http://www.flickr.com/photos/stuckincustoms/2035748576/) in below textbox and press Get.

(demo link)

oEmbed in PHP

There is a small PHP library that can be used to integrate oEmbed support in PHP. oEmbed-PHP is a library that provides OEmbed compatible interface for javascript and PHP clients to consume. It can deal with OEmbed providers by acting as a proxy, and it has a plugin system where you can add your own embed-providers.
Import this small PHP library and directly use it in your application.

  $manager = ProviderManager::getInstance();
  $obj=$manager->provide("http://www.youtube.com/watch? v=EQqJSAOOmGI","object");
  $html=$obj->renderClass();

oEmbed for other languages

Perl
Web-oEmbed (http://search.cpan.org/~miyagawa/Web-oEmbed/)

Ruby
oembed_links (http://github.com/netshade/oembed_links)

Python
Python oEmbed (http://code.google.com/p/python-oembed/)

jQuery Resizable and Draggable Tutorial with Example

Viral Patel — Mon, 25 Jan 2010 09:18:15 +0000

Have you ever tried doing some animation using plain Javascript or moving DIVs here and there or resizing them?! Well, you know then how much pain it is as not only you have to tackle the difficult part of animation but also making it cross browser compatible.

Well you probably know why I am stretching up so hard is just to tell you how easy it is to use jQuery and do some really fantastic things without even bothering of knowing how it is done internally. jQuery comes with really useful UI library that can be incorporated to do such tricks.

In this small note, I will show you how to do Resizing and Dragging of a DIV using jQuery UI. I will show you the demo of a DIV, which can be resized by pulling up the edges and also dragged here and there.

Step 1: Setting up jQuery UI and CSS

We need to install jQuery UI library first in order to do resizing/dragging. Add following lines in your HEAD of html document.

Note that we have imported jquery and jquery-ui library. Also, to use Resizable we must import jquery-ui.css file. This stylesheet will be used by resizable to add resize corner and other internal styles.

Step 2: Write jQuery to Resize and Drag

For the demo we will define a small DIV which we will make resizable and draggable.

Now just add following jQuery code in your document.

$('#resizeDiv')
	.draggable()
	.resizable();

The beauty of jQuery is that we can simply chain the function calling. First we called .draggable() function that makes the DIV draggable and then we called resizable().
You may want to define callback functions on start/stop/resize events. To do so we simply define:

$('#resizeDiv')
	.resizable({
		start: function(e, ui) {
			alert('resizing started');
		},
		resize: function(e, ui) {

		},
		stop: function(e, ui) {
			alert('resizing stopped');
		}
	});

Note that the callback function gets two arguments. First is event object and next is ui.
The ui object has the following fields:

ui.helper – a jQuery object containing the helper element
ui.originalPosition – {top, left} before resizing started
ui.originalSize – {width, height} before resizing started
ui.position – {top, left} current position
ui.size – {width, height} current size

For more information about jQuery Draggable (Drag and Drop) read this article.
jQuery Draggable (Drag and Drop)

Online Demo

Following is the online demo of jQuery Resizable and Draggable.

(Demo Link)

jQuery Live Event

Viral Patel — Mon, 14 Dec 2009 08:55:31 +0000

I love jQuery. I have expressed my love for jQuery here, here and here and still I feel so much for it. Also check out the 20 jQuery Tips & Tricks Tutorial.

Let us see a wonderful function available in jQuery which many of us don’t know. Most common use of jQuery is to attach an event some callback function to any element on webpage.

When we attach any event to element on webpage using normal functions such as mouseclick or click or mouseover, it attach the event only to current elements. If dynamically we add another element in future then this handler is not attached to those dynamic elements.

For example, we have a button on click of which we display an alert message. We can use $('#buttonid').click() to attach a handler function which can display alert message. But what if we dynamically add another button on page and we want exactly the same functionality? Well, jQuery Live Function comes to rescue for such requirements.

Let us see an example of normal event handling and one with Live function. In this example, we are dynamically adding list items that has hover effect. When mouse is hover on this list item, it changes the color. We will do this by both traditional way and using Live function.

The HTML

Following is the HTML Code for our example:

The HTML will display two buttons and two list sets. One button will dynamically add list item to one list using normal click event, where as another button will use Live events to do this.

The CSS

We will use following CSS in our example:

.list	li 	{
	list-style: none;
	background-color:#eeffaa;
	width:150px;
	margin-top:5px;
	border:1px solid #8AAC00;
}

.list li.selected {
	background-color: #ffaaee;
}

The jQuery

First we will attach an event with two buttons to dynamically add a list item.

$('#add').click(function(){
	$('#list').append(' ');
});
$('#addLive').click(function(){
	$('#listLive').append(' ');
});

Then, we will make the first list hoverable using mouseover and mouseout event.

$('#list>li')
		.mouseover(function(){ $(this).addClass('selected'); })
		.mouseout(function(){ $(this).removeClass('selected'); });

And, then we will make the second list hoverable using live() event.

$('#listLive>li')
	.live('mouseover', function(){ $(this).addClass('selected');   })
	.live('mouseout',  function(){ $(this).removeClass('selected'); });

Notice the difference in above code. In first snippet we are using mouseover and mouseout functions to attach events with handlers to change the background color of list item. When we add a list item dynamically, this handler are not attached to newly created list item. And in second snippet we are using live() to attach event mouseover and mouseout.

This way we ensure that any dynamically added element will have the events handler attached with them.
jQuery 1.3 and below
Currently jQuery 1.3 and below is not supporting events blur, focus, mouseenter, mouseleave, change, submit.
But the good news is that jQuery 1.4 alpha 1 has just been released which supports these events.

Important Points

Following are few important points one should note before working with Live events.

When you bind a “live” event it will bind to all current and future elements on the page.
Live events do not bubble in the traditional manner and cannot be stopped using stopPropagation or stopImmediatePropagation.
Live events currently only work when used against a selector. For example, this would work: $("li a").live(...) but this would not: $("a", someElement).live(...) and neither would this: $("a").parent().live(...).
.live doesn’t support the no-event style callback that liveQuery provides. Only event handlers can be bound with .live.
.live doesn’t have a “setup” or “cleanup” step, since all events are delegated rather than bound directly to an element.
To remove a live event you should use the die() method

Live Demo

Following is the live demo for jQuery Live Event Example.

Click To View Demo
Download Source Code

ViralPatel.net » JQuery

Facebook Style Scroll Fixed Header in JQuery

The HTML

Scroll Fix Header like Facebook in JQuery

The JQuery

Online Demo

Related Posts

Create a Clearable TextBox with jQuery

Online Demo

Related Posts

Dynamically shortened Text with “Show More” link using jQuery

The HTML

The CSS

The Javascript

Online Demo

Download Source Code

jQuery Plugin

Code

Download

Usage

Related Posts

jQuery Ajax – Handling unauthenticated requests via Ajax

Related Posts

Multiple Checkbox Select/Deselect using jQuery – Tutorial with Example

The HTML

Multiple Checkbox Select/Deselect - DEMO

The jQuery Code

Online Demo

Related Posts

Understanding jQuery animate() function

Animate height/width

Animate opacity

Moving elements using animate()

Callback Function

Combine multiple animations

Queuing of Events

Related Posts

oEmbed: An Open Format Every Developer Should Know About

Basics of oEmbed

Request Format

Response Format

Letting People Know You Support oEmbed

oEmbed Demo with jQuery

oEmbed in PHP

oEmbed for other languages

Related Posts

jQuery Resizable and Draggable Tutorial with Example

Step 1: Setting up jQuery UI and CSS

Step 2: Write jQuery to Resize and Drag

Online Demo

Related Posts

jQuery Live Event

The HTML

The CSS

The jQuery

Important Points

Live Demo

Related Posts