Fading Ticker for IE : Ticker « GUI Components « JavaScript DHTML






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">&#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>

           
       








Related examples in the same category

1.XML Ticker (IE)
2.Text Box Ticker
3.JavaScript Ticker using Tabular Data Control
4.JavaScript Ticker 1.3 (IE)
5.Button Ticker
6.News Bar