TopXML JavaScript library : Fading Ticker

Home Page

Add/Edit your code items

Search the code library

Browse for the code library

JavaScript
JavaScript
JavaScript Contents
How to understand the flow of control in XLST
Begginers, search the Bible
JavaScript Ticker (using Tabular Data Control)
-postfix.aspx>Infix <> Postfix
Nested Tables And Data Island
XML Data Traversal
TrimWhiteSpace
Two Tier Data Islands with Expanding/Collapsing Child elements.
Escape special characters using JavaScript and regular expressions
Sticky Table Headers
Dynamically Filling HTML Select Box from XML Data Island using Javascript.
XML Basics Handbook

LAMP >>

By	Premshree Pillai
First Posted	08/28/2002
Times viewed	210

Fading Ticker

This post contains attachments
v20020828094811.zip

Summary This is a Cross Browser Fading Javascript Ticker that can tick any number of messages. The Ticking message fades in while being displayed.

This is a Cross Browser Fading Javascript Ticker that can tick any number of messages. The Ticking message fades in while being displayed. The script is extremely customisable. You can add any number of messages. You can also change the delay between different messages. You can also specify the taget location for a message ("New" window or "Parent" window). You can also choose whether you want the ticking message to pause on MouseOver. To use the script just copy the section of the source of the page and paste it wherever you need it on your web page.

Additional information
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Fading Ticker</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} .header{font-family:arial,verdana,helvetica; font-size:30pt; color:#003399; font-weight:bold} </style> </head> <body bgcolor="#FFFFFF"> <center><span class="header">Fading Ticker</span> /n/n <center>  <script language="JavaScript1.2"> // Use Freely as long as following messages are intact :: //------------------------------------------------------------------------------ // Fading Ticker JavaScript | // This script written and Â© 2002 Premshree Pillai. | // All rights reserved. | // Created on : 29/04/02 | // Web : http://www.qiksearch.com/ | // Mail : qiksearch@rediffmail.com | // FREE JavaScripts at http://www.qiksearch.com/javascripts.htm | // Location of script : http://www.qiksearch.com/javascripts/fading-ticker.htm | //------------------------------------------------------------------------------ //--------------------------------------CUTOMISE---------------------------------------------- // Ticker Messages ( HTML Tags supported) var qiksearch_ticker_text = new Array ("Qiksearch.com", "FREE JavaScripts by Premshree Pillai", "Articles by Premshree Pillai", "Intellisearch Bar FREE Download"); // Ticker Message URLs var qiksearch_ticker_URL = new Array ("http://www.qiksearch.com", "http://www.qiksearch.com/javascripts.htm", "http://www.qiksearch.com/articles.htm", "http://www.qiksearch.com/intellisearch.htm"); // Ticker Message URLs' Target (1 for NEW WINDOW, 0 for SAME WINDOW) var qiksearch_ticker_target = new Array ("0", "0", "0", "1"); var qiksearch_ticker_width = 390; // The width of the Ticker var qiksearch_ticker_height = 25; // The height of the Ticker var qiksearch_ticker_borderw=1; // Border width var qiksearch_ticker_borderc="#808080"; // Border Color var timeOutVal=200; // Delay in milliseconds var isPause=false; // true if you want pause on mouseover, else false // setting to true is a bit buggy //-------------------------------------------------------------------------------------------- //-----------------------------DO-NOT-MODIFY-BELOW-THIS--------------------------------------- var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1; var ns6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1; var ns4=document.layers; var qiksearch_tickerObj; var ticker_left_ns4=(screen.width/2-20)-Math.round(qiksearch_ticker_width/2); // Setting qiksearch_tickerObj depending on Browser function setTickerObj() { if(ie4) { qiksearch_tickerObj=document.all.qiksearch_js_ticker; } if(ns6) { qiksearch_tickerObj=document.getElementById("qiksearch_js_ticker"); } } // isPause Content var isPauseContent; if(isPause) { isPauseContent=' onMouseOver="delay_timeOutVal();" onMouseOut="resume_timeOutVal();"'; } else { isPauseContent=''; } if(ie4||ns6) { document.write('<table' + isPauseContent + ' onMouseUp="goURL();" width="' + qiksearch_ticker_width + '" height="' + qiksearch_ticker_height + '" style="cursor:pointer; background:#FFFFFF; border:' + qiksearch_ticker_borderw + 'px solid ' + qiksearch_ticker_borderc + '"><tr><td align="middle">'); document.write('<div id="qiksearch_js_ticker">'); document.write('</div>'); document.write('</td></tr></table>'); } var def_10='A',def_11='B',def_12='C',def_13='D',def_14='E',def_15='F'; var colorVal=15; var div_count=0; // Fading Color code Generating function function qiksearch_fade_desat(getColorIntVal) { var returnVal; if(getColorIntVal>=10) { for(var i=0; i<=15; i++) { if((getColorIntVal==i)) { returnVal = eval('def_' + i); } } } else { returnVal=getColorIntVal; } return(returnVal); } // Main function writeDiv() { if(ie4||ns6) { qiksearch_tickerObj.innerHTML= '<font face="verdana,arial,helvetica" size="-1" color="#' + joinColor(qiksearch_fade_desat(colorVal)) + '"><b>' + qiksearch_ticker_text[div_count~ + '</b></font>' ; } if(ns4) { qiksearch_tickerObj=document.qiksearch_ticker_ns4; qiksearch_tickerObj.document.write('<table border="1" bordercolor="' + qiksearch_ticker_borderc + '"width="100%"><tr><td align="center"><a href="javascript:void(0);"' + isPauseContent + ' onMouseUp="javascript:goURL();"><font face="verdana,arial,helvetica" size="-1" color="#' + joinColor(qiksearch_fade_desat(colorVal)) + '"><b>' + qiksearch_ticker_text[div_count~ + '</b></font></a></td></tr></table>'); qiksearch_tickerObj.document.close(); } if((colorVal>0) && (colorVal!=0)) { colorVal--; } else { colorVal=15; if(div_count<qiksearch_ticker_text.length) { div_count++; } if(div_count==qiksearch_ticker_text.length) { setTimeout("resetAll()",timeOutVal); setTimeout("writeDiv()",timeOutVal); } } if(div_count<qiksearch_ticker_text.length) { setTimeout("writeDiv()",timeOutVal); } } // Generating Final Hex Color function joinColor(getColor) { return (getColor + '0' + getColor + '0' + getColor + '0'); } // Reset function resetAll() { div_count=0; colorVal=15; } // URL Navigation function function goURL() { if(qiksearch_ticker_target[div_count~=="0") { location.href=qiksearch_ticker_URL[div_count~; } else { if(qiksearch_ticker_target[div_count~=="1") { window.open(qiksearch_ticker_URL[div_count~); } } } // Setting Delay on MouseOver and MouseOut var temp_timeOutVal=timeOutVal; function delay_timeOutVal() { timeOutVal=100000000000000; setTimeout("writeDiv()",timeOutVal); } function resume_timeOutVal() { timeOutVal=temp_timeOutVal; setTimeout("writeDiv()",timeOutVal); } setTickerObj(); window.onload=writeDiv; if(ns4) { document.write('<layer id="qiksearch_ticker_ns4" width="' + qiksearch_ticker_width + '" left="' + ticker_left_ns4 + '"></layer>'); } </script>  </center> /n <table width="400" align="center"><tr><td> <font face="verdana,arial,helvetica" size="-1" color="#404040"> This is a Cross Browser Fading Javascript Ticker that can tick any number of messages. The Ticking message fades in while being displayed. /n/nThe script is extremely customisable. You can add any number of messages. You can also change the delay between different messages. You can also specify the taget location for a message ("New" window or "Parent" window). You can also choose whether you want the ticking message to pause on MouseOver. /n/nTo use the script just copy the <SCRIPT> section of the source of the page and paste it wherever you need it on your web page. /n/n<hr style="width:100%; height:1px; color:#CC0000"> <a href="http://www.qiksearch.com" class="link">© Copyrights 2002 Premshree Pillai. All rights reserved.</a> </font> </td></tr></table> </body> </html>

Rate this article on a scale of 1 to 10 (0 votes, average 0)

Your vote :

LAMP >>


Leave a comment for this article
Your name
Your email (optional)
Your comment
Optional: Upload an attachment
Enter the code shown:



	Recent Jobs An immediate job opportunity as a Biztal Software Developers Needed in Charlotte, Sr. Software Engineer - Analytics Immediate Mainframe openings for Chennai Immediate TANDEM-TAL openings for Chenna View all Jobs (Add yours) View all CV (Add yours)

	answering service spoc swimming pool contractor teleconferencing service water softener Teleconference Host Department NOLIMIT Web Hosting MSN sunglasses

	Partners Dream.In.Code dotNet Slackers dotNet Spider Your HTML Source VisualBuilder.com DevGuru Planet Source Code ZVON.ORG Web Design ASPAlliance XML Pitstop Scripts The Spot 4 SAP Bitshop Web Hosting

Email TopXML