Creating an Auto Updating Data Slider With jQuery

Okay, so it’s actually pretty easy to create with a bit of HTML & jQuery. I don’t know if this is how Twitter made their’s but it seems to work in the same way.

First let’s write out some HTML. Oh, and a little note. I’m not doing any fancy styling I’m just showing how to replicate the functionality.

There. A simple container to hold out constantly updated data. I would advise changing the ID to something related to the data you are holding. We also need a little bit of CSS or the jQuery will not work properly. Here it is:

You must set the outer container to have it’s overflow hidden, if you don’t you will be able to see any data that flows out of the bottom of the element before it is removed. Also each piece of data must be set to display none or the animating won’t work. Other than those two CSS rules feel free to style however you like. It’s obviously advisable to give your outer container a height & width.

Now let’s take a look at the jQuery:

First we have our standard DOM ready function. Next we call our function to get the data, so that there is already data loaded when the page has loaded. If you can though I would advise removing that & actually grabbing the data via PHP on the page instead of calling the AJAX function. Now we use setInterval() to call get_data() every 5 seconds (5000 milliseconds).

Next we define the get_data() function. First we use the standard jQuery AJAX post method to call for our data, this part is up to you. Obviously Twitter get their tweets, but you can get whatever you want. Now we take the response and use it to create a div element with a class (used for styling) and said response inside, we store that inside the variable $el. Now we prepend (meaning place before) the div element we just created onto the datas element.

Now an important part, we count how many ‘data’ elements we have so we can remove excess, this stops the browser crashing if it is left running the page for a long time. Then we check to see if we have just added a 6th element, if so we remove the last one so we only ever keep 5 rows of data.

Next we get the $el height & store it in the height variable. Now we set our elements opacity to 0, display to block, and height to 0px. Why? Well the opacity to 0 as we are going to fade it in, display to block as height animations don’t seem to work properly if we don’t, and then height to 0px to make the element hidden. We didn’t set these with CSS as we needed to know what the height was in relation to the content, if we made the height 0px via CSS we wouldn’t have been able to get that.

Now we can do some animating. We just animate the height by using the height variable. We set a time in this case 500 milliseconds (0.5 sec). Now we use a callback to run the opacity animation which is the same as the height animation, but for opacity.

There we have it. I’ll see if I can get a demo version up soon, but that’s all there is to it. I hope this has helped you guys & gals, and the person who requested this tutorial. If you have any questions or suggestions please contact me via the comments.

AJAXjQuerySlider