jQuery News Ticker

  • jQuery News Ticker now has support for multiple tickers per page!
  • jQuery News Ticker now has support for right-to-left languages!
  • jQuery News Ticker now has support for loading content via an RSS feed!
  • jQuery News Ticker now has an optional fade effect between items!
  • New updates have been made to jQuery News Ticker! Check below for more details!
  • jQuery News Ticker is now compatible with jQuery 1.3.2! See below for further details and for latest download.
  • Further updates to jQuery News Ticker are coming soon!
Yes you do, all you need is the following HTML:
<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>
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>

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