Submit your widget

Very Useful News Ticker with jQuery

Created 13 years ago   Views 20697   downloads 5630    Author jquerynewsticker
Very Useful News Ticker with jQuery
View DemoDownload
88
Share |

Cool news ticker! Seems familiar...

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?

That's everything to get the news ticker working! If you get stuck have a look at the source of the example on this page to see what's what.

You'll probably want to dive into the CSS to change the visual style to your liking, but you're on your own with that one!

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.