Skip to Menu
jQuery » newsticker

Update 27 April 2007: more examples. Bug fixes (multiple tickers on pages should work fine now) and examples of adding a news ticker dynamically.

A news ticker (not new sticker!) plugin based on snippets from this discussion: News scroller/ticker with jQuery?. Sequentially iterates though items in an unordered list, showing the current one and hiding the previous one. If you the mouse is currently over the ticker, it will not change to the next item in the list.

Use: $("#news").newsticker(); (camelCase - newsTicker also works).

Create a new class with the following CSS (this is an example for use on a dark background). This will be applied to the item that the plugin is used on. Setting a background colour is important, as otherwise Internet Explorer experiences a rendering issue - more details found on the following page: Internet Explorer Opacity Bug.

.newsticker {
	list-style-type: none;
	border: 1px dashed #fff;
	background: #050c44;
	padding: 3px;
	margin: 0;
}

Source code available from GitHub or a Zipped download.

Example

  • Visit BBC News for news from the British radio/TV broadcaster
  • Visit Google News for a variety of news from different sources across the web
  • Visit engadget for the latest in new gadgets
  • Visit the jQuery blog for updates on jQuery

The above should alternate between BBC News, Google News, engadget and the jQuery blog.

You can also add a news ticker to a page through JavaScript.

var newnews = $("<ul>").attr("class", "newsticker");
newnews.append("<li>News Item 1</li>");
newnews.append("<li>News Item 2</li>");
newnews.append("<li>News Item 3</li>");
newnews.append("<li>News Item 4</li>");
newnews.appendTo("#mynews").newsTicker();

Or even Ajax (sample page: ajaxnews.html)

$.get(
	"ajaxnews.html", {}, function(data)
	{
		$("#myajaxnews").append(data).find("ul").newsTicker();
	}
)

Limitations / bugs

  • You may see all of the items in the ticker before the function is applied. You can get around this by adding the CSS above to the ticker container. However, that will result in the items not being readable (due to overlaying each other) when JavaScript is disabled
  • If you hover over a news ticker item while an animation is in progress, it is not paused