JavaScript Tickers

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.



Over 2000+ free Javascript
at JavaScriptBank.com Website
Sampled by JavaScriptBank.com

/ JavaScript Tickers /
- / Premshree Pillai /


Qiksearch.com
Fading Ticker
News Bar
Expandable Ticker
XML Ticker
Fading Ticker for IE


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 :

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 :

<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>

Author : Premshree Pillai

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 :

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 :

<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>

Author : Premshree Pillai

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