Mega Code Archive

 
Categories / JavaScript DHTML / GUI Components
 

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.rntsoft.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">&#169 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>