Pin Me

Creating a JavaScript News Ticker

written by: S. R. Obbayi•edited by: Michele McDonough•updated: 11/23/2010

If you want to present news and information on a website in a catchy way then creating a news ticker with JavaScript may just be the right option for you. If you do not know how to make a JavaScript news ticker, this tutorial will guide you through the process.

  • slide 1 of 4


    javascript news ticker News tickers done in JavaScript are handy widgets that allow the web developer to place scrolling text on a web page. These can contain all sorts of messages that the web developer would like to display. The JavaScript news tickers can be really catchy as they usually have some sort of subtle or bold transition effect.

    In this tutorial we are going to look at a simple news ticker using JavaScript and HTML.

  • slide 2 of 4

    The JavaScript Source Code

    First off, here is the source code for a news ticker in JavaScript. This portion should be placed in the head section of you HTML page.

    <style type="text/css">


    font-weight: bold;



    padding: 4px;

    width: 375px;

    height: 120px;

    border: 1px solid #cccccc;

    background-color: #efefef;







    <script type="text/javascript">


    var speed = 4000

    var activeDiv=0

    var divCount=0

    function hideAllDivs(){

    var x=0

    while (document.getElementById("news"+x)){





    function showDiv(){

    var selectedDivObj = document.getElementById("news" + activeDiv)

    hideAllDivs() = "block"

    activeDiv =(activeDiv < divCount - 1 )? activeDiv + 1 : 0

    setTimeout("showDiv()", speed)


    function beginTicking(){

    while (document.getElementById("news" + divCount)!=null)




    if (window.addEventListener)

    window.addEventListener("load", beginTicking, false)

    else if (window.attachEvent)

    window.attachEvent("onload", beginTicking)



    There is a simple style sheet that you can use to style the three main elements of the news ticker.

    The script that follows can comfortably be used as it is. The speed can be configured to your suiting. In this example the speed is set to 4 secs (4000 milliseconds).

    The news ticker javascript source code has three main functions. hideAllDivs() iterates through all the DIVS and makes sure they are hidden. The idea of a news ticker is to show them off one by one.

    The beginTicking() function sets up the next active DIV by incrementing the divCount variable which starts at zero. It then calls the third and final function showDiv().

    showDiv() is the function ensures all DIVs are hidden then it takes the current DIV based on the divCount() and displays it for the duration configured using the variable speed above.

    That is basically all it takes as far as getting a simple new ticker using JavaScript.

  • slide 3 of 4

    The HTML Source Code

    <div id="news0">

    <div>Subject For The First Item</div>


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dolor lacus, accumsan eu pulvinar eget, placerat non arcu. Integer in dui nec enim bibendum egestas.</div>


    <div id="news1">

    <div>Another Item with Its Subject</div>

    <div>In hac habitasse platea dictumst. Cras luctus nisi sed nulla iaculis ut faucibus est mollis. Sed fringilla hendrerit nisi. Donec sem diam, lobortis vestibulum sagittis nec, vehicula nec erat. Duis eros elit, auctor varius faucibus a, sagittis ac odio.</div>


    <div id="news2">

    <div>Yet another Subject and 3rd Item</div>

    <div>Pellentesque at massa id quam facilisis eleifend eu id arcu. Sed in lorem dui. Morbi sit amet lorem vitae nulla vehicula molestie. Vivamus pharetra nunc id nunc convallis pulvinar. Integer vel metus ipsum. Praesent vel nulla turpis, et porttitor leo.</div>


    This section of the news ticker goes in the body section of the HTML document in the place where you would like the ticker to show. All the content you will need for your JavaScript news ticker is wrapped in DIVs. Each content item must be wrapped in a DIV with the id attribute newsX. Therefore being news0, news1, news3 respectively. They all share a class called content. This is for the styling. Everything inside this DIV is optional and is really up to you, the developer to decided what information you want inside this news ticker.

  • slide 4 of 4