JavaScript News Ticker
by Vincy. Last modified on July 3rd, 2023.
This article provides a lightweight JavaScript plugin to display news tickers on a website. The news ticker shows content in marquee mode, either in horizontal or vertical scroll. It is helpful 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 ticking the content display.
In a way, it is an older thing. A few decades back, we could not see a website without a scrolling ticker. Over time, it’s eradicated as a bad UI/UX practice. But it is still widely used in news websites, particularly in stock price displays. If you use it wisely, it provides good advantages.
The following examples will remind you of the places requiring screen news tickers.
- Online news bytes display headlines in a ticker.
- Stock prices.
- 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.
News ticker features
- Ultra lightweight; Just 2KB.
- Plain JavaScript. Standalone and not dependent on any other libraries like JQuery. Of course, if needed, you can use it along with JQuery.
- Fully Responsive.
Usage
In three simple steps, you can integrate this news ticker into a web page.
- Include the JavaScript library file.
- Ticker content as HTML unordered list in a div with an id.
- Call the startTicker JavaScript function immediately next to the 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">
<ul>
<li>First ticker item.</li>
<li>Second ticker item.</li>
<li>Final ticker item.</li>
</ul>
</div>
STEP 3: Call the startTicker JavaScript function immediately next to the ticker-box div.
This step calls the library function regarding 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 five, and the default interval is 500 milliseconds.
<script>startTicker('ticker-box');</script>
[OR]
<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 lets 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];
obj.style[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 {
clearInterval(t);
trans_width = tickerBox.offsetWidth;
li_index++;
if (li_index == li.length && extendedParam.rotate == true) {
li_index = 0;
iterateTickerElement(trans_width);
} else if (li_index < li.length) {
setTimeout(function() { iterateTickerElement(trans_width); }, extendedParam.delay);
}
}
}, extendedParam.speed);
tickerBox.onmouseover = function() {
clearInterval(t);
}
tickerBox.onmouseout = function() {
iterateTickerElement(parseInt(li[li_index].style.left));
}
}
iterateTickerElement(trans_width);
}
Note:
- Presently the news ticker is available only in a horizontal direction. For the next release, a vertical direction is planned.
- Ticker movement can be paused on mouseover.
- Contact me if you have any feature requests or special customization needs.
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.