Building A Twitter Ticker With jQuery

A great way to show off your tweets when you don’t have enough space is to use a marquee or even better, a ticker. Despite having previously made a tutorial on making a classic typewriter ticker I’m not actually too fussed with them. So as an alternative here is how to make a fading ticker. Here is what we will be making:

Twitter bird is from hongkiat.com. We are using it here for illustrative purposes only & no harm/infringement is meant.

The HTML

First let’s get some HTML down. I have developed this code so it works perfectly with the Twitter Stream WordPress plugin. Here is an example of the output needed for the jQuery to work correctly:

With a little bit of modification the code should work fine for unordered lists too. I’ll try and add the modification in at the end.

The CSS

Next we need a bit of CSS to make it all pretty. If you want to change it feel free, these are just some settings that we here at Return True thought were quite nice, obviously the width will need to be modified in most cases. As I said I’m using Twitter Stream, because of that all my CSS is targeted at the twitter-stream class. If you aren’t using Twitter Stream just give your div a different class & substitute twitter-stream with it.

The jQuery

Okay, now onto the difficult part. Let’s first take a look at the jQuery code.

I think I might try to make a jQuery plugin out of this eventually, but for now I thought it would be of more use to write out the whole code & explain what it all does.

First we have the traditional no conflict DOM ready. I used no conflict as I was developing in WordPress. Next we setup some options in an object. These options are pretty self explanatory. You will need to change el to the class or ID of the div that holds the paragraphs (which contain the tweets). You can also change delay to change the length of time between each tweet. Animate is whether you wish the fade to be present between tweets. Otherwise they will just switch between each tweet. The other options should be left as they are or the ticker won’t work correctly.

Now for an explanation of the code. I was just going to make a jQuery plugin, as I said, but I wanted to be able to teach you guys something so I thought what better way than to explain how this works.

As we are going to remove the tweets from the page and replace them with a ticker we need to store each tweet. That’s what the this section does:

It uses the element defined as a base and loops through each paragraph found assigning the html of each paragraph to the items array created earlier. We also increment the total counter each time.

Next we tell our main function to run. Then we define said function. Let’s take a look at the next bit:

We check to see if you want any fancy animations. Yes? Then check if we already have a paragraph. Yes? Okay, select that paragraph and fade it out. Once complete select the parent (the div that holds the paragraphs), empty it and append the new tweet but with display set to none so it is hidden. Then select said created paragraph and fade it in. Got all that? If there isn’t any paragraphs yet we need to do all that again but without selecting the children & fading out or it causes some weirdness.

If we don’t want animation we simply empty the main element & append the new paragraph (tweet) to it.

One important thing to note in the code above is the opts.items[opts.count] this grabs the correct tweet from the array. How? Well the count is incremented (a little later) each loop through.

Now let’s take a look at the final major piece of code:

This code sets a timeout so our code will run over and over. We check if we have reached the last paragraph or tweet. If we have we need to reset to 0 and start from the beginning again. Otherwise we can add 1 to out count and run the main function again. This all occurs after the delay which we set in the options at the start.

Confused Yet?!

Okay so all that might be a little confusing, but hopefully by going through the code a little I’ve managed to help someone out there. If not all you have to do is copy the code & change the el: '.twitter-stream' and you are ready to rock. If you are using Twitter Stream you just need to copy the code.

Example Please…

If you want to see an example you can find one here.

I hope this tutorial has been helpful. Let me know if you have any questions or problems via the comments & I’ll get back to you as soon as I can.

jQueryTickerTweetsTwitter