jQuery News Ticker

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.

Apologies to anyone using an earlier version, I may update the code be compatible with jQuery 1.3 if there is enough demand. 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.

<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>

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>

$(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
    );
});			
			

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>

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

If you do find any bugs, or any further browser compatibility, head over to GitHub and let me know.

GPL v2 - read more here: http://www.gnu.org/licenses/gpl-2.0.html

Yeah, well the population of news items will be from HTML only for now I'm afraid...

You're in luck! The latest update to jQuery News Ticker introduced support for loading content of an RSS feed via ajax!

The basic code you want for using an RSS feed is something like:

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker({
            htmlFeed: false,
            ajaxFeed: true,
            feedUrl: 'PUT THE URL OF THE RSS FEED HERE - e.g. http://example.com/rss.xml',
            feedType: 'xml'
        });
    });
</script>

What should the XML look like? The standard RSS format found here will work just fine.

It's worth noting at this point that the RSS feed must be on the same domain that the news ticker as jQuery does not allow cross-domain requests.

If you want to use a feed from a different domain you'll need to either implement a server-side solution or use something like a JSON proxy.

Further support for loading new items from different feed sources will be coming in a future release, so stay tuned!

If you are feeling generous donations via PayPal are always welcome!