/ JavaScript Tickers /
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 :
<script language="JavaScript"><br>
<br>
<br>
var qiksearch_ticker_text = new Array ("Qiksearch.com", "FREE JavaScripts by Premshree Pillai",
"Articles by Premshree Pillai", "Intellisearch Bar FREE Download");<br>
<br>
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");<br>
<br>
var qiksearch_ticker_target = new Array ("0", "0", "0", "1");<br>
<br>
var qiksearch_ticker_width = 390;
var qiksearch_ticker_height = 25;
var qiksearch_ticker_borderw=1;
var qiksearch_ticker_borderc="#808080";
var timeOutVal=200;
var isPause=false;
<br>
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1;<br>
var ns6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1;<br>
var ns4=document.layers;<br>
var qiksearch_tickerObj;<br>
var ticker_left_ns4=(screen.width/2-20)-Math.round(qiksearch_ticker_width/2);<br>
<br>
function setTickerObj()<br>
{<br>
if(ie4)<br>
{<br>
qiksearch_tickerObj=document.all.qiksearch_js_ticker;<br>
}<br>
if(ns6)<br>
{<br>
qiksearch_tickerObj=document.getElementById("qiksearch_js_ticker");<br>
}<br>
}<br>
<br>
var isPauseContent;<br>
if(isPause)<br>
{<br>
isPauseContent=' onMouseOver="delay_timeOutVal();" onMouseOut="resume_timeOutVal();"';<br>
}<br>
else<br>
{<br>
isPauseContent='';<br>
}<br>
<br>
if(ie4||ns6)<br>
{<br>
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">');<br>
document.write('<div id="qiksearch_js_ticker">');<br>
document.write('</div>');<br>
document.write('</td></tr></table>');<br>
}<br>
<br>
var def_10='A',def_11='B',def_12='C',def_13='D',def_14='E',def_15='F';<br>
var colorVal=15;<br>
var div_count=0;<br>
<br>
function qiksearch_fade_desat(getColorIntVal)<br>
{<br>
var returnVal;<br>
if(getColorIntVal>=10)<br>
{<br>
for(var i=0; i<=15; i++)<br>
{<br>
if((getColorIntVal==i))<br>
{<br>
returnVal = eval('def_' + i);<br>
}<br>
}<br>
}<br>
else<br>
{<br>
returnVal=getColorIntVal;<br>
}<br>
return(returnVal);<br>
} <br>
<br>
function writeDiv()<br>
{<br>
if(ie4||ns6)<br>
{<br>
qiksearch_tickerObj.innerHTML= '<font face="verdana,arial,helvetica" size="-1" color="#'
+ joinColor(qiksearch_fade_desat(colorVal)) + '"><b>' + qiksearch_ticker_text[div_count] +
'</b></font>' ;<br>
}<br>
if(ns4)<br>
{<br>
qiksearch_tickerObj=document.qiksearch_ticker_ns4;<br>
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>');<br>
qiksearch_tickerObj.document.close();<br>
}<br>
if((colorVal>0) && (colorVal!=0))<br>
{<br>
colorVal--;<br>
} <br>
else<br>
{<br>
colorVal=15;<br>
if(div_count<qiksearch_ticker_text.length)<br>
{<br>
div_count++;<br>
}<br>
if(div_count==qiksearch_ticker_text.length)<br>
{<br>
setTimeout("resetAll()",timeOutVal);<br>
setTimeout("writeDiv()",timeOutVal);<br>
}<br>
}<br>
<br>
if(div_count<qiksearch_ticker_text.length)<br>
{<br>
setTimeout("writeDiv()",timeOutVal);<br>
}<br>
}<br>
<br>
function joinColor(getColor)<br>
{<br>
return (getColor + '0' + getColor + '0' + getColor + '0');<br>
}<br>
<br>
function resetAll()<br>
{<br>
div_count=0;<br>
colorVal=15;<br>
}<br>
<br>
function goURL()<br>
{<br>
if(qiksearch_ticker_target[div_count]=="0")<br>
{<br>
location.href=qiksearch_ticker_URL[div_count];<br>
}<br>
else<br>
{<br>
if(qiksearch_ticker_target[div_count]=="1")<br>
{<br>
window.open(qiksearch_ticker_URL[div_count]);<br>
}<br>
}<br>
}<br>
<br>
var temp_timeOutVal=timeOutVal;<br>
function delay_timeOutVal()<br>
{<br>
timeOutVal=100000000000000;<br>
setTimeout("writeDiv()",timeOutVal);<br>
}<br>
<br>
function resume_timeOutVal()<br>
{<br>
timeOutVal=temp_timeOutVal;<br>
setTimeout("writeDiv()",timeOutVal);<br>
}<br>
<br>
setTickerObj(); <br>
window.onload=writeDiv;<br>
<br>
if(ns4)<br>
{<br>
document.write('<layer id="qiksearch_ticker_ns4" width="' + qiksearch_ticker_width + '"
left="' + ticker_left_ns4 + '"></layer>');<br>
}<br>
</script>
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 :
<style><br>
<!--<br>
.scrollerstyle{<br>
font-family:webdings;background:#FFFFFF;border:1px solid #000000;cursor:hand;<br>
}<br>
--><br>
</style><br><br>
<script language="JavaScript"><br>
<br>
<br>
<br>
var msgs = new Array("Welcome to Qiksearch", "FREE Javascripts from Qiksearch",
"Intellisearch Bar 2.0", "DynamicDrive.com" );<br>
<br>
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" );<br>
<br>
var target_url = new Array("0","0","0","1" );<br>
<br>
var barwidth=350
var setdelay=2000
var mouseover_color='#B5D0FF'
var mouseout_color='#FFFFFF'
<br>
var count=0;<br>
var ns6=document.getElementById&&!document.all<br>
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1<br>
<br>
if (ie4||ns6)<br>
{<br>
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>');<br>
}<br>
else<br>
{<br>
document.write('<form name="news_bar"><input type="button" value="Previous"
onclick="moveit(0)">')<br>
if (navigator.userAgent.indexOf("Opera")!=-1)<br>
document.write('<input type="button" name="news_bar_but" onclick="goURL();"
style="width:'+barwidth+'" border="0">')<br>
else<br>
document.write('<input type="button" name="news_bar_but" onclick="goURL();"
width="'+barwidth+'" border="0">')<br>
document.write('<input type="button" value="Next" onclick="moveit(1)"></form>')<br>
}<br>
<br>
function init_news_bar(){<br>
document.news_bar.news_bar_but.value=msgs[count];<br>
}<br>
<br>
function moveit(how){<br>
if (how==1){
if (count<msgs.length-1)<br>
count++<br>
else<br>
count=0<br>
}<br>
else{
if (count==0)<br>
count=msgs.length-1<br>
else<br>
count--<br>
}<br>
document.news_bar.news_bar_but.value=msgs[count];<br>
}<br>
<br>
function tick_bar(){<br>
setInterval("moveit(1)",setdelay)<br>
}<br>
<br>
function goURL()<br>
{<br>
if(target_url[count]=="0")<br>
{<br>
location.href=msg_url[count];<br>
}<br>
else<br>
{<br>
window.open(msg_url[count]);<br>
}<br>
}<br>
<br>
tick_bar();
init_news_bar();<br>
<br>
</script>
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 :
| <nobr>Ticker Name
: | Compatibility :
| IE 5+ | NS 6+ | NS 4.7+ | Mozilla | Opera |
| | <nobr>Fading
Ticker |
| | <nobr>News Bar |
| | Expandable Ticker |
| | <nobr>XML Ticker |
| | <nobr>Fading Ticker for
IE |
|
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".
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
