JavaScript DHTML/GUI Components/Ticker
Содержание
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).
<a href="mailto:premshree@hotmail.ru?Subject=Javascripts" class="link">© 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("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. © 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("");
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("<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
</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>
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"> 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>
<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>
</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
//************************************************** // 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>
</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
// 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>
</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">
|