JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Fading Ticker Tape Script

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. Browsers other than IE 4+ and NS 4+ will simply see nothing. Initializing...


Insert into <HEAD>
<style> <!-- #tickertape{ position:relative; layer-background-color:black; width:400; height:12; } #subtickertape{ background-color:black; position:absolute; border: 1px solid black; width:400; height:12; } .subtickertapefont{ font:bold 12px Verdana; text-decoration:none; color:white; } .subtickertapefont a{ color:white; text-decoration:none; } --> </style>

Insert into <BODY>
<body onload="if (document.all\|\|document.layers) {regenerate2();update()}"> <div id="tickertape"> <div id="subtickertape" class="subtickertapefont">Initializing...</div> </div> <script language="JavaScript1.2"> //default speed is 4.5 seconds, Change that as desired var speed=4500 var news=new Array() news[0]="<a href='http://dynamicdrive.com'>Click here to go to Dynamic Drive's front page</a>" news[1]="<a href='http://wsabstract.com'>Visit Website Abstraction 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 i=0 if (document.all) tickerobject=document.all.subtickertape.style else tickerobject=document.tickertape.document function regenerate(){ window.location.reload() } function regenerate2(){ if (document.layers) setTimeout("window.onresize=regenerate",450) } function update(){ BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10); if (document.layers){ document.tickertape.document.subtickertape.document.write('<span class="subtickertapefont">'+news[i]+'</span>') document.tickertape.document.subtickertape.document.close() } else document.all.subtickertape.innerHTML=news[i] if (i<news.length-1) i++ else i=0 setTimeout("update()",speed) } function BgFade(red1, grn1, blu1, red2, grn2, blu2, steps) { sred = red1; sgrn = grn1; sblu = blu1; ered = red2; egrn = grn2; eblu = blu2; inc = steps; step = 0; RunFader(); } function RunFader() { var epct = step/inc; var spct = 1 - epct; if (document.layers) tickerobject.bgColor = Math.floor(sred * spct + ered * epct)256256 + Math.floor(sgrn * spct + egrn * epct)256 + Math.floor(sblu spct + eblu * epct); else tickerobject.backgroundColor= Math.floor(sred * spct + ered * epct)256256 + Math.floor(sgrn * spct + egrn * epct)256 + Math.floor(sblu spct + eblu * epct); if ( step < inc ) { setTimeout('RunFader()',50); } step++; } </script>

Other Options
Finally, add the below into the <body> tag itself, like this: <body onload="if (document.all\|\|document.layers) {regenerate2();update()}"> 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 code of Part 1.