jQuery Plugin For Simple News Feed Ticker - Breaking News
File Size: | 7.16 KB |
---|---|
Views Total: | 22811 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Breaking News is a simple jQuery plugin to get feeds from an user provided feed URL and display them sequentially like a news ticker. Powered by Google Feed API, which allows you to get any public Atom, RSS, or Media RSS feed using only JavaScript.
How to use it:
1. Include jQuery library and the jQuery breaking news plugin at the bottom of your web page.
<script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.breakingNews.min.js"></script>
2. Create an Div element that will be served as the news ticker container.
<div class="feed"></div>
3. Call the plugin on the DIV element and setup the plugin as you wish.
$('.feed').breakingNews({ url: 'http://feeds.feedburner.com/jquery-script', feedSize: { height: '20px', width: '920px' }, numberToShow: 5, refresh: 2000, effect: 'tricker', effectDuration: 50, onComplete: function() { $(this).prepend('<div class="feed-title">'); $('.feed-title').html(arguments[0].responseData.feed.title); } });
4. The core CSS to style the news ticker.
.breaking-news { background: #2ecc71; padding: 8px 12px; position: relative; } .feed-entries { display: block; } .breaking-news a { -webkit-transition: color 0.3s ease-in; -moz-transition: color 0.3s ease-in; -o-transition: color 0.3s ease-in; transition: color 0.3s ease-in; } .breaking-news a { color: #fff; text-decoration: none; text-shadow: 1px 1px #333; } .breaking-news a:hover { text-decoration: underline; } .scroll-effect { height: 20px; position: relative; overflow: hidden; } .scroll-effect .feed-entries { overflow: hidden; top: 0; } .scroll-effect .feed-entries a { display: block; } .uscore { color: #f
5. Style the feed title element whatever you like.
.feed-title { background: #27ae60; float: left; margin-top: -8px; margin-left: -12px; padding: 8px; margin-right: 12px; color: #fff; }
This awesome jQuery plugin is developed by m3hrdadfi. For more Advanced Usages, please check the demo page or visit the official website.