February 22, 2009

Create a live-update list effect with jQuery

I wrote this little tutorial because yesterday I’ve searched the web for 2 hours to find something similar, but nothing came up.
We were required to create a “live update” effect for a list in which new list items were added almost every 5 seconds.

The web page, where all this needed to function, is an auction page for clothing and shoes at Catman – Shopping Catalog.

Basically, whenever someone placed a higher bid then the last person in the list, it had to update to show the last bid first, and this function needed some animation too…

I have to mention that all the effects (like fadeIn, hide, etc.) and all the variables can be changed to fit your needs. You just have to play around with it for a while and you can come up with a nice live update feed or news list for your project.

1. First you need inlcude jQuery. I’ve included this directly from Google Code so it’s easier to manage.

This script works only with jQuery ver. 1.3 because of the live() function.

2. We create the functions, but first we reset the counter to 0:

You can change List item ” + counter + “ to whatever needs to be the item’s content, I’ve used this only as an example.

If you are including jQuery from your own source you have to delete the first two lines of the script:

google.load("jquery", "1.3");
google.setOnLoadCallback(function() {

and change it to the default jQuery init function:

$(document).ready(function(){

3. We need to show only the last 5 in the list so we remove the others as we add more. To accomplish this, insert the following code above the first line in the addItem() function:

if (counter>=5)removeItem();

This is relative to what you are trying to do with this script. You can set the number in the above code to any number you like, this represents the number of items showed in the list in a DESCENDING order.

4. You need to have two elements in the <BODY> of your page to use the script’s functionality, one UL or OL with the ID “items” and one button or link with the class of “add” . This can be modified as you like. You can change the ID or the Class in whatever suits your styles, but my example uses this:

» Add item to list

5. We add some CSS…This is just the way I did the styling so you don’t have to stick with it:

That’s all it takes to build this simple effect and I hope it can be completed with some awsome functions to get the needed results for your web app or web page.

View Sample
Download Sample

Please don’t hesitate to write me your ideeas about expanding this script to make it more powerful, or even more “stylish”. Maybe we can write a nice jQuery plugin after expandig to a higher level.

Author: Gergely Marton (20 Articles)

Marton Gergely is a self-tought web designer and developer with over seven years of experience. He owns his own little web design agency WebGurus, and runs this blog in his spare time. Usually the work gets more important for him than anything else, but he struggles to get some time to read and to play his violin.

12 Comments to “Create a live-update list effect with jQuery”

March 12, 2009 at 10:31 am
Tom says:

It’s a nice effect but it doesn’t work on google chrome
March 23, 2009 at 3:32 pm
Gergely Marton says:

We will try to change it so it will work with Chrome! Thanks for the feedback
March 24, 2009 at 2:17 am
dan says:

Either Im going mad, or this doesnt work. Ive looked at the demo, which does nothing, and tried it on my own server with the same outcome. Is there some trick Im missing here?
March 24, 2009 at 12:50 pm
Gergely Marton says:

There are a few things you should check before you can view the script (I’m guessing only):
1. Which browser do you use? (this script doesn’t work with Chrome yet – see tom’s comment).
2. If you have javascript disabled from your browser.
3. If your server does allow you to include 3rd party scripts (ex. Google )

Please let me know if you still have this issue, maybe we can figure it out.

Thanks for the feedback!
March 30, 2009 at 11:50 pm
dan says:

cheers for getting back, Im using IE7, javascript is deffinatly on, as other scripts are running nicely, and yes my server does. What Im saying is that even running your demo, nothing happens. I guess you just click “Add item to the list” and something should appear in the box below.
March 31, 2009 at 4:03 pm
Gergely Marton says:

Ok that made it clear for me! I know what your problem is. Because of the use of google.com/jsapi, Internet Explorer 7 is blocking the loading of jQuery because of the default Privacy settings in IE7. I’ve made the corrections to the script so It will load the jquery from my server and not from google. That’s it! Cheers!
April 15, 2009 at 4:21 am
Jsir says:

nice effect, but don’t understand how it would be integrated with someting automatically?
August 18, 2009 at 2:36 pm
jonathan says:

Hey there, thanks alot for the web tutorial. I was really in your position where i could not find the result. I manage to understand it but then i stumbled upon something which i wonder you could help me out. In the tutorial, you only append to the top of the list rite. How about appending it to the bottom of the list. Something like facebook comment or other website. Thanks in advance
December 18, 2009 at 2:18 am
Charlotte28 says:

Men apprise your release! To buy an essay or custom writing just about this good topic can be wide ground of knowledge!
January 25, 2010 at 8:40 pm
onur says:

thank you for sharing
January 25, 2010 at 10:40 pm
Andrew says:

Works fine in Chrome if you change
$(’#items’).prepend(’List item ” + counter + “”);
to
$(’#items’).prepend(’List item ‘ + counter + ”);

the problem is the id isnt closed correct due to the single and double quotes.
January 25, 2010 at 10:42 pm
Andrew says:

Hmm that didnt post properly. Try id=”item’ + counter + ‘” >List item ‘

Theres an extra single quote before the double after the counter is joined with id=”item