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