JavaScript Ticker using Tabular Data Control



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JavaScript Ticker (using Tabular Data Control)</title>
<!-- BEGIN TICKER STYLE -->
<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>
<!-- END TICKER STYLE -->
<!-- BEGIN JAVASCRIPT TICKER USING TABULAR DATA CONTROL -->
<script language="JavaScript">
// JavaScript Ticker
// - using Tabular Data Control
// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// qiksearch@rediffmail.com

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>
<!-- END JAVASCRIPT TICKER USING TABULAR DATA CONTROL -->
</head>
<body bgcolor="#FFFFFF">

<center><span style="font-family:verdana,arial,helvetica; font-weight:bold; font-size:19pt; color:#666699; filter:Shadow(direction=45, color=#9999CC); width:100%">JavaScript Ticker<br>using Tabular Data Control</span></center><br>

<!-- BEGIN TICKER PLACEMENT -->
<center>
<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">
   <span id="tickerDiv" datasrc="#ticker" datafld="message"></span>
</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>
</center>
<!-- END TICKER PLACEMENT -->

<!-- BEGIN DESCRIPTION -->
<table width="400" align="center" cellspacing="0" cellpadding="0"><tr><td>
   <font face="verdana,arial,helvetica" size="-1" color="#000000">
   <br>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.<br><br>
   To include this ActiveX control, you must use the &lt;OBJECT&gt; tag with CLASSID as <br>"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83". To include such a ticker, you must first place the following &lt;STYLE&gt; and JavaScript in the &lt;HEAD&gt; section :<br><br>
   <textarea rows="5" cols="45" style="border:#000000 solid 1px; overflow:auto" onfocus="this.select()">
<!-- BEGIN TICKER STYLE -->
<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>
<!-- END TICKER STYLE -->
<!-- BEGIN JAVASCRIPT TICKER USING TABULAR DATA CONTROL -->
<script language="JavaScript">
// JavaScript Ticker
// - using Tabular Data Control
// (c) 2002 Premshree Pillai
// http://www.qiksearch.com
// qiksearch@rediffmail.com

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>
<!-- END JAVASCRIPT TICKER USING TABULAR DATA CONTROL --></textarea>
   <br><br>Here is the description of the arguments that the function TDC_Ticker() takes:
   <br><br><b>objName</b> : The ID of the OBJECT where you include the TDC for that ticker.
   <br><b>divName</b> : The ID of the element where the messages will tick.
   <br><b>counter</b> : A counter that should be initialised to the max number of messages.
   <br><b>maxMsgs</b> : The max number of messages in the data file.
   <br><b>timeOut</b> : The delay (in milliseconds) between messages.
   <br><br>Next, you must place the code for placing the ticker. For e.g, the code for placing the above ticker is :<br><br>
   <textarea rows="5" cols="45" style="border:#000000 solid 1px; overflow:auto" onfocus="this.select()">
<!-- BEGIN TICKER PLACEMENT -->
<center>
<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">
   <span id="tickerDiv" datasrc="#ticker" datafld="message"></span>
</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>
</center>
<!-- END TICKER PLACEMENT --></textarea>
   <br><br>Here is the list of Parameters the &lt;OBJECT&gt; takes :
   <br><br><b>DataURL</b> : The path of the file that contains the data.
   <br><b>UseHeader</b> : This is always set to TRUE.
   <br><b>TextQualifier</b> : The character at the beginning and end of a message.
   <br><b>FieldDelim</b> : The Field Delimiter.<br><br>
   <a href="tickerData.txt" target="_blank"><font color="#666699">Click here</font></a> to see the data file (tickerData.txt) used for the above ticker.<br><br>
   </font>
</td></tr></table>
<!-- END DESCRIPTION -->

<!-- BEGIN TICKER PLACEMENT FOR CPY -->
<center>
<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">
   <span id="cpyDiv" datasrc="#cpy" datafld="message"></span>
</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>
</center>
<!-- END TICKER PLACEMENT FOR CPY -->

<table width="400" align="center"><tr><td><script language="JavaScript">document.write('<font face="verdana,arial,helvetica" size="-2" color="#CCCCCC">' + document.lastModified + '</font>');</script></td></tr></table>

</body>
</html>
JavaScript Ticker using Tabular Data Control : Ticker : GUI Components JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » GUI Components » Ticker »

JavaScript Ticker using Tabular Data Control

Leave a Comment / Note

JAVASCRIPT DHTML TUTORIALS
