+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] JavaScript News Ticker (/thread-99871.html)
[Tut] JavaScript News Ticker - xSicKxBot - 08-29-2022
JavaScript News Ticker
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/08/javascript-news-ticker.jpg" width="550" height="441" title="" alt="" /></div><div><div class="modified-on" readability="7.1111111111111"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on August 28th, 2022.</div>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>The following examples will remind you of the places that require news tickers on screen.</p>
<ol>
<li>Online news bytes display headlines in a ticker.</li>
<li>Stock prices.</li>
<li>Online shops that show ‘what is new’ on a ticker board.</li>
</ol>
<p>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.</p>
<p>It will look like a <a href="https://phppot.com/jquery/jquery-image-carousel/">carousal effect</a> but applied to an element with text content.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-19237" src="https://phppot.com/wp-content/uploads/2022/08/javascript-news-ticker-550x441.jpeg" alt="javascript news ticker" width="550" height="441" srcset="https://phppot.com/wp-content/uploads/2022/08/javascript-news-ticker-550x441.jpeg 550w, https://phppot.com/wp-content/uploads/2022/08/javascript-news-ticker-300x240.jpeg 300w, https://phppot.com/wp-content/uploads/2022/08/javascript-news-ticker-768x615.jpeg 768w, https://phppot.com/wp-content/uploads/2022/08/javascript-news-ticker.jpeg 825w" sizes="(max-width: 550px) 100vw, 550px"><br /><a class="demo" href="https://phppot.com/demo/javascript-news-ticker/">View Demo</a></p>
<h2>News ticker features</h2>
<ol>
<li>Ultra lightweight; Just 2KB.</li>
<li>Plain JavaScript. Standalone and not dependent on any other libraries like JQuery. Of course, if needed you can use it along with JQuery.</li>
<li>Fully Responsive.</li>
</ol>
<h2>Usage</h2>
<p>You can integrate this news ticker in a web page in three simple steps.</p>
<ol>
<li>Include the JavaScript library file.</li>
<li>Ticker content as HTML unordered list in a div with an id.</li>
<li>Call startTicker JavaScript function immediately next to ticker-box div.</li>
</ol>
<h3>STEP 1: Download and include the JavaScript library file.</h3>
<pre class="prettyprint"><code class="language-html"><script src="news-ticker.js"></script>
</code></pre>
<h3>STEP 2: Ticker content as HTML unordered list in a div with an id.</h3>
<pre class="prettyprint"><code class="language-html"><div id="ticker-box"> <ul> <li>First ticker item.</li> <li>Second ticker item.</li> <li>Final ticker item.</li> </ul>
</div>
</code></pre>
<h3>STEP 3: Call startTicker JavaScript function immediately next to ticker-box div.</h3>
<p>This step is to call the library function with reference to the ticker box id attribute.</p>
<p>The <em>startTicker()</em> 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.</p>
<pre class="prettyprint"><code class="language-html"><script>startTicker('ticker-box');</script>
</code></pre>
<p>[OR]</p>
<pre class="prettyprint"><code class="language-html"><script>startTicker('ticker-box', {speed:7, delay:1000});</script>
</code></pre>
<h2>News ticker JavaScript library code</h2>
<p>This library contains functions to enable a news ticker on a web page. The <em>startTicker()</em> function iterates the ticker <li> elements and let it <a href="https://phppot.com/jquery/jquery-sliding-menu/">slides horizontally</a>.</p>
<p>It applies styles to change the position of the ticker element based on the speed. The <em>extend()</em> function changes the default speed and interval with the specified option.</p>
<pre class="prettyprint"><code class="language-javascript">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);
}
</code></pre>
<h2>Note:</h2>
<ol>
<li>Presently the <a href="https://phppot.com/jquery/jquery-news-ticker/">news ticker</a> is available only in a horizontal direction. For the next release, a vertical direction is planned.</li>
<li>Ticker movement can be paused on mouseover.</li>
<li>Contact me, if you have any feature requests or for any special customization needs.</li>
</ol>
<p><a class="demo" href="https://phppot.com/demo/javascript-news-ticker/">View Demo</a><a class="download" href="https://phppot.com/downloads/javascript/javascript-news-ticker.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/javascript-news-ticker/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/08/28/javascript-news-ticker/