Create a live-update list effect with jQuery

Posted in Tutorials, jQuery by Gergely Marton | Tags: ,

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.

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”

  • It’s a nice effect but it doesn’t work on google chrome :(

  • We will try to change it so it will work with Chrome! Thanks for the feedback

  • 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?

  • 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!

  • 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.

  • 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!

  • nice effect, but don’t understand how it would be integrated with someting automatically?

  • 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

  • Men apprise your release! To buy an essay or custom writing just about this good topic can be wide ground of knowledge!

  • thank you for sharing

  • 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.

  • 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

Post comment

Spam Protection by WP-SpamFree

Sponsors

Site Templates and WordPress Themes starting from $5
Make money with your Twitter

Recent Comments

Recent Posts

flickr Feed

    Onlineparfumeria.hucatman_v2Dorinarion.roProfi AdminSleek AdminIncasanoua.roCatmanInstillCSS XHTML Professionals

Search by tags

Affiliates