Fading Ticker for IE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Fading Ticker for IE</title>
<!--BEGIN HEAD SECTION CODE-->
<script language="JavaScript">
// Fading Ticker for IE
// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// qiksearch@rediffmail.com
// Function to set the Ticker
function setTicker(divName, msgArr, tickCount, timeOut, fadeSwitch)
{
if(fadeSwitch==1)
{
tickerFadeIn(divName, msgArr, tickCount, timeOut);
}
if(fadeSwitch==0)
{
tickerFadeOut(divName, msgArr, tickCount, timeOut);
}
}
// Fade In
function tickerFadeIn(divName, msgArr, tickCount, timeOut)
{
try
{
msgArr=msg1;
document.getElementById(divName).innerHTML=msgArr[tickCount];
if(document.getElementById(divName).filters("alpha").opacity < 100)
{
document.getElementById(divName).filters("alpha").opacity += 5;
setTimeout("tickerFadeIn('"+divName+"','"+msgArr+"','"+tickCount+"','"+timeOut+"')",timeOut);
}
else
{
if(tickCount==(msgArr.length-1))
{
tickCount=0;
}
else
{
tickCount++;
}
document.getElementById(divName).filters("alpha").opacity = 0;
tickerFadeIn(divName, msgArr, tickCount, timeOut);
}
}
catch(e)
{
alert('This Ticker works with IE 5+ only.')
}
}
// Fade Out
function tickerFadeOut(divName, msgArr, tickCount, timeOut)
{
try
{
msgArr=msg1;
document.getElementById(divName).innerHTML=msgArr[tickCount];
if(document.getElementById(divName).filters("alpha").opacity >0)
{
document.getElementById(divName).filters("alpha").opacity -= 5;
setTimeout("tickerFadeOut('"+divName+"','"+msgArr+"','"+tickCount+"','"+timeOut+"')",timeOut);
}
else
{
if(tickCount==(msgArr.length-1))
{
tickCount=0;
}
else
{
tickCount++;
}
document.getElementById(divName).filters("alpha").opacity = 100;
tickerFadeOut(divName, msgArr, tickCount, timeOut);
}
}
catch(e)
{
alert('This Ticker works with IE 5+ only.')
}
}
</script>
<!--END HEAD SECTION CODE-->
</head>
<body bgcolor="#FFFFFF">
<center>
<font face="verdana,arial,helvetica" size="5" color="#807CC0"><b>Fading Ticker for IE</b></font>
<br><br>
<!--BEGIN BODY SECTION CODE-->
<script language="JavaScript">
// Fading Ticker for IE
// BODY section code
document.write('<div style="width:50%; border:#000000 solid 1px">');
document.write('<div id="div1" style="filter:Alpha(opacity=0); width:100%; display:block; background:#FFFFFF; padding:5px; -moz-opacity:0"></div>');
document.write('</div>');
var msg1=new Array('<center><font color="#000000" face="verdana,arial,helvetica" size="-1"><b>Premshree</b></font></center>','<center><font color="#000000" face="verdana,arial,helvetica" size="-1"><b>Pillai</b></font></center>','<center><font color="#000000" face="verdana,arial,helvetica" size="-1"><b>Welcomes you to.....</b></font><center>','<center><a href="http://www.qiksearch.com/javascripts.htm"><img src="http://www.java2s.com/style/logo.png" border="0" alt="essentialjs from Qiksearch.com"></a></center>');
var tick1=0;
var timeOut1=150;
setTicker('div1', msg1, tick1, timeOut1, 1);
</script>
<!--END BODY SECTION CODE-->
<br>
<table width="390" align="center"><tr><td><font face="verdana,arial,helvetica" size="-1" color="#000000">This JavaScript is a "Fading Ticker" for IE.The Ticker uses the Microsoft
'Alpha' filter.<br><br>You can add any HTML content to the messages. The entire content will fade. You can fade the messages 'IN' or 'OUT'.<br><br>The Ticker is set using the setTicker() function. Here is the description of the arguments setTicker() takes :<br><br><b>divName</b> : The 'ID' of the element containing the messages.<br><b>msgArr</b> : The array containing the messages.<br><b>tickCount</b> : Ticker counter that should be initialised to '0'.<br><b>timeOut</b> : The delay in milliseconds.<br><b>fadeSwitch</b> : '1' to 'Fade In', '0' to 'Fade Out'.<br><br>See the <a href="javascript:void(document.location='view-source:'+document.location)"><font color="#807CC0">source</font></a> to see how to set the ticker. The script consists of a HEAD section and a BODY section.<hr style="color:#000000; height:1px">© 2002 <a href="http://www.qiksearch.com" title="Click here to visit Qiksearch.com"><font color="#807CC0">Premshree Pillai</font></a>.</font></td></tr></table>
</body>
</html>
Related examples in the same category
