JavaScript DHTML/GUI Components/Ticker

Материал из Web эксперт
Перейти к: навигация, поиск

Button Ticker

   <source lang="html4strict">

<!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">

Button Ticker
<script language="javascript">

//************************************************** // Button Ticker * // Date created : 19 Feb, 2002 * // (c) 2002 Premshree Pillai. All rights reserved. * // http://www.qiksearch.ru * // premshree@hotmail.ru * // Visit http://www.qiksearch.ru/javascripts.htm * // for FREE scripts * // Use freely as long as this message is intact * //************************************************** // Location : http://www.qiksearch.ru/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='#BDDCFF';return true" onmouseout="this.style.background='#FFFFFF';return true" onmousedown="this.style.background='#FFD543';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.ru",
    "FREE Articles" ); // No comma after last ticker msg
// Ticker URLs
var ticker_url = new Array(
    "http://www.qiksearch.ru",
    "http://www.qiksearch.ru/javascripts.htm",
    "http://intellisearch.cjb.net",
    "http://www.qiksearch.ru",
    "http://www.qiksearch.ru/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>

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).

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 ticker_msg and the URLs must be added to the array ticker_url.

This ticker ticks the messages on a button. You can change the style of the button easily.

The ticker speed can be changed easily by changing the value of the variable ticker_speed. (Here it is 1, which means that the message would change every 1 second.)

To use this script, you just have to copy the <script> section of the source and paste it wherever you require on your web page.




<a href="mailto:premshree@hotmail.ru?Subject=Javascripts" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a>

</body> </html>

      </source>
   
  


Fading Ticker for IE

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Fading Ticker for IE</title>

<script language="JavaScript"> // Fading Ticker for IE // (c) 2002 Premshree Pillai // http://www.qiksearch.ru // qiksearch@rediffmail.ru // 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>

</head> <body bgcolor="#FFFFFF">

Fading Ticker for IE

<script language="JavaScript"> // Fading Ticker for IE // BODY section code

document.write("
"); document.write("
"); document.write("
"); var msg1=new Array("<center>Premshree
","
Pillai
","
Welcomes you to.....<center>","<center><a href="http://www.qiksearch.ru/javascripts.htm"><img src="http://www.wbex.ru/style/logo.png" border="0" alt="essentialjs from Qiksearch.ru"></a>
");

var tick1=0; var timeOut1=150; setTicker("div1", msg1, tick1, timeOut1, 1); </script>


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 <a href="javascript:void(document.location="view-source:"+document.location)">source</a> to see how to set the ticker. The script consists of a HEAD section and a BODY section.
&#169 2002 <a href="http://www.qiksearch.ru" title="Click here to visit Qiksearch.ru">Premshree Pillai</a>.

</body> </html>

      </source>
   
  


JavaScript Ticker 1.3 (IE)

   <source lang="html4strict">

<!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.ru/javascripts/ticker13.htm //********************************************* //* JavaScript Ticker 1.3 * //* Ticks a number of messages * //* (c) Premshree Pillai, * //* http://www.qiksearch.ru * //* E-mail : premshree@hotmail.ru * //* Created on 02/26/02 * //* Use the script freely as long as this * //* message is intact * //* Visit www.qiksearch.ru/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.ru",
    "http://intellisearch.cjb.net",
    "http://premshree.qik.cjb.net",
    "http://metataggen.qik.cjb.net",
    "http://www.qiksearch.ru/javascripts.htm" );

var ticker_len = ticker_msg.length; for(var l=0; l<ticker_len; l++) {

document.write("
" + "
"); document.write(""); document.write(""); document.write("
<a href="" + ticker_url[l] + "" class="tick">" + ticker_msg[l] + "
</a>
LIST ALL
SPEED
" + "
");

}

document.write("
"); document.write("
");
for(var l=0; l<ticker_len; l++)
{
 document.write("» <a href="" + ticker_url[l] + "" class="tick_news_all">" + ticker_msg[l] + "</a>
"); }
document.write("
"); document.write("
"); document.write("
"); document.write("
");
document.write("<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">

JavaScript Ticker 1.3




This is a JavaScript Ticker which ticks a number of messages like the one shown above. You can add more messages in the array ticker_msg. The URL for that message should be added to the array ticker_url.

Change the position of the ticker by changing the variables top_pos and left_pos. You can change the ticker speed by changing the value of the variable time_length. (Here it is 1000, which means that the ticker message will change every 1000 milliseconds, i.e every 1 second).

New in Version 1.3 : In this version the new additions are the "List All" and "Speed" buttons.
The "List All" button will list all the news items that appear in the ticker, together.
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.



<a href="mailto:premshree@hotmail.ru" class="link">&#169 2002 Premshree Pillai</a>, <a href="http://www.qiksearch.ru" class="link">Qiksearch.ru</a>

</body> </html>

      </source>
   
  


JavaScript Ticker using Tabular Data Control

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>JavaScript Ticker (using Tabular Data Control)</title>

<style type="text/css"> .tickerStyle{font-family:verdana,arial,helvetica; color:#666699; font-weight:bold; font-size:8pt; background:#EEEEFF; border-right:#666699 solid 2px; border-left:#666699 solid 1px; border-top:#666699 solid 1px; border-bottom:#666699 solid 2px; padding:3px; width:400px; text-align:center; text-decoration:none} .tickerStyle:hover{font-family:verdana,arial,helvetica; color:#666699; font-weight:bold; font-size:8pt; background:#DDDDEE; border-right:#666699 solid 1px; border-left:#666699 solid 2px; border-top:#666699 solid 2px; border-bottom:#666699 solid 1px; padding:3px; width:400px; text-align:center; text-decoration:none} </style>


<script language="JavaScript"> // JavaScript Ticker // - using Tabular Data Control // (c) 2002 Premshree Pillai // http://www.qiksearch.ru // qiksearch@rediffmail.ru function TDC_Ticker(objName, divName, counter, maxMsgs, timeOut) {

try
{
 eval("tickerSet=" + objName + ".recordset");
 if(!tickerSet.EOF && counter<maxMsgs-1)
 {
  tickerSet.MoveNext();
  counter++;
 }
 else
 {
  counter=0;
  tickerSet.MoveFirst();
 }
 setTimeout("TDC_Ticker(""+objName+"",""+divName+"",""+counter+"",""+maxMsgs+"",""+timeOut+"")", timeOut); 
}
catch(e)
{
 alert("This Ticker works with IE 5+ only.");
}

} </script>

</head> <body bgcolor="#FFFFFF">

JavaScript Ticker
using Tabular Data Control

<object id="ticker" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">

  <param name="DataURL" value="tickerData.txt">
  <param name="UseHeader" value="TRUE">
  <param name="TextQualifier" value="~">
  <param name="FieldDelim" value="|">

</object> <a href="" datasrc="#ticker" datafld="messageURL" class="tickerStyle">

  

</a> <script language="JavaScript">

var tickerMaxMsgs=4; // Maximum Messages in the Data File
var tickerCount=tickerMaxMsgs;
new TDC_Ticker("ticker","tickerDiv",tickerCount,tickerMaxMsgs,2000); // Set the Ticker

</script>


  
  
This JavaScript Ticker is an example of "Data Binding" using "Tabular Data Control (TDC)" which is a Microsoft ActiveX control built in to Internet Explorer.

To include this ActiveX control, you must use the <OBJECT> tag with CLASSID as
"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83". To include such a ticker, you must first place the following <STYLE> and JavaScript in the <HEAD> section :

<textarea rows="5" cols="45" style="border:#000000 solid 1px; overflow:auto" onfocus="this.select()">

<style type="text/css"> .tickerStyle{font-family:verdana,arial,helvetica; color:#666699; font-weight:bold; font-size:8pt; background:#EEEEFF; border-right:#666699 solid 2px; border-left:#666699 solid 1px; border-top:#666699 solid 1px; border-bottom:#666699 solid 2px; padding:3px; width:400px; text-align:center; text-decoration:none} .tickerStyle:hover{font-family:verdana,arial,helvetica; color:#666699; font-weight:bold; font-size:8pt; background:#DDDDEE; border-right:#666699 solid 1px; border-left:#666699 solid 2px; border-top:#666699 solid 2px; border-bottom:#666699 solid 1px; padding:3px; width:400px; text-align:center; text-decoration:none} </style>


<script language="JavaScript"> // JavaScript Ticker // - using Tabular Data Control // (c) 2002 Premshree Pillai // http://www.qiksearch.ru // qiksearch@rediffmail.ru function TDC_Ticker(objName, divName, counter, maxMsgs, timeOut) {

try
{
 eval("tickerSet=" + objName + ".recordset");
 if(!tickerSet.EOF && counter<maxMsgs-1)
 {
  tickerSet.MoveNext();
  counter++;
 }
 else
 {
  counter=0;
  tickerSet.MoveFirst();
 }
 setTimeout("TDC_Ticker(""+objName+"",""+divName+"",""+counter+"",""+maxMsgs+"",""+timeOut+"")", timeOut); 
}
catch(e)
{
 alert("This Ticker works with IE 5+ only.");
}

} </script> </textarea>

  

Here is the description of the arguments that the function TDC_Ticker() takes:

objName : The ID of the OBJECT where you include the TDC for that ticker.
divName : The ID of the element where the messages will tick.
counter : A counter that should be initialised to the max number of messages.
maxMsgs : The max number of messages in the data file.
timeOut : The delay (in milliseconds) between messages.

Next, you must place the code for placing the ticker. For e.g, the code for placing the above ticker is :

<textarea rows="5" cols="45" style="border:#000000 solid 1px; overflow:auto" onfocus="this.select()">

<object id="ticker" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">

  <param name="DataURL" value="tickerData.txt">
  <param name="UseHeader" value="TRUE">
  <param name="TextQualifier" value="~">
  <param name="FieldDelim" value="|">

</object> <a href="" datasrc="#ticker" datafld="messageURL" class="tickerStyle">

  

</a> <script language="JavaScript">

var tickerMaxMsgs=4; // Maximum Messages in the Data File
var tickerCount=tickerMaxMsgs;
new TDC_Ticker("ticker","tickerDiv",tickerCount,tickerMaxMsgs,2000); // Set the Ticker

</script>

</textarea>

  

Here is the list of Parameters the <OBJECT> takes :

DataURL : The path of the file that contains the data.
UseHeader : This is always set to TRUE.
TextQualifier : The character at the beginning and end of a message.
FieldDelim : The Field Delimiter.

<a href="tickerData.txt" target="_blank">Click here</a> to see the data file (tickerData.txt) used for the above ticker.


<object id="cpy" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">

  <param name="DataURL" value="cpyData.txt">
  <param name="UseHeader" value="TRUE">
  <param name="TextQualifier" value="*">
  <param name="FieldDelim" value="^">

</object> <a href="" datasrc="#cpy" datafld="messageURL" class="tickerStyle">

  

</a> <script language="JavaScript">

var cpyMaxMsgs=2; // Maximum Messages in the Data File
var cpyCount=cpyMaxMsgs;
new TDC_Ticker("cpy","cpyDiv",cpyCount,cpyMaxMsgs,4000); // Set the Ticker

</script>

<script language="JavaScript">document.write("" + document.lastModified + "");</script>

</body> </html>

      </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/ticker_tdc.zip">ticker_tdc.zip( 2 k)</a>


News Bar

   <source lang="html4strict">

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

News Bar
<script language="javascript">

//************************************************** // News Bar * // Date created : 1 March, 2002 * // (c) 2002 Premshree Pillai. All rights reserved. * // http://www.qiksearch.ru * // premshree@hotmail.ru * // Visit http://www.qiksearch.ru/javascripts.htm * // for FREE scripts * // Use freely as long as this message is intact * //************************************************** // Location : http://www.qiksearch.ru/javascripts/news-bar.htm var count=0; if (navigator.appName=="Microsoft Internet Explorer" || (navigator.appName=="Netscape" && navigator.appVersion >= "5")) { document.write("<form name="news_bar"><input type="button" value="3" onclick="javascript:prev_news()" style="width:22; height:22; font-family:webdings; background:#FFFFFF; border-left-width:1px; border-right-width:0px; border-top-width:1px; border-bottom-width:1px; border-color:#000000; cursor:hand" name="prev" title="Previous News"><input type="button" name="news_bar_but" onclick="goURL();" style="color:#000000;background:#FFFFFF; width:350; height:22; border-width:1; border-color:#000000; cursor:hand" onmouseover="this.style.background='#E1FFE1';return true" onmouseout="this.style.background='#FFFFFF';return true" onmousedown="this.style.background='#00C000';return true"><input type="button" value="4" onclick="javascript:next_news();" 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="next" title="Next News"></form>"); } else { document.write("<form name="news_bar"><input type="button" value="Previous" onclick="javascript:prev_news();"><input type="button" name="news_bar_but" onclick="goURL();" width="300" border="0"><input type="button" value="Next" onclick="javascript:next_news();"></form>"); }

var msgs = new Array(
    "Welcome to Qiksearch",
    "FREE Javascripts",
    "Intellisearch Bar NOW!",
    "www.qiksearch.ru",
    "FREE Articles" ); // No comma after last ticker msg
var msg_url = new Array(
    "http://www.qiksearch.ru",
    "http://www.qiksearch.ru/javascripts.htm",
    "http://intellisearch.cjb.net",
    "http://www.qiksearch.ru",
    "http://www.qiksearch.ru/articles.htm" ); // No comma after last ticker url

function init_news_bar() {

 this.document.news_bar.news_bar_but.value=msgs[count];

} function prev_news() {

if(count>0)
{
 count-=1;
 this.document.news_bar.news_bar_but.value=msgs[count];
}
else
{
 window.alert("This is the first News Item");
}

} function next_news() {

if(count<msgs.length-1)
{
 count+=1;
 this.document.news_bar.news_bar_but.value=msgs[count];
}
else
{
 window.alert("This is the last News Item");
}

} function goURL() {

location.href=msg_url[count];

}

init_news_bar(); </script>

This is a Cross Browser Javascript News Bar that displays a number of messages on a button. To see the next news item, click on the right arrow (Next). To view the previous news item, click on the left arrow. (Previous)

This news bar is very easy to customise. You can add any number of messages and their corresponding URLs. Messages must be added to the array msgs and the URLs must be added to the array msg_url.

This news bar displays the messages on a button. You can change the style of the button easily.

To use this script, you just have to copy the <script> section of the source and paste it wherever you require on your web page.




<a href="mailto:premshree@hotmail.ru?Subject=Javascripts" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a>

</body> </html>

      </source>
   
  


Text Box Ticker

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Text Box Ticker</title> <style type="text/css"> .link{font-family:verdana,arial,helvetica; font-size:8pt; color:#808080; font-weight:normal} .link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#FF9900; font-weight:normal} .header{font-family:arial,verdana,helvetica; font-size:25pt; color:#FF9900; font-weight:bold; filter:DropShadow(color=#000000, offX=2, offY=2, positive=1); width:100%} .TextBoxTicker{background:#FCFCFC; border:#808080 solid 1px; text-align:center; cursor:pointer} </style> </head> <body bgcolor="#FFFFFF">

Text Box Ticker
<script language="JavaScript"> // Text Box Ticker // (c) 2002 Premshree Pillai. // http://www.qiksearch.ru // qiksearch@rediffmail.ru document.write("<form name="qiksearch_ticker"><input type="text" class="TextBoxTicker" onfocus="goURL();this.blur();" name="qiksearch_ticker" size="55"></form>"); var count=0; var ticker_speed=1;

// Ticker messages
var ticker_msg = new Array(
    "Welcome to Qiksearch",
    "Download Javascripts",
    "Intellisearch Bar NOW!",
    "FREE Articles" ); // No comma after last ticker msg
// Ticker URLs
var ticker_url = new Array(
    "http://www.qiksearch.ru",
    "http://www.simtel.net/pub/pd/57885.html",
    "http://www.simtel.net/pub/pd/57634.html",
    "http://www.qiksearch.ru/articles.htm" ); // No comma after last ticker url

function TextBoxTicker() {

if(count<ticker_msg.length)
{  
 this.document.qiksearch_ticker.qiksearch_ticker.value=ticker_msg[count];
 count++;
 if(count==ticker_msg.length)
 {
  count=0;
 }
 setTimeout("TextBoxTicker();",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];
}

} TextBoxTicker(); </script>

This is a Javascript Text Box Ticker that ticks a number of messages on a Text Box.

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 ticker_msg and the URLs must be added to the array ticker_url.

The ticker speed can be changed easily by changing the value of the variable ticker_speed. (Here it is 1, which means that the message would change every 1 second.)

To use this script, you just have to copy the <script> section of the source and paste it wherever you require on your web page.




<a href="http://www.qiksearch.ru" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a>

</body> </html>

      </source>
   
  


XML Ticker (IE)

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>XML Ticker</title> <style type="text/css"> .link{font-family:verdana,arial,helvetica; color:#003399; font-size:8pt; font-weight:bold} .link:hover{font-family:verdana,arial,helvetica; color:#CC0000; font-size:8pt; font-weight:bold} .link_xml{font-family:verdana,arial,helvetica; color:#003399; text-decoration:none; font-size:10pt; font-weight:bold} .link_xml:hover{font-family:verdana,arial,helvetica; color:#FF9900; text-decoration:none; font-size:10pt; font-weight:bold} </style> </head> <body bgcolor="#EFEFEF">

</table> </body> </html> </source>
XML Ticker

</center>


<script language="JavaScript1.2"> // XML Ticker JavaScript // (c) 2002 Premshree Pillai // http://www.qiksearch.ru // Use freely as long as all messages are as it is // Location of script : http://www.qiksearch.ru/javascripts/xml/ticker.htm var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); function loadXML(xmlFile) {

xmlDoc.async="false";
xmlDoc.onreadystatechange=verify;
xmlDoc.load(xmlFile);
ticker=xmlDoc.documentElement;

} function verify() {

if (xmlDoc.readyState != 4)
{ 
 return false; 
}

} loadXML("ticker_items.xml"); document.write("<style type="text\/css">"); document.write(".ticker_style{font-family:" + ticker.childNodes(1).childNodes(0).getAttribute("font") + "; font-size:" + ticker.childNodes(1).childNodes(0).getAttribute("size") + "; color:" + ticker.childNodes(1).childNodes(0).getAttribute("color") + "; font-weight:" + ticker.childNodes(1).childNodes(0).getAttribute("weight") + "; text-decoration:" + ticker.childNodes(1).childNodes(0).getAttribute("decoration") + "}"); document.write(".ticker_style:hover{font-family:" + ticker.childNodes(1).childNodes(1).getAttribute("font") + "; font-size:" + ticker.childNodes(1).childNodes(1).getAttribute("size") + "; color:" + ticker.childNodes(1).childNodes(1).getAttribute("color") + "; font-weight:" + ticker.childNodes(1).childNodes(1).getAttribute("weight") + "; text-decoration:" + ticker.childNodes(1).childNodes(1).getAttribute("decoration") + "}
"); document.write("</style>");

document.write("
");

var item_count=2; var timeOutVal=(ticker.childNodes(0).getAttribute("timeout"))*1000; var original_timeOutVal=timeOutVal; var isPauseContent; if(ticker.childNodes(0).getAttribute("pause")=="true") {

isPauseContent=" onmouseover="setDelay();" onmouseout="reset();"";

} else {

isPauseContent="";

} function setTicker() {

document.all.ticker_space.innerHTML="<center><a href="" + ticker.childNodes(item_count).getAttribute("URL") + "" target="" + ticker.childNodes(item_count).getAttribute("target") + "" class="ticker_style"" + isPauseContent + ">" + ticker.childNodes(item_count).firstChild.text + "</a>
";
if(item_count==ticker.childNodes.length-1)
{
 item_count=2;
}
else
{
 item_count++;
}
setTimeout("setTicker()",timeOutVal);

} function setDelay() {

timeOutVal=10000000000000;
item_count--;

} function reset() {

timeOutVal=original_timeOutVal;
setTicker();

} setTicker(); </script>

</center>

This is an XML based JavaScript Ticker that can tick any number of messages. The ticker works with IE only. The ticker reads it"s contents, i.e the ticker style, text to be displayed, the link for that particular message from a XML file. (Here <a href="ticker_items.xml" class="link_xml" target="_blank">ticker_items.xml</a>). The structure of the XML document is as follows »


TICKER
<img src="section.gif" width="13" height="13"> tickerstyle

 » pause = "true" / "false" :: "true" for pause onMouseOver
 » timeout = any integer :: The delay in seconds between different messages.
 » border = any integer :: Border width of Ticker
 » bordercolor = #HexColor :: The border color of Ticker
 » background = #HexColor :: Background color of Ticker
 » width = any integer :: Ticker width
 » height = any integer :: Ticker height

<img src="section.gif" width="13" height="13"> tickerlinkstyle

 <img src="section.gif" width="13" height="13"> mouseout
  » font = "verdana,arial,helvetica....." :: Ticker link font
  » color = #HexColor :: Ticker link color
  » decoration = "none" / "underline" / "underline + overline" :: Ticker link style
  » weight = "normal" / "bold" :: Ticker link weight
  » size = "any integer"pt :: Ticker link size
 <img src="section.gif" width="13" height="13"> mouseover
  » font = "verdana,arial,helvetica....." :: Ticker link font
  » color = #HexColor :: Ticker link color
  » decoration = "none" / "underline" / "underline + overline" :: Ticker link style
  » weight = "normal" / "bold" :: Ticker link weight
  » size = "any integer"pt :: Ticker link size

<img src="section.gif" width="13" height="13"> tickeritem

 » URL = A valid URL :: Ticker link URL
 » target = "_blank" / "_top" / "_self" / "any other valid target name" :: Ticker link target


<a href="http://www.qiksearch.ru" class="link">© 2002 Premshree Pillai. All rights reserved.