JavaScript News Ticker

by Vincy. Last modified on August 28th, 2022.

This article provides a lightweight JavaScript plugin to display news tickers on a website. The news ticker is a way of showing content in marquee mode either in horizontal or vertical scroll. It is useful to display content like the latest updates and upcoming events.

It saves the site space real estate by occupying less portion of the screen. It also reduces the user effort of scrolling to see more content by keeping on ticking the content display.

In a way it is an older thing. Couple of decades back we cannot see a website without a scrolling ticker. Over a period its eradicated as a bad UI/UX practice. But it is still widely used in news websites and in particular in stock price display. If you use it wisely, it provides good advantages.

The following examples will remind you of the places that require news tickers on screen.

  1. Online news bytes display headlines in a ticker.
  2. Stock prices.
  3. Online shops that show ‘what is new’ on a ticker board.

This tutorial shows a simple news ticker on a webpage. On hovering the ticker box, it stops the content marquee and releases on mouse out.

It will look like a carousal effect but applied to an element with text content.

javascript news ticker
View Demo

News ticker features

  1. Ultra lightweight; Just 2KB.
  2. Plain JavaScript. Standalone and not dependent on any other libraries like JQuery. Of course, if needed you can use it along with JQuery.
  3. Fully Responsive.


You can integrate this news ticker in a web page in three simple steps.

  1. Include the JavaScript library file.
  2. Ticker content as HTML unordered list in a div with an id.
  3. Call startTicker JavaScript function immediately next to ticker-box div.

STEP 1: Download and include the JavaScript library file.

<script src="news-ticker.js"></script>

STEP 2: Ticker content as HTML unordered list in a div with an id.

<div id="ticker-box">
		<li>First ticker item.</li>
		<li>Second ticker item.</li>
		<li>Final ticker item.</li>

STEP 3: Call startTicker JavaScript function immediately next to ticker-box div.

This step is to call the library function with reference to the ticker box id attribute.

The startTicker() function has an optional parameter to supply the speed and interval between news contents. The default speed is 5 and the default interval is 500 milliseconds.



<script>startTicker('ticker-box', {speed:7, delay:1000});</script>

News ticker JavaScript library code

This library contains functions to enable a news ticker on a web page. The startTicker() function iterates the ticker <li> elements and let it slides horizontally.

It applies styles to change the position of the ticker element based on the speed. The extend() function changes the default speed and interval with the specified option.

function applyStyles(obj, styles) {
	var property;
	var styleLength = Object.keys(styles).length;
	for (var i = 0; i < styleLength; i++) {
		property = Object.keys(styles)[i];[property] = styles[property];

function extend(object1, object2) {
	for (var attrname in object2) {
		object1[attrname] = object2[attrname];
	return object1;

function startTicker(id, param) {
	var tickerBox = document.getElementById(id);
	var defaultParam = { speed: 5, delay: 500, rotate: true };
	var extendedParam = extend(defaultParam, param);
	applyStyles(tickerBox, { overflow: "hidden", 'min-height': '40px' });
	var ul = tickerBox.getElementsByTagName("ul");
	var li = ul[0].getElementsByTagName("li");
	applyStyles(ul[0], { padding: 0, margin: 0, position: 'relative', 'list-style-type': 'none' });
	for (i = 0; i < li.length; i++) {
		applyStyles(li[i], { position: 'absolute', 'white-space': 'nowrap', display: 'none' });

	var li_index = 0;
	var trans_width = tickerBox.offsetWidth;
	var chunk_width = 1;

	var iterateTickerElement = function(trans_width) {
		li[li_index].style.left = trans_width + "px";
		li[li_index].style.display = '';
		var t = setInterval(function() {
			if (parseInt(li[li_index].style.left) > -li[li_index].offsetWidth) {
				li[li_index].style.left = parseInt(li[li_index].style.left) - chunk_width + "px";
			} else {
				trans_width = tickerBox.offsetWidth;
				if (li_index == li.length && extendedParam.rotate == true) {
					li_index = 0;
				} else if (li_index < li.length) {
					setTimeout(function() { iterateTickerElement(trans_width); }, extendedParam.delay);
		}, extendedParam.speed);
		tickerBox.onmouseover = function() {
		tickerBox.onmouseout = function() {


  1. Presently the news ticker is available only in a horizontal direction. For the next release, a vertical direction is planned.
  2. Ticker movement can be paused on mouseover.
  3. Contact me, if you have any feature requests or for any special customization needs.

View DemoDownload

Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page