jQuery Plugin For Simple News Feed Ticker - Breaking News

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.