17/09/2020    By: christoper unum
News tickers can be used on a site to pass on important information to web users. In this tutorial, we will learn how to create a simple news ticker using marquee.
Basic knowledge of HTML, CSS and JavaScript is required to fully understand the concepts in this tutorial.
We begin by adding the HTML code as shown below
<div id="marquee-cont"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="50px" style="background:#1174A8;"><button id="ticker-title">Posts:</button></td><td id="marquee"><marquee onmouseover="this.stop();" onmouseout="this.start();" id='scroll'>temp <img src="https://www.naishare.com/images/favicon.png" width="25px" /></marquee></td></tr></table></div>
Now we add styles
#marquee-cont {background: #f4f4f4;margin-top:10px;}#marquee-cont marquee {margin-top: 5px;}#marquee-news {background: #1174A8;padding: 5px;}#ticker-title{border:none;padding:5px 20px;background:#1174A8;color:white;}#ticker-title:focus{outline:none;}
Using JavaScript, we will render the content stored in the array in the marquee.
//array of newsconst news = ["Lorem Ipsum is simply dummy text of the printing and typesetting industry.","Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.","Contrary to popular belief, Lorem Ipsum is not simply random text.","The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.","All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary."]//logoconst logo = "<img src='https://www.naishare.com/images/favicon.png' width='25px' style='margin:0 8px'/>";let tickerText = "";//looping through the news arrayfor(let i=0; i<news.length; i++){tickerText+=news[i];//adds the logo in between news itemsif(i!=news.length-1){tickerText+=logo;}}document.querySelector("#scroll").innerHTML = tickerText;
![]() |
how to add on scroll animations to your website using animate.css and wow.js By christoper unum |
![]() |
how to create a login form using html, css, javascript, php and ajax By christoper unum |
![]() |
how to create a registration page using ajax and php By christoper unum |
Copyright © 2022 Naishare Technology - All rights reserved