Post
Ask Question

Create a Simple News Ticker in Javascript

Introduction

 
This article explains and shows how to easily create a News Ticker In JavaScript. 
 
Ticker1.jpg
 
Step 1
 
In this example, I use the <p> tag to show the news like this:
  1. <p id="p1" style="display: none;">  
  2.   
  3.             After Chinese pullout, India to increase troops along LAC</p>  
  4. <p id="p2" style="display: none;">  
  5.   
  6.             Role of railway minister in bribery scandal under CBI scanner</p>  
  7. <p id="p3" style="display: none;">  
  8.   
  9.             KXIP vs RCB: David Miller's 38-ball-ton snatches victory for Kings XI Punjab</p>  
  10. <p id="p4" style="display: none;">  
  11.   
  12.             Ajmer priests not to help Pakistanis in prayers</p>  
  13. <p id="result" onmouseover="this.style.textDecoration='underline';this.style.color='Blue';this.style.cursor='hand'"  
  14.   
  15.             onmouseout="this.style.textDecoration='none';this.style.color='Black'">  
  16.         </p> 
Here we set the display property to none for each of these <p> tags since they are not to be shown initially. We also use a <p> 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:
  1. <script language="javascript">  
  2.     var i = 0;  
  3.   
  4.     function Show() {  
  5.         var a = document.getElementById('p1').innerHTML;  
  6.    
  7.         var len = a.length;  
  8.         var b = a.charAt(i);  
  9.   
  10.         i = i + 1;  
  11.    
  12.         document.getElementById('result').innerHTML += b;  
  13.   
  14.         if (i <= len) {  
  15.             setTimeout("Show()", 100);  
  16.    
  17.             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' };  
  18.   
  19.         }  
  20.         else {  
  21.    
  22.             i = 0;  
  23.             document.getElementById('result').innerHTML = " ";  
  24.   
  25.             setTimeout("Show1()", 100);  
  26.         }  
  27.    
  28.     } 
Now we will look at this code:
  1. i=0;  
  2. var a=document.getElementById('p1').innerHTML;  
  3. var len=a.length;  
  4. var b=a.charAt(i); 
     
Here we will assign the value of the <p> 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 <p> 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 <p> tag (result) so when we click on that, it will redirect us to the following page.
  1. if(i<=len)  
  2. {  
  3. setTimeout("Show()",100);  
  4.   
  5. 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' };  
  6. }  
  7. else  
  8. {  
  9. i=0;  
  10. document.getElementById('result').innerHTML=" ";  
  11. setTimeout("Show1()",100);  
  12. }  
  13. } 
The output will be:
 
Ticker2.jpg
 
Ticker3.jpg
 
Now we will look at the else part, in which first we will set the variabale (i):
  1. else  
  2. {  
  3. i=0;  
  4. document.getElementById('result').innerHTML=" ";  
  5. setTimeout("Show1()",100);  
  6. } 
And then we clear the value of the result <p> tag and then we call the function Show1() after the specified time interval.
 
Now we will write the code for Show1() like this:
  1. function Show1()  
  2. {  
  3. var a=document.getElementById('p2').innerHTML;  
  4. var len=a.length;  
  5. var b=a.charAt(i);  
  6.   
  7. i=i+1;  
  8.   
  9. document.getElementById('result').innerHTML+=b;  
  10. if(i<len)  
  11. {  
  12. setTimeout("Show1()",100);  
  13. 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' };  
  14. }  
  15. else  
  16. {  
  17. i=0;  
  18. document.getElementById('result').innerHTML=" ";  
  19. setTimeout("Show2()",100);  
  20. }  
  21. } 
Here we call another function Show2():
  1. function Show2()  
  2. {  
  3. var a=document.getElementById('p3').innerHTML;  
  4. var len=a.length;  
  5. var b=a.charAt(i);  
  6.   
  7. i=i+1;  
  8.   
  9. document.getElementById('result').innerHTML+=b;  
  10. if(i<len)  
  11. {  
  12. setTimeout("Show2()",100);  
  13. 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' };  
  14. }  
  15. else  
  16. {  
  17. i=0;  
  18. document.getElementById('result').innerHTML=" ";  
  19. setTimeout("Show3()",100);  
  20. }  
  21. }  
  22.   
  23. function Show3()  
  24. {  
  25. var a=document.getElementById('p4').innerHTML;  
  26. var len=a.length;  
  27. var b=a.charAt(i);  
  28.   
  29. i=i+1;  
  30.   
  31. document.getElementById('result').innerHTML+=b;  
  32. if(i<len)  
  33. {  
  34. setTimeout("Show3()",100);  
  35. document.getElementById('result').onclick = function() { location.href='http://timesofindia.indiatimes.com/india/Ajmer-priests-not-to-help-Pakistanis-in-prayers/articleshow/19916902.cms' };  
  36. }  
  37. else  
  38. {  
  39. i=0;  
  40. document.getElementById('result').innerHTML=" ";  
  41. setTimeout("Show()",100);  
  42. }  
  43. } 


Similar Articles