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