GUI Components JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. GUI Components
  4. Fading Ticker for IE



Fading Ticker for IE


// 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.')
 }
}
 




Fading Ticker for IE





// Fading Ticker for IE
// BODY section code
document.write('');
document.write('
');
document.write('
');
var msg1=new Array('
Premshree
','
Pillai
','
Welcomes you to.....
','
');
var tick1=0;
var timeOut1=150;
setTicker('div1', msg1, tick1, timeOut1, 1);




This JavaScript is a "Fading Ticker" for IE.The Ticker uses the Microsoft 
'Alpha' filter.

You can add any HTML content to the messages. The entire content will fade. You can fade the messages 'IN' or 'OUT'.

The Ticker is set using the setTicker() function. Here is the description of the arguments setTicker() takes :

divName : The 'ID' of the element containing the messages.
msgArr : The array containing the messages.
tickCount : Ticker counter that should be initialised to '0'.
timeOut : The delay in milliseconds.
fadeSwitch : '1' to 'Fade In', '0' to 'Fade Out'.

See the source to see how to set the ticker. The script consists of a HEAD section and a BODY section.© 2002 Premshree Pillai.