How to Create a Javascript Ticker

Written by allen bethea Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create a Javascript Ticker
Use JavaScript tickers to display urgent messages (Jupiterimages/ Images)

Web site designers often use tickers when they need to provide a lot of information, but are limited in space. Tickers emulate the way television displays stock prices, sports scores or late-breaking news across the bottom of the screen. JavaScript can create ticker displays that will run on most modern web browsers. By adjusting the timing and the size of the text position changes, the information can move smoothly and evenly across the screen.

Skill level:

Other People Are Reading

Things you need

  • Plain-text editor

Show MoreHide


  1. 1

    Launch the standard, plain-text editor application that is available on your computer.

  2. 2

    Enter the following code into the text editor. This is CSS styling that places the <div> containing the ticker text -- id="inner" -- within a container <div>. The overflow text within the inner <div> is hidden and is visible only as the text scrolls to the left.



    <!-- Styling info sets one div withing a container div. -->

    <style type="text/css"><!--

    inner {















    <div id="outer">

    <div id="inner"></div>


  3. 3

    Enter the following code into the text editor below final </div> tag. If you increase the size of the variable "timeinterval," you will slow the ticker down. If you decrease the variable "step," the ticker will move slower but smoother. Increasing "step" makes the ticker jerk as it moves left in larger steps.

    <script type="text/javascript">

    // you can change this message to whatever you like

    message="The licenses for most software and other practical works are designed to take away your freedom to share and change the works.";


    // this changes the text displayed within the inner <div>


    // this sets the width of the inner <div> to roughly 1/2 the size of the message


    var count=1;

    var offset =1;

    var timeinterval=50;

    var step=0.1;

    // set Interval() calls the function scroll() in the time set by timeinterval

    set Interval("scroll()",timeinterval);

    function scroll()



    // keeps the text within the outer <div>


    // moves the text to the left by changing the CSS position property, "left"


    // this is the size of the text move.


    // This statement starts the scrolling over from the beginning

    if (count>messagelength)







  4. 4

    Click the File menu. Select the "Save" option. Save under the file name "test.html."

  5. 5

    Launch the web browser that is available on your computer. Click on the "File" menu item and select "Open File."

  6. 6

    Locate the file "test.html" just created, select it with the mouse then click on "Open."

  7. 7

    Add the code to your web page by inserting the CSS styles between the <head></head> tags of the demo into the <head> section of your web page. Remove the demo code between the <body></body> tags and place them into the section of your web page you want the ticker to reside. Adjust the width of the inner and outer ticker <div>'s to match the amount of space you have for the ticker.

  8. 8

    Save your web page and test it. Fine-tune the size of the ticker by adjusting the <div> widths and heights. Adjust the scroll speed by changing the variables "step" and "timeinterval."

Tips and warnings

  • There are several websites that feature free or commercial JavaScript ticker generator utilities. Some sites allow you create custom tickers online. After you enter your text message, width of the ticker, speed and other formatting information, the web utility will automatically generate the custom JavaScript and HTML code you need to insert into your web page. Some of these sites create code that must access online Java or JavaScript libraries to function. Others may incorporate links that direct your visitors to another website. Examine all code you acquire on line for potential security risks.
  • The major web browsers all display valid JavaScript code differently. Some even contain proprietary HTML tags such as such as -- a tag that has built-in ticker functionality. Proprietary tags may not be supported by all browsers. Always test your code on different browsers and older versions of the same browser in order to ensure your code works as you intended.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.