Button Ticker



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Button Ticker</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#3366CC; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:20pt; color:#3366CC; font-weight:bold}
</style>
</head>
<body bgcolor="#FFFFFF">

<center>
<span class="header">Button Ticker</span>
<br>
<script language="javascript">
 
//**************************************************
// Button Ticker                                   *
// Date created : 19 Feb, 2002                     *
// (c) 2002 Premshree Pillai. All rights reserved. *
// http://www.qiksearch.com                        *
// premshree@hotmail.com                           *
// Visit http://www.qiksearch.com/javascripts.htm  *
//                               for FREE scripts  *
// Use freely as long as this message is intact    *
//**************************************************
// Location : http://www.qiksearch.com/javascripts/button-ticker.htm

count=0;
var inv_button_flag=0;
if (navigator.appName=="Microsoft Internet Explorer" || (navigator.appName=="Netscape" && navigator.appVersion >= "5"))
{
document.write('<form name="qiksearch_ticker"><input type="button" name="qiksearch_ticker" onclick="goURL();" style="background:#FFFFFF; width:377; height:22; border-width:1; border-color:#000000; cursor:hand" onmouseover="this.style.background=&#39;#BDDCFF&#39;;return true" onmouseout="this.style.background=&#39;#FFFFFF&#39;;return true" onmousedown="this.style.background=&#39;#FFD543&#39;;return true"><input type="button" value="5" onclick="javascript:inv_button();inv_msg();inv_URL();" style="width:22; height:22; font-family:webdings; background:#FFFFFF; border-left-width:0; border-right-width:1px; border-top-width:1px; border-bottom-width:1px; border-color:#000000; cursor:hand" name="inv_but" title="Tick Up Direction"></form>');
}
else
{
document.write('<form name="qiksearch_ticker"><input type="button" name="qiksearch_ticker" onclick="goURL();" width="349" border="0"><input type="button" width="50" value="up" onclick="javascript:inv_button();inv_msg();inv_URL();" name="inv_but"></form>');
}

var ticker_speed=1;
 
 // Ticker messages
 var ticker_msg = new Array(
     "Welcome to Qiksearch",
     "FREE Javascripts",
     "Intellisearch Bar NOW!",
     "www.qiksearch.com",
     "FREE Articles" ); // No comma after last ticker msg

 // Ticker URLs
 var ticker_url = new Array(
     "http://www.qiksearch.com",
     "http://www.qiksearch.com/javascripts.htm",
     "http://intellisearch.cjb.net",
     "http://www.qiksearch.com",
     "http://www.qiksearch.com/articles.htm" ); // No comma after last ticker url

function tick()
{
 if(count<ticker_msg.length)
 {  
  this.document.qiksearch_ticker.qiksearch_ticker.value=ticker_msg[count];
  count++;
  if(count==ticker_msg.length)
  {
   count=0;
  }
  setTimeout("tick();",ticker_speed*1000);
 }
}

function goURL()
{
 if(this.document.qiksearch_ticker.qiksearch_ticker.value==ticker_msg[ticker_msg.length-1])
 {
  location.href=ticker_url[ticker_msg.length-1];
 }
 else
 {
  location.href=ticker_url[count-1];
 }
}

function inv_button()
{
 if (navigator.appName=="Microsoft Internet Explorer" || (navigator.appName=="Netscape" && navigator.appVersion >= "5"))
 {
  if (inv_button_flag==0)
  {
   this.document.qiksearch_ticker.inv_but.value="6";
   this.document.qiksearch_ticker.inv_but.title="Tick Down Direction";
   inv_button_flag=1;
  }
  else
  {
   this.document.qiksearch_ticker.inv_but.value="5";
   this.document.qiksearch_ticker.inv_but.title="Tick Up Direction";
   inv_button_flag=0;
  }
 }
 else
 {
  if (inv_button_flag==0)
  {
   this.document.qiksearch_ticker.inv_but.value="Down";
   inv_button_flag=1;
  }
  else
  {
   this.document.qiksearch_ticker.inv_but.value="Up";
   inv_button_flag=0;
  }
 }
}

function inv_msg()
{
 for(var i=0;i<Math.floor(ticker_msg.length/2);i++)
 {
  var temp=ticker_msg[i];
  ticker_msg[i]=ticker_msg[ticker_msg.length-1-i];
  ticker_msg[ticker_msg.length-1-i]=temp;
 }
}

function inv_URL()
{
 for(var i=0;i<Math.floor(ticker_msg.length/2);i++)
 {
  var temp=ticker_url[i];
  ticker_url[i]=ticker_url[ticker_msg.length-1-i];
  ticker_url[ticker_msg.length-1-i]=temp;
 }
}

tick();

</script>

<table width="400" align="center" cellspacing="0" cellpadding="0"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This is a Cross Browser Javascript Button Ticker that ticks a number of messages on a button.You can change the direction in which the message ticks. (i.e the order in which the message ticks).
<br><br>This ticker is very easy to customise. You can add any number of messages and their corresponding URLs. Messages must be added to the array <font face="courier">ticker_msg</font> and the URLs must
be added to the array <font face="courier">ticker_url</font>.
<br><br>This ticker ticks the messages on a button. You can change the style of the button easily.
<br><br>The ticker speed can be changed easily by changing the value of the variable <font face="courier">ticker_speed</font>. (Here it is 1, which means that the message would change every 1 second.)
<br><br>To use this script, you just have to copy the &lt;script&gt; section of the source and paste it wherever you require on your web page.

<br><br><hr style="width:100%; height:1; color:#000000">
<a href="mailto:premshree@hotmail.com?Subject=Javascripts" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a>
</font>
</td></tr></table>

</center>
</body>
</html>
Button Ticker : Ticker : GUI Components JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » GUI Components » Ticker »

Leave a Comment / Note

JAVASCRIPT DHTML TUTORIALS
