Dynamic Drive DHTML Scripts- Fading Ticker Tape Script

New Revised CSS Library Forums Web Tools

Fading Ticker Tape Script

Author: Dynamic Drive

Note: Updated March 16th, 2003

Description: A cross browser ticker tape that can display an infinite number of messages. Each time the message changes, a fading effect is accompanied. The messages themselves are each clickable, and can be configured to go anywhere upon click. Fully functional in IE4+, NS4, NS6+, and Opera7+.

Demo:

Initializing...

Directions

Step 1: Insert the below into the <head> section of your page:

Step 2: Insert the below inside the <body> section of your page, where you want the ticker to appear:

Select All
<div id="tickertape"> <div id="subtickertape" class="subtickertapefont">Initializing...</div> </div> <script language="JavaScript1.2"> /*********************************************** * Fading Ticker Tape Script- © Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //default speed is 4.5 seconds, Change that as desired var speed=4500 var news=new Array() news[0]="<a href='http://www.dynamicdrive.com'>Click here to go to Dynamic Drive's front page</a>" news[1]="<a href='http://www.javascriptkit.com'>Visit JavaScript Kit for free JavaScripts!</a>" news[2]="<a href='http://freewarejava.com'>Looking for free java applets? Click here.</a>" //expand or shorten this list of messages as desired var fadescheme=0 //set 0 to fade bgcolor from (white to black), 1 for (black to white) var hex=(fadescheme==0)? 255 : 0 var startcolor=(fadescheme==0)? "rgb(255,255,255)" : "rgb(0,0,0)" var endcolor=(fadescheme==0)? "rgb(0,0,0)" : "rgb(255,255,255)" var frame=20; var ie=document.all var ns6=document.getElementById var ns4=document.layers i=0 tickerobject=ie? subtickertape: ns6? document.getElementById("subtickertape") : document.tickertape.document function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers) setTimeout("window.onresize=regenerate",450) } function bgcolorfade() { // 20 frames fading process if(frame>0) { hex=(fadescheme==0)? hex-12 : hex+12 // increase or decrease color value depd on fadescheme tickerobject.style.backgroundColor="rgb("+hex+","+hex+","+hex+")"; // Set color value. frame--; setTimeout("bgcolorfade()",20); } else{ tickerobject.style.backgroundColor=endcolor; frame=20; hex=(fadescheme==0)? 255 : 0 } } function updatecontent(){ if (ie||ns6) bgcolorfade() if (ns4){ tickerobject.subtickertape.document.write('<span class="subtickertapefont">'+news[i]+'</span>') tickerobject.subtickertape.document.close() } else tickerobject.innerHTML=news[i] if (i<news.length-1) i++ else i=0 setTimeout("updatecontent()",speed) } </script>

Step 3: Finally, add the below into the <body> tag itself, like this:

<body onload="if (ie||ns6||ns4) {regenerate2();updatecontent()}">

Configuring the ticker

Changing the messages: The messages and their corresponding link are contained inside the array news[0], news[1] etc of the code in Step 2. Change those to your own (you may shorten or expand the number of messages as desired).

Changing the ticker's dimensions: To change the dimensions of the ticker, edit the "width" and height" in the style sheet of Step 1.