How to create a News Ticker in a few lines of jQuery and HTML


Warning: Illegal string offset 'style' in /homepages/43/d417548748/htdocs/blog_i3lance/wp-content/plugins/save-me/saveme.php on line 29

For whatever reason I could not find a quick solution to creating a simple News Ticker that was prettied up with a bit of jQuery. To be honest upon reflection I have no idea why I choose to look for one since they are really easy to create. What I did discover though is it that there are many different types out there but pretty much all of them (or 95%) seem to rely on the use plugins in addition to the jQuery framework. Imagine creating a site that has five subtle but good bits of jQuery visual garnish only to find that your page/site is as slow as the tortoise fleeing a building in a fire evacuation (relatively speaking) because you have half a dozen other JavaScript libraries loaded onto your site. Not very pretty after all. I’m not saying that using plugins are not good, but they do have their uses (great uses) but too many plugins would only end up in overkill in my opinion especially if not required.

Anyway I set about creating this myself. The HTML snippet below can contain an anchor tag if you wanted to, but for the example here we’ll keep it simple. First of all I constructed the HTML;

<ul id="news-ticker">
    <li>News item number 1</li>
    <li>News item number 2</li>
    <li>News item number 3</li>
    <li>News item number 4</li>
    <li>News item number 5</li>
</ul>

If course if you want more than one News Ticker in a page, then you would use a CLASS and not an ID. Either way that makes the CSS was quite simple really. Therefore on the assumption that you wanted only one of these elements on your page and wanted to make your News Ticker display on a single line;

#news-ticker {
	height: 40px;
	overflow: hidden;
}
#news-ticker li {
	height: 40px;
}


Now the jQuery. This is where we use jQuery to creat a bit of tasty visual garnish;

function newsticker(){
	$('#news-ticker li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#news-ticker')).css('opacity', 1); });
}
setInterval(function(){ newsticker () }, 4000)

Then I only went and found something very similar on the lovely ol’ interweb by Ivan Lazarevic. So in a coincidental way the credit goes to him. The lesson of the day? Look harder on the interweb next time. That’s not really the lesson, using your own brain cells is always a better idea as you learn how to code using jQuery, but there is nothing wrong in my personal opinion in looking for inspiration.

For me I knew the best way around this was a “quick win” solution, which may or may not work for you or the web environment you may wish to apply this.

Lastly for anyone who is new to jQuery, don’t forget to reference the jQuery library framework in your page. Feel free to use this yourself or modify. Click the link below to download the example.

Download Example

Demo News Ticker

View Example

Demo News Ticker HTML
Have you ever had to implement something like this before? Did you create a quick win solution or use a plugin? Just leave a comment below.

About Desi Reuben-Sealey


Desi is a UXC currently doing UX/UI Black Ops for applications, mobile and web, is a enthusiastic PADI scuba diver, a retired pro UK basketball player, Neo Soul music lover, an enthusiastic charity worker who likes to give to others is various ways.

Short URL: http://bit.ly/MN7BMw
QR Code:

3 Comments

  1. Your code reviewer

    not very scalable is it?
    What if i wanted two (or more) news tickers on the page how does that work?
    This sort of thing should be in a plugin pattern with the options exposed (or at least a JS pattern)
    there is so much wrong with this JS and it’s only 2 lines long… face-palm.gif

    PLUS
    You’ve set heights in the css – not acceptable for either a code review or the clients i work with.

    just saying man. Don’t try and pass your self off as a guru when you’re struggling with the syntax

Leave a Reply