JavaScript Ticker 1.3 (IE) : Ticker « GUI Components « JavaScript DHTML






JavaScript Ticker 1.3 (IE)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript Ticker 1.3</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal}
.tick{font-family:verdana,arial,helvetica; font-size:10pt; color:#003399; font-weight:bold}
.tick:hover{font-family:verdana,arial,helvetica; font-size:10pt; color:#0099FF; font-weight:bold}
.tick_news_all{font-family:verdana,arial,helvetica; font-size:8pt; color:#808080; font-weight:normal}
.tick_news_all:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:#DEAC00; font-weight:bold}
.tickerFX1{font-family:arial,verdana,helvetica; font-size:7pt; background:#EFEFEF; width:50; cursor:hand; border:1px solid #808080}
.tickerFX2{font-family:arial,verdana,helvetica; font-size:7pt; background:#EFEFEF; width:50; cursor:hand; border:1px solid #808080}
.speed{font-family:verdana,arial,helvetica; font-size:10pt; color:#FF0000; font-weight:bold}
.speed:hover{font-family:verdana,arial,helvetica; font-size:10pt; color:#FA5D00; font-weight:bold}
</style>
<script language="javascript">
// Location of this script:
// http://www.qiksearch.com/javascripts/ticker13.htm
//*********************************************
//* JavaScript Ticker 1.3                     *
//* Ticks a number of messages                *
//* (c) Premshree Pillai,                     *
//* http://www.qiksearch.com                  *
//* E-mail : premshree@hotmail.com            *
//* Created on 02/26/02                       *
//* Use the script freely as long as this     *
//* message is intact                         *
//* Visit www.qiksearch.com/javascripts.htm   *
//*                    for more FREE scripts  *
//*********************************************

window.onerror = null;
 var bName = navigator.appName;
 var bVer = parseInt(navigator.appVersion);
 var NS4 = (bName == "Netscape" && bVer >= 4);
 var IE4 = (bName == "Microsoft Internet Explorer" 
 && bVer >= 4);
 var NS3 = (bName == "Netscape" && bVer < 4);
 var IE3 = (bName == "Microsoft Internet Explorer" 
 && bVer < 4);
 var i=0;
 var top_pos = 60;
 var left_pos = 190;
 var time_length = 1000;
 var div_name = "qiksearch";
 var ticker_msg = new Array(
     "Welcome to Qiksearch",
     "Intellisearch Bar NOW!",
     "Premshree Pillai",
     "Meta Tag Generator Online",
     "Free JavaScripts" );

 var ticker_url = new Array(
     "http://www.qiksearch.com",
     "http://intellisearch.cjb.net",
     "http://premshree.qik.cjb.net",
     "http://metataggen.qik.cjb.net",
     "http://www.qiksearch.com/javascripts.htm" );

var ticker_len = ticker_msg.length;

for(var l=0; l<ticker_len; l++)
{
document.write('<div id="' + div_name + l + '" style="position:absolute; visibility:hidden; top:' + top_pos + '; left:' + left_pos + '">' + '<table bgcolor="#000000" cellspacing="0" cellpadding="1" width="400"><tr><td><table width="100%" id="ticker_container" style="background:#EFEFFF"><tr><td width="100%"><center><a href="' + ticker_url[l] + '" class="tick">' + ticker_msg[l] + '</center></a></td>');
document.write('<td align="right"><table class="tickerFX1" cellspacing="0" cellpadding="0" onclick="tickerFX_listAll(&#39;all_news_div&#39;); hideLayer(&#39;change_speed_div&#39;)" title="List All News"><tr><td align="middle">LIST ALL</td></tr></table></td>');
document.write('<td align="right"><table class="tickerFX2" cellspacing="0" cellpadding="0" onclick="tickerFX_changeSpeed(&#39;change_speed_div&#39;); hideLayer(&#39;all_news_div&#39;)" title="Change Ticker Speed"><tr><td align="middle">SPEED</td></tr></table></td>');
document.write('</tr></table></td></tr></table>' + '</div>');
}

 document.write('<div id="all_news_div" style="position:absolute; top:' + (top_pos+21) + '; left:' + left_pos + '; visibility:hidden">');
 document.write('<table width="400" align="center" style="background:#EFEFFF; border:1px solid #000000; border-top-width:0"><tr><td>');
 for(var l=0; l<ticker_len; l++)
 {
  document.write('<b><font face="verdana,arial,helvetica">&raquo;</font></b> <a href="' + ticker_url[l] + '" class="tick_news_all">' + ticker_msg[l] + '</a><br>'); 
 }
 document.write('</td></tr></table>');
 document.write('</div>');

 document.write('<div id="change_speed_div" style="position:absolute; top:' + (top_pos+21) + '; left:' + left_pos + '; visibility:hidden">');
 document.write('<table width="400" align="center" style="background:#EFEFFF; border:1px solid #000000; border-top-width:0"><tr><td>');
 document.write('<font face="verdana,arial,helvetica" color="#000000"><b><a href="javascript:changeSpeed(5);" class="speed">5</a> | <a href="javascript:changeSpeed(4);" class="speed">4</a> | <a href="javascript:changeSpeed(3);" class="speed">3</a> | <a href="javascript:changeSpeed(2);" class="speed">2</a> | <a href="javascript:changeSpeed(1);" class="speed">1</a>');
 document.write('</td></tr></table>');
 document.write('</div>');

if (NS4 || IE4) {
 if (navigator.appName == "Netscape") {
 layerStyleRef="layer.";
 layerRef="document.layers";
 styleSwitch="";
 }else{
 layerStyleRef="layer.style.";
 layerRef="document.all";
 styleSwitch=".style";
 }
}

//SCROLL
function tick(){
if (NS4 || IE4) {
 if(i<ticker_len)
 {
  if(i==0)
  { 
   eval(layerRef+'["'+div_name+(ticker_len-1)+'"]'+
   styleSwitch+'.visibility="hidden"');
  }
  if(i>0)
  { 
   eval(layerRef+'["'+div_name+(i-1)+'"]'+
   styleSwitch+'.visibility="hidden"');
  }
 eval(layerRef+'["'+div_name+i+'"]'+
 styleSwitch+'.visibility="visible"');
 }
 if(i<ticker_len-1)
 {
  i++;
 }
 else
 {
  i=0;
 }
 setTimeout("tick()",time_length);
 }
}

var list_news_flag=0;
var change_speed_flag=0;

function tickerFX_listAll(layerName)
{
 if(list_news_flag==0)
 {
  list_news_flag=1;
  if(NS4 || IE4)
  {
   eval(layerRef+'["'+layerName+'"]'+
   styleSwitch+'.visibility="visible"');
  }
 }
 else
 {
  list_news_flag=0;
  if(NS4 || IE4)
  {
   eval(layerRef+'["'+layerName+'"]'+
   styleSwitch+'.visibility="hidden"');
  }
 }
}

function tickerFX_changeSpeed(layerName)
{
 if(change_speed_flag==0)
 {
  change_speed_flag=1;
  if(NS4 || IE4)
  {
   eval(layerRef+'["'+layerName+'"]'+
   styleSwitch+'.visibility="visible"');
  }
 }
 else
 {
  change_speed_flag=0;
  if(NS4 || IE4)
  {
   eval(layerRef+'["'+layerName+'"]'+
   styleSwitch+'.visibility="hidden"');
  }
 }
}

function hideLayer(layerName)
{
 if(NS4 || IE4)
 {
  eval(layerRef+'["'+layerName+'"]'+
  styleSwitch+'.visibility="hidden"');
 }
}

function changeSpeed(n)
{
 time_length=n*1000;
}

tick();

</script>

</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">JavaScript Ticker 1.3</span>
</center>
<br><br><br>

<table align="center" width="400" cellspacing="0" cellpadding="0"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This is a JavaScript Ticker which ticks a number of messages like the one shown above.
You can add more messages in the array <font face="courier">ticker_msg</font>. The URL for that
message should be added to the array <font face="courier">ticker_url</font>.
<br><br>Change the position of the ticker by changing the variables <font face="courier">top_pos</font> and <font face="courier">left_pos</font>. You can change the ticker speed by changing the value of the variable <font face="courier">time_length</font>. (Here it is 1000, which means that the ticker message will change every 1000 milliseconds, i.e every 1 second).
<br><br><b>New in Version 1.3</b> : In this version the new additions are the "List All" and "Speed" buttons.

<br>The "List All" button will list all the news items that appear in the ticker, together.
<br>Using the "Speed" button you can change the speed of ticking. When you click on the "Speed" button 5 options will appear. When you click on any one of these, the ticker speed will change to that value.
</font>
</td></tr></table>
<br>
<hr style="width:400; height:1; color:#9E9EFF">
<table align="center" width="400"><tr><td><font face="verdana,arial,helvetica" size="-2" color="#000000"><a href="mailto:premshree@hotmail.com" class="link">&#169 2002 Premshree Pillai</a>, <a href="http://www.qiksearch.com" class="link">Qiksearch.com</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.Fading Ticker for IE
5.Button Ticker
6.News Bar