How to Create and Implement News Ticker JavaScript Source Code

How to Create and Implement News Ticker JavaScript Source Code
Page content

Introduction

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.

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.

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.

The HTML Source Code

Subject For The First Item

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.

Another Item with Its Subject
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.
Yet another Subject and 3rd Item
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.

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.

Conclusion

You can view this news ticker JavaScript source in action here and download the news ticker JavaScript source file here.

You can also check out other JavaScript related articles such as creating a drop-down list of 50 states in JavaScript as well this one on JavaScript delay code.