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.

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

July 6, 2010 at 5:48 am
ClubPenguinCheats says:

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.
August 5, 2010 at 6:22 pm
Music downloads says:

I can see that you are an expert in this area. I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
August 5, 2010 at 6:47 pm
Coloring Pages says:

A topic close to my heart thanks. Please consider a follow up post.
August 6, 2010 at 1:57 am
Wholesale baseball hats says:

Took me awhile to read all the comments, but I really love the article. It proved to be very useful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! I’m sure you had fun writing this article. Comfortably, the article is really the sweetest on this precious topic.
August 6, 2010 at 2:04 am
Famous Hats says:

I recently came across your blog and have been reading along.
I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading.Nice blog,I will keep visiting this blog very often.
August 6, 2010 at 2:59 am
navy seal workouts says:

This Navy SEAL workout routine are the primary fitness test applied to SEAL candidates before entering into Phase One of training. This is among of the more tough military workouts. But you should be adept at this SEAL workout routine before looking at BUDS
August 6, 2010 at 3:43 am
fade watches says:

I am a fanatic watch collection, especially the well-known watches, you also can do, click on my name!
August 6, 2010 at 4:40 am
lenen says:

Lenen Zonder BKR Toetsing Lenen zonder BKR toetsing stijgt in populariteit op het Internet. Veel mensen met een zogeheten BKR notatie, die toch geld willen lenen zijn op zoek naar …
August 6, 2010 at 11:09 am
design web london says:

If i like to load some data on runtime lets say when someone inserted a row in a database the same moment on other page it loads up

is that possible with Jquery ?
August 7, 2010 at 8:11 am
fadewatches says:

I am a fanatic watch collection, especially the well-known watches, you also can do, just click on my name!!!!!!!!
August 13, 2010 at 7:20 pm
hypotheek says:

Hypotheken? Heel veel hypotheek informatie: verschillende hypotheekvormen, hypotheekrentes, nationale hypotheek garantie, hoe een hypotheek te vergelijken.
August 25, 2010 at 5:57 pm
Quentin Cavey says:

Hi. I wanted to thank you for the wonderful data you have posted on your internet site. I will definitelycome back to check it out once again and have subscribedto your RSS feed. Have an excellent day.
August 26, 2010 at 6:07 pm
Alyce Dombrosky says:

Admirable blog! I’ll probably be referencing some of this details in my next speech. I would appreciate it should you visited my blog at