Create a Simple News Ticker in Javascript

Mahak Gupta
11y
13.7k
0
0

Article

This article explains and shows how to easily create a News Ticker In JavaScript.

Step 1

In this example, I use the tag to show the news like this:

After Chinese pullout, India to increase troops along LAC

Role of railway minister in bribery scandal under CBI scanner

KXIP vs RCB: David Miller's 38-ball-ton snatches victory for Kings XI Punjab

Ajmer priests not to help Pakistanis in prayers

<p id="result" onmouseover="this.style.textDecoration='underline';this.style.color='Blue';this.style.cursor='hand'"

onmouseout="this.style.textDecoration='none';this.style.color='Black'">

Here we set the display property to none for each of these tags since they are not to be shown initially. We also use a tag (result) to show the output and set its color and other properties on the onmouseover and onmouseout events.

Step 2

Now we will write the JavaScript Function Show(), here we will call this event on the onload method of the <body> tag like this:

<body onload="Show()">

So when the page is loaded the Show() function will be executed. Now we will write the Show() function like this:

var i = 0;

function Show() {

var a = document.getElementById('p1').innerHTML;

var len = a.length;

var b = a.charAt(i);

i = i + 1;

document.getElementById('result').innerHTML += b;

if (i <= len) {

setTimeout("Show()", 100);

document.getElementById('result').onclick = function () { location.href = 'http://timesofindia.indiatimes.com/india/After-Chinese-pullout-India-to-increase-Army-presence-along-LAC/articleshow/19917329.cms' };

}

else {

i = 0;

document.getElementById('result').innerHTML = " ";

setTimeout("Show1()", 100);

}

}

Now we will look at this code:

i=0;
var a=document.getElementById('p1').innerHTML;
var len=a.length;
var b=a.charAt(i);

Here we will assign the value of the tag (p1) in the variable (a), and we will store the length in the variable (len) and the main thing is that we can get the first character of the paragraph using charAt (in this case it will be A). After that we increase the value of the variable (i) to get the next character that will be (f) in my case like this:

i=i+1;

Now we will assign the value of b in the tag (result) like this:

document.getElementById('result').innerHTML+=b;

After that, we will run the same function when it isn't equal to the length of the sentence. Here we call the setTimeout() method, that is used to call the same function, that is mentioned in it, after a specified time interval (100). Here we also call the onclick function of the tag (result) so when we click on that, it will redirect us to the following page.

if(i<=len)
{
setTimeout("Show()",100);

document.getElementById('result').onclick = function() { location.href='http://timesofindia.indiatimes.com/india/After-Chinese-pullout-India-to-increase-Army-presence-along-LAC/articleshow/19917329.cms' };
}
else
{
i=0;
document.getElementById('result').innerHTML=" ";
setTimeout("Show1()",100);
}
}

The output will be:

Now we will look at the else part, in which first we will set the variabale (i):

else
{
i=0;
document.getElementById('result').innerHTML=" ";
setTimeout("Show1()",100);
}

And then we clear the value of the result tag and then we call the function Show1() after the specified time interval.

Now we will write the code for Show1() like this:

function Show1()
{
var a=document.getElementById('p2').innerHTML;
var len=a.length;
var b=a.charAt(i);

i=i+1;

document.getElementById('result').innerHTML+=b;
if(i<len)
{
setTimeout("Show1()",100);
document.getElementById('result').onclick = function() { location.href='http://timesofindia.indiatimes.com/india/Role-of-railway-minister-in-alleged-bribery-scandal-under-CBI-scanner/articleshow/19917891.cms' };
}
else
{
i=0;
document.getElementById('result').innerHTML=" ";
setTimeout("Show2()",100);
}
}

Here we call another function Show2():

function Show2()
{
var a=document.getElementById('p3').innerHTML;
var len=a.length;
var b=a.charAt(i);

i=i+1;

document.getElementById('result').innerHTML+=b;
if(i<len)
{
setTimeout("Show2()",100);
document.getElementById('result').onclick = function() { location.href='http://timesofindia.indiatimes.com/sports/cricket/ipl/news/KXIP-vs-RCB-David-Millers-38-ball-ton-snatches-victory-for-Kings-XI-Punjab/articleshow/19915120.cms' };
}
else
{
i=0;
document.getElementById('result').innerHTML=" ";
setTimeout("Show3()",100);
}
}

function Show3()
{
var a=document.getElementById('p4').innerHTML;
var len=a.length;
var b=a.charAt(i);

i=i+1;

document.getElementById('result').innerHTML+=b;
if(i<len)
{
setTimeout("Show3()",100);
document.getElementById('result').onclick = function() { location.href='http://timesofindia.indiatimes.com/india/Ajmer-priests-not-to-help-Pakistanis-in-prayers/articleshow/19916902.cms' };
}
else
{
i=0;
document.getElementById('result').innerHTML=" ";
setTimeout("Show()",100);
}
}

Up Next

Ebook Download

View all

JavaScript Interview Q & A

Read by 40 people

Download Now!

Learn

View all