February 22, 2009
44 Comments

Create a live-update list effect with jQuery

Posted in jQuery, Tutorials by Gergely Marton

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.

Related Entries

Signup for our awesome Newsletter!

We will try to send you e-mail that will open your eyes in the morning and wake you up in the evening!

About the author

Gergely Marton, 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.

  • Tom

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

  • http://www.webgurusdesignblog.com Gergely Marton

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

  • dan

    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?

  • http://www.webgurusdesignblog.com Gergely Marton

    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!

  • dan

    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.

  • http://www.webgurus.biz Gergely Marton

    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!

  • Jsir

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

  • jonathan

    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

  • http://www.essayslab.com Charlotte28

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

  • http://www.onuronaran.com.tr onur

    thank you for sharing

  • Andrew

    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.

  • Andrew

    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

  • http://www.btopi.com fast payday loans

    Theres an extra single quote before

  • http://www.askbuyusunasilyapilir.net Aşk Büyüsü Nasıl Yapılır

    Theres an extra single quote before

  • http://www.mark5inc.com Teeth Whitening

    I have to mention that all the effects (like fadeIn, hide, etc.) and all the variables can be changed to fit your needs.

  • http://www.club-penguin.org/ ClubPenguinCheats

    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.

  • http://www.legalsoundz.com Music downloads

    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.

  • http://www.watchesky.com/ fade watches

    I am a fanatic watch collection, especially the well-known watches, you also can do, click on my name!

  • http://www.watchesky.com/ fadewatches

    I am a fanatic watch collection, especially the well-known watches, you also can do, just click on my name!!!!!!!!

  • http://www.cheapprintershop.cz.cc/ Quentin Cavey

    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.

  • http://infocusz.com/ Alyce Dombrosky

    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

  • http://www.homeimprovementcenters.co.cc home improvement centers

    I really loved this post. You write about this topic very well. I really like your blog and I will definetly bookmark it! Keep up the super posts!

  • http://standmixerattachment.co.cc/ stand mixer attachment

    Good read. I observed your web page from a google search, and was glad i did. The facts has helped me immensely.

  • http://www.7daysshopz.com Kiera Pickar

    Hi. I wanted to thank you for the fantastic details you have posted on your web page. I will definitelycome back to check it out once again and have subscribedto your RSS feed. Have a great day.

  • http://louisvuittonstyle.org/ louis

    hey,this is one of the best posts that I’ve ever seen; you may include some more ideas in the same theme. I’m still waiting for some interesting thoughts from your side in your next post.

  • http://www.t3-interactive.com Omar Khan

    Thanks for this tutorial. I have a client who wanted to have a news feed running on their website. I’m going to try this and see how it works out.

  • http://www.china-blockmachine.com/ Block making machine

    Thanks to share the good info. It is valuable.

  • http://www.snowbootscamp.com/ Women’s Classic Cardy Boots

    It is very nice of you to share this.

  • http://www.co-co-chanel.com/ Cheap gucci purse

    Great tips, TY very much.

  • http://www.agico.cn oil press

    Create a live-update list effect with jQuery?That’s a good ideal.Thanks

  • http://www.laptopspark.com laptopspark

    we supply cheap and nice tablet pc welcome!

  • http://www.china-blockmachine.com/ Brick making machine

    It is very nice of you to share the good tips.

  • Cyrille

    The sample (http://www.webgurusdesignblog.com/demo/jquery-live-update-effect/live_update_effect_tutorial.html) does not works on Chromium 10 on Ubuntu 10.
    It works with Firefox 3.6.

    Cheers.

  • http://www.octaminds.com Octaminds Web Solutions

    Nice tips… Thanks

  • http://www.onlinecheck.com/business_loan.html Fast Business Funding

    Thanks for sharing this information with us. The blog is really interesting. Keep up the good work in future too.

  • http://www.sherwinhermogenes.com/ Web Designer Philippines

    thanks for this script.

  • Nagender

    hai

  • Nagenderpuli

    It is is excellent i like this

  • Victor Sh 91

    Sample doesn’t seem to work??

  • http://yepi-games.kizifriv1.com/ friv

    thanks you for
    Sample

  • http://y8-kizi.kizifriv1.com/ kizi friv

    I am now currently hoc css. I still do not quite understand jQuery. thank you

  • http://kizi-juegos.kizifriv1.com/ Kizi Juegos

    Thank you for this useful information. I will be back to read more of your articles.

  • http://www.y8u.org/ Y8

    I can’t even begin to imagine how much work you did on this article. This is really great content that I can grasp. Great job.

  • http://www.yepibugy.com/ Yepi

    Your article is excellent. Your writing style and solid information is interesting and smart. I agree with a lot of your views.