Click here to Skip to main content
11,641,387 members (59,610 online)
Click here to Skip to main content

JavaScript Tickers

, 5 Dec 2002 85.9K 18
Rate this:
Please Sign up or sign in to vote.
Here we shall see some of the popular JavaScript Tickers on the web.
<!-- Add the rest of your HTML here --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <style type="text/css"> .link{font-family:verdana,arial,helvetica; color:#000000; font-size:8pt; border-left:#000000 solid 1px; border-top:#000000 solid 1px; border-right:#000000 solid 2px; border-bottom:#000000 solid 2px; cursor:pointer} .link_over{font-family:verdana,arial,helvetica; color:#000000; font-size:8pt; border-left:#000000 solid 2px; border-top:#000000 solid 2px; border-right:#000000 solid 1px; border-bottom:#000000 solid 1px; cursor:pointer} </style> <!-- (c) Premshree Pillai, http://www.qiksearch.com, qiksearch@rediffmail.com -->

/ JavaScript Tickers /
- / Premshree Pillai /


<!--BEGIN LINK--> <!--END LINK--> <!--BEGIN LINK--> <!--END LINK--> <!--BEGIN LINK--> <!--END LINK--> <!--BEGIN LINK--> <!--END LINK--> <!--BEGIN LINK--> <!--END LINK--> <!--BEGIN LINK--> <!--END LINK-->


Tickers have been used in all forms of media. They are used as "News Tickers", "Stock Tickers" etc in televisions, sign boards etc. The web is no different.

In the web, you will find "Tickers" mostly in the form of Java Applets. There are many Java applets that give you neat effects for the tickers; and they are easy to use as well. Tickers have always interested me. I have written a number of "JavaScript Tickers". Here, I describe to you five JavaScript Tickers of which four I have written. The source code of two popular JavaScript Tickers, "Fading Ticker" and "News Bar" have been provided. The source code is commented and variables are named according to what they are, which makes them self explanatory.

You can find the source code of all the tickers mentioned in this article at the link provided in each of the Ticker's description.


Fading Ticker :

"Fading Ticker" Screenshot

This is a Cross Browser Fading Javascript Ticker that can tick any number of messages. The Ticking message fades in to black while being displayed. The script is extremely customisable.

You can add any number of messages to the ticker. Messages must be added to the array qiksearch_ticker_text.

The Ticker message URLs must be added to the array qiksearch_ticker_URL.

The Ticker message URLs' targets must be added to the array qiksearch_ticker_target. (1 for new window, 0 for same window)

You can also change the delay between different messages. You can also choose whether you want the ticking message to pause on MouseOver. There are many things you can customise like the ticker width, ticker height, border width and border color. One thing you cannot change is the fading color (Maybe in some future version!). The Ticker always fades to Black.

To use the script just copy the <SCRIPT> section and paste it wherever you need it on your web page.

The fading effect in the script could be brought about by using the 'Alpha' filter in MSIE and using the '-moz-opacity' style atribute in Mozilla. But the "Fading Ticker" listed below supports NS4.x also.

Source Code :

<!--BEGIN SOURCE CODE-->
<script language="JavaScript">



// Fading Ticker JavaScript

// © 2002 Premshree Pillai

// http://www.qiksearch.com




// Ticker Messages ( HTML Tags supported)

var qiksearch_ticker_text = new Array ("Qiksearch.com", "FREE JavaScripts by Premshree Pillai",
"Articles by Premshree Pillai", "Intellisearch Bar FREE Download");



// Ticker Message URLs

var qiksearch_ticker_URL = new Array ("http://www.qiksearch.com", 
"http://www.qiksearch.com/javascripts.htm", "http://www.qiksearch.com/articles.htm", 
"http://www.qiksearch.com/intellisearch.htm");




// Ticker Message URLs' Target (1 for NEW WINDOW, 0 for SAME WINDOW)


var qiksearch_ticker_target = new Array ("0", "0", "0", "1");





var qiksearch_ticker_width = 390; // The width of the Ticker

var qiksearch_ticker_height = 25; // The height of the Ticker

var qiksearch_ticker_borderw=1; // Border width

var qiksearch_ticker_borderc="#808080"; // Border Color

var timeOutVal=200; // Delay in milliseconds

var isPause=false; // true if you want pause on mouseover, else false

                   // setting to true is a bit buggy



var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1;

var ns6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1;

var ns4=document.layers;

var qiksearch_tickerObj;

var ticker_left_ns4=(screen.width/2-20)-Math.round(qiksearch_ticker_width/2);



// Setting qiksearch_tickerObj depending on Browser

function setTickerObj()

{

 if(ie4)

 {

  qiksearch_tickerObj=document.all.qiksearch_js_ticker;

 }

 if(ns6)

 {

  qiksearch_tickerObj=document.getElementById("qiksearch_js_ticker");

 }

}



// isPause Content

var isPauseContent;

if(isPause)

{

 isPauseContent=' onMouseOver="delay_timeOutVal();" onMouseOut="resume_timeOutVal();"';

}

else

{

 isPauseContent='';

}



if(ie4||ns6)

{

 document.write('<table' + isPauseContent + '  onMouseUp="goURL();" width="' + 

qiksearch_ticker_width + '" height="' +  qiksearch_ticker_height + '" style="cursor:pointer;

 background:#FFFFFF; border:' + qiksearch_ticker_borderw + 'px solid ' + qiksearch_ticker_borderc 
+ '"><tr><td align="middle">');


 document.write('<div id="qiksearch_js_ticker">');


 document.write('</div>');

 document.write('</td></tr></table>');

}



var def_10='A',def_11='B',def_12='C',def_13='D',def_14='E',def_15='F';

var colorVal=15;

var div_count=0;



// Fading Color code Generating function

function qiksearch_fade_desat(getColorIntVal)

{

 var returnVal;

 if(getColorIntVal>=10)

 {

  for(var i=0; i<=15; i++)

  {

   if((getColorIntVal==i))

   {

    returnVal = eval('def_' + i);

   }

  }

 }

 else

 {

  returnVal=getColorIntVal;

 }

 return(returnVal);

} 



// Main

function writeDiv()

{

 if(ie4||ns6)

 {

 qiksearch_tickerObj.innerHTML= '<font face="verdana,arial,helvetica" size="-1" color="#' 
+  joinColor(qiksearch_fade_desat(colorVal)) + '"><b>' + qiksearch_ticker_text[div_count] +  
'</b></font>' ;


 }

 if(ns4)

 {

 qiksearch_tickerObj=document.qiksearch_ticker_ns4;


 qiksearch_tickerObj.document.write('<table border="1" bordercolor="' + 
qiksearch_ticker_borderc + '"width="100%"><tr><td align="center"><a 
href="javascript:void(0);"' + isPauseContent + '  onMouseUp="javascript:goURL();"><font 
face="verdana,arial,helvetica" size="-1" color="#' +  joinColor(qiksearch_fade_desat(colorVal)) + 
'"><b>' + qiksearch_ticker_text[div_count] +  
'</b></font></a></td></tr></table>');


  qiksearch_tickerObj.document.close();

 }

 if((colorVal>0)  && (colorVal!=0))

 {

 colorVal--;

 } 

 else

 {

  colorVal=15;

  if(div_count<qiksearch_ticker_text.length)

  {

   div_count++;

  }

  if(div_count==qiksearch_ticker_text.length)

 {

  setTimeout("resetAll()",timeOutVal);

  setTimeout("writeDiv()",timeOutVal);

 }

 }



 if(div_count<qiksearch_ticker_text.length)

 {

  setTimeout("writeDiv()",timeOutVal);

 }

}



// Generating Final Hex Color

function joinColor(getColor)

{

 return (getColor + '0' + getColor + '0' + getColor + '0');

}



// Reset

function resetAll()

{

 div_count=0;

 colorVal=15;

}



// URL Navigation function

function goURL()

{

 if(qiksearch_ticker_target[div_count]=="0")

 {

  location.href=qiksearch_ticker_URL[div_count];

 }

 else

 {

  if(qiksearch_ticker_target[div_count]=="1")

  {

   window.open(qiksearch_ticker_URL[div_count]);

  }

 }

}



// Setting Delay on MouseOver and MouseOut

var temp_timeOutVal=timeOutVal;

function delay_timeOutVal()

{

 timeOutVal=100000000000000;

 setTimeout("writeDiv()",timeOutVal);

}



function resume_timeOutVal()

{

 timeOutVal=temp_timeOutVal;

 setTimeout("writeDiv()",timeOutVal);

}



setTickerObj(); 

window.onload=writeDiv;



if(ns4)

{

 document.write('<layer id="qiksearch_ticker_ns4" width="' + qiksearch_ticker_width + '"
 left="' + ticker_left_ns4 + '"></layer>');

}

</script>
<!--END SOURCE CODE-->

Author : Premshree Pillai

Ticker Link : http://www.qiksearch.com/javascripts/fading-ticker.htm

Using the Script :

To use the script, you have to copy the entire <script> section and place it wherever you require it on your web page.

Compatibility : IE 5+, NS 6+, NS 4.7+, Mozilla


News Bar :

"News Bar" Screenshot

The News Bar JavaScript is another good JavaScript Ticker. It is a neat looking JavaScript Ticker with "Back" and "Forward" arrows. The News Bar cycles the various news items. If you want to see the previous 'news item', you must click on the "Back" button and if you want to see the next 'news item', you must click on the "Forward" button. The script is made entirely using form buttons.

This script also is very easy to edit. Messages must be added to the array msgs.

Ticker URLs must be added to the array msg_url.

Message URL targets must be added to the array target_url. ("1" for new window and "0" for same window)

You can also change the delay, ticker width, mouseOver color, mouseOut color.

Source Code :

<!--BEGIN SOURCE CODE-->
<style>

<!--

.scrollerstyle{

font-family:webdings;background:#FFFFFF;border:1px solid #000000;cursor:hand;

}

-->

</style>


<script language="JavaScript">



// News Bar JavaScript

// © 2002 Premshree Pillai

// http://www.qiksearch.com

// Enhancements by DynamicDrive.com





 var msgs = new Array("Welcome to Qiksearch", "FREE Javascripts from Qiksearch",
"Intellisearch Bar 2.0", "DynamicDrive.com" );



 var msg_url = new Array("http://www.qiksearch.com",
"http://www.qiksearch.com/javascripts.htm",
"http://www.qiksearch.com/intellisearch.htm",
"http://www.dynamicdrive.com" );



 // For New Window, "1" 

 var target_url = new Array("0","0","0","1" );



var barwidth=350 //Enter main bar width in px or %

var setdelay=2000 //Enter delay between msgs, in mili-seconds

var mouseover_color='#B5D0FF' //Specify highlight color

var mouseout_color='#FFFFFF' //Specify default color



var count=0;

var ns6=document.getElementById&&!document.all

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1



if (ie4||ns6)

{

 document.write('<form name="news_bar"><input type="button" value="3"
onclick="moveit(0)" class="scrollerstyle" style="width:22; height:22; border-right-width:0px;"
 name="prev" title="Previous News"><input type="button" name="news_bar_but" onclick="goURL();" 
style="color:#000000;background:' + mouseout_color + '; width:'+barwidth+'; height:22;
border-width:1; border-color:#000000; cursor:hand" 
onmouseover="this.style.background=mouseover_color"
 onmouseout="this.style.background=mouseout_color"><input type="button" value="4"
 onclick="moveit(1)" class="scrollerstyle" style="width:22; height:22; border-left-width:0px;"
 name="next" title="Next News"></form>');

}

else

{

 document.write('<form name="news_bar"><input type="button" value="Previous"
 onclick="moveit(0)">')


 if (navigator.userAgent.indexOf("Opera")!=-1)

document.write('<input type="button" name="news_bar_but" onclick="goURL();" 

style="width:'+barwidth+'" border="0">')

else

 document.write('<input type="button" name="news_bar_but" onclick="goURL();" 

width="'+barwidth+'" border="0">')

 document.write('<input type="button" value="Next" onclick="moveit(1)"></form>')

}



function init_news_bar(){

  document.news_bar.news_bar_but.value=msgs[count];

}



//moveit function by Dynamicdrive.com

function moveit(how){

if (how==1){ //cycle foward

if (count<msgs.length-1)

count++

else

count=0

}

else{ //cycle backward

if (count==0)

count=msgs.length-1

else

count--

}

document.news_bar.news_bar_but.value=msgs[count];

}



function tick_bar(){

setInterval("moveit(1)",setdelay)

}



function goURL()

{

 if(target_url[count]=="0")

 {

  location.href=msg_url[count];

 }

 else

 {

  window.open(msg_url[count]);

 }

}



tick_bar(); // delete this line if you don't want messages to tick

init_news_bar();



</script>
<!--END SOURCE CODE-->

Author : Premshree Pillai & DynamicDrive.com

Ticker Link : http://www.dynamicdrive.com/dynamicindex2/newsbar.htm

Using the Script :

To use the script, you have to copy the <style> section and place it in the <head> section of your code and copy the entire <script> section and place it wherever you require it on your web page.

Compatibility : IE 5+, NS 6+, NS 4.7+, Mozilla, Opera


Expandable Ticker :

"Expandable Ticker" Screenshot

Another interesting JavaScript Ticker is the "Expandable Ticker" inspired by my "JavaScript Ticker 1.3" (http://www.qiksearch.com/javascripts/ticker13.htm). Mine had compatibility issues. In the "Expandable Ticker" there is a button "Expand", which when you click will reveal all the News Items that the Ticker is cycling through. This is an advantage if you want to see all the "news items" and then go to the URL of the message of your choice.

Author : DynamicDrive.com

Ticker Link : http://www.dynamicdrive.com/dynamicindex2/expandticker.htm

Compatibility : IE 5+, NS 6+, NS 4.7+, Mozilla, Opera


XML Ticker :

"XML Ticker" Screenshot

If your site is for a local network, then you could also try the "XML Ticker" JavaScript that I have written.This is an XML based JavaScript Ticker that can tick any number of messages. The ticker works with IE only. The ticker reads it's contents, i.e the ticker style, text to be displayed, the link for that particular message from a XML file. The advantage of using this is that you don't have to mess up with the actual code of the script; but you have to just modify the XML file which has the ticker messages, message URLs, ticker style etc.

Author : Premshree Pillai

Ticker Link : http://www.dynamicdrive.com/dynamicindex2/xmlticker.htm

Compatibility : IE 5+


Fading Ticker for IE :

"Fading Ticker for IE" Screenshot

The tickers described above, all support HTML tags which means you can have anything as the ticker content. You can include images etc. In the Fading Ticker, you can have any HTML content as the ticker message; but the problem here is, if you include images in the ticker, they will show up as it is i.e they wont fade. So, I have written another ticker called "Fading Ticker for IE". As the name suggests, the ticker fades any message (including images!) but it works with IE only. The ticker uses the Microsoft Alpha filter.

Author : Premshree Pillai

Ticker Link : http://www.qiksearch.com/javascripts/fading-ticker_ie.htm

Compatibility : IE 5+


Conclusion :

<!--BEGIN TICKER STATS-->
Ticker Name : Compatibility :
IE 5+ NS 6+ NS 4.7+ Mozilla Opera
Fading Ticker
Y Y Y Y -
News Bar
Y Y Y Y Y
Expandable Ticker
Y Y Y Y Y
XML Ticker
Y - - - -
Fading Ticker for IE
Y - - - -
<!--END TICKER STATS-->
5 Ticker Compatibility Chart

All the JavaScript Tickers mentioned in this article are available at
http://www.qiksearch.com/javascripts.htm
OR
http://javascript.qik.cjb.net

Use Them :

These Tickers can be used to tick "News Items" on your site. You can use them as "Dynamic Ad Rotators" so that you can advertise many products/services using a single area. You may use them as a "What's New?" Ticker.

Mail me your comments/suggestions about these "JavaScript Tickers".
© 2002 Premshree Pillai
Web : http://www.qiksearch.com
<!-- (c) Premshree Pillai, http://www.qiksearch.com, qiksearch@rediffmail.com -->

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

premshree
Web Developer
United States United States
The author is an engineering student in Mumbai, India and is a programming enthusiast. You can visit his site at http://www.qiksearch.com

You may also be interested in...

Comments and Discussions

 
QuestionReformat? Pin
Victor Vogelpoel6-Dec-02 9:06
memberVictor Vogelpoel6-Dec-02 9:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150731.1 | Last Updated 6 Dec 2002
Article Copyright 2002 by premshree
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid