Taking inspiration from the BBC News website ticker, jQuery News Ticker brings a lightweight and easy to use news ticker to jQuery.

And what do I do with these files?

If you want the fully styled version (as above) of the news ticker, use the files from the zip and include the following in your HTML:

<link href="css/ticker-style.css" rel="stylesheet" type="text/css" />
<script src="jquery.ticker.js" type="text/javascript"></script>

Unsurprisingly you will need to include jQuery (1.4.2 or above) to make all this work, I recommend using Google's Ajax Libraries API for the very latest version.

A version of jQuery News Ticker that is jQuery 1.3.2 compatible can be downloaded here: jquery.ticker.js. Please note that this version does not have all of the features of jQuery News Ticker and is no longer being actively developed.

Don't I need some HTML to make this news ticker work?

Yes you do, all you need is the following HTML:

<div id="ticker-wrapper" class="no-js">
    <ul id="js-news" class="js-hidden">
        <li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
    </ul>
</div>

jQuery News Ticker will also work fine with an <ol> element to contain the news items.

And how do I make jQuery do its magic on this thing?

To get jQuery News Ticker working, you'll need to also add this code to your page:

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker();
    });
</script>

Ok, what else?

Ok, that's great and everything but I want to fiddle with the settings...

Ok, so here are the settings that can be changed, shown with their default values:

$(function () {
    $('#js-news').ticker(
        speed: 0.10,           // The speed of the reveal
        ajaxFeed: false,       // Populate jQuery News Ticker via a feed
        feedUrl: false,        // The URL of the feed
	                       // MUST BE ON THE SAME DOMAIN AS THE TICKER
        feedType: 'xml',       // Currently only XML
        htmlFeed: true,        // Populate jQuery News Ticker via HTML
        debugMode: true,       // Show some helpful errors in the console or as alerts
  	                       // SHOULD BE SET TO FALSE FOR PRODUCTION SITES!
        controls: true,        // Whether or not to show the jQuery News Ticker controls
        titleText: 'Latest',   // To remove the title set this to an empty String
        displayType: 'reveal', // Animation type - current options are 'reveal' or 'fade'
        direction: 'ltr'       // Ticker direction - current options are 'ltr' or 'rtl'
        pauseOnItems: 2000,    // The pause on a news item before being replaced
        fadeInSpeed: 600,      // Speed of fade in animation
        fadeOutSpeed: 300      // Speed of fade out animation
    );
});			

Woah, that made no sense, how do I use these settings?

Any changes you want to make to the default settings are passed in to the call of the news ticker, like so:

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker({
            speed: 0.10,
            htmlFeed: false,
            fadeInSpeed: 600,
            titleText: 'Latest News'
        });
    });
</script>

Which browsers does this work with?

So far this plugin had been tested as working with: IE6+, FF 3.6+, Chrome, Safari, Safari Mobile and Opera.