HeadlineWaver

HeadlineWaver
Astonishing, what you can achieve by combining DHTML and IE's multimedia power. This script creates a dynamic newsboard with a flashlike wavy transition effect between the messages. Add as many messages as you like. Set each message to a link of its own. Crossbrowser (Netscape users will see a simple clean newsticker without special effect, works not with NN6). Easy configuration of font, fontsize, fontcolor, backgroundcolor and so on.

Installation

Step 1: Open your webpage. Paste the following code right below the <body> tag:

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

// // // // // // // // // // // // // // // // // // // // // // // // // //
// CONFIGURATION STARTS HERE
// // // // // // // // // // // // // // // // // // // // // // // // // //

// your messages. Add as many as you like
var message=new Array()
message[0]="DOWNLOADS: 500 scripts for free. --> "
message[1]="GREAT: 3000 GuestMaps installed. --> "
message[2]="FREE: get your own GuestMap. --> "

// the URLs of your messages
var messageurl=new Array()
messageurl[0]="http://www.24fun.com/fast/index.html"
messageurl[1]="http://www.24fun.com/gmap/gmaptest.html"
messageurl[2]="http://www.24fun.com/gmap/gmaptest.html"

// the targets of the links
// accepted values are '_blank' or '_top' or '_parent' or '_self'
// or the name of your target-window (for instance 'main')
var messagetarget=new Array()
messagetarget[0]="_blank"
messagetarget[1]="_blank"
messagetarget[2]="_blank"

// font-size
var fntsize=15

// font-color
var fntcolor="FFFF00"

// font-family
var fntfamily="Comic Sans MS"

// font-weight: 1 means bold, 0 means normal
var fntweight=1

// standstill of each message (seconds)
var pause=3

// the color of the newsborad backgorund
var backgroundcolor="444444"

// horizontal position of the slideshow (distance to the left margin of the browser-window, pixels)
var posleft=10

// vertical position of the slideshow (distance to the top margin of the browser-window, pixels)
var postop=10

// width of the textbox (pixels)
var scrollerwidth=600

// height of the textbox (pixels)
var scrollerheight=60

// borderwidth (pixels)
var scrollerborder=2

// textpadding (pixels)
var textpadding=15

// // // // // // // // // // // // // // // // // // // // // // // // // //
// CONFIGURATION ENDS HERE
// // // // // // // // // // // // // // // // // // // // // // // // // //

// do not edit the variables below
var linktext="More"
var textwidth=scrollerwidth-(2*textpadding)
var textcontent=""
var bgcontent=""
var i_message=0
var i_stepwave=0
var i_maxstepwave=20
pause=pause*1000
if (fntweight==1) {fntweight="700"}
else {fntweight="100"}

function initiate() {
    gettextcontent()
	getbgcontent()
    if (document.all) {
		wavemessage.innerHTML=textcontent
		wavemessagebg.innerHTML=bgcontent
		wavemessagebg.style.posLeft=posleft
		wavemessagebg.style.posTop=postop
		wavemessage.style.posLeft=posleft+textpadding
		wavemessage.style.posTop=postop+textpadding
		enlargewave()
    }
    if (document.layers) {
        document.wavemessage.left=posleft+textpadding
		document.wavemessage.top=postop+textpadding
		document.wavemessagebg.document.write(bgcontent)
        document.wavemessagebg.document.close()
		document.wavemessagebg.left=posleft
		document.wavemessagebg.top=postop
        changemessage()
    }
}

function enlargewave() {
    if (i_stepwave<=i_maxstepwave) {
	    wavemessage.filters.wave.phase=i_stepwave
	    wavemessage.filters.wave.strength=i_stepwave
        wavemessage.filters.wave.lightstrength=i_stepwave
	    wavemessage.filters.wave.freq=i_stepwave
        i_stepwave++
	    var timer=setTimeout("enlargewave()",50)
    }
    else {
        clearTimeout(timer)
        changemessage()
    }
}

function reducewave() {
    if (i_stepwave>0) {
	    wavemessage.filters.wave.phase=i_stepwave
	    wavemessage.filters.wave.strength=i_stepwave
	    wavemessage.filters.wave.lightstrength=i_stepwave
	    wavemessage.filters.wave.freq=i_stepwave
        i_stepwave--
	    var timer=setTimeout("reducewave()",50)
    }
    else {
        clearTimeout(timer)
        var timer=setTimeout("enlargewave()",pause)
    }
}

function changemessage() { 
    i_message++
    if (i_message>=message.length) {i_message=0}
    gettextcontent()

if (document.all) { 
        wavemessage.innerHTML=textcontent
        reducewave()
    }
    
    if (document.layers) {
        document.wavemessage.document.write(textcontent)
        document.wavemessage.document.close()
        var timer=setTimeout("changemessage()",pause)
    }
    
}

function gettextcontent() {
	textcontent="<span style='font-size:"+fntsize+"pt;font-family:"+fntfamily+";font-weight:"+fntweight+";width:"+textwidth+"px'>"
	textcontent+="<font color="+fntcolor+">"+message[i_message]+"</font> "
	textcontent+="<a href="+messageurl[i_message]+" target="+messagetarget[i_message]+"> "
	textcontent+="<font color="+fntcolor+">"+linktext+"</font></a></span>"
}

function getbgcontent() {
	bgcontent="<table width="+scrollerwidth+" height="+scrollerheight+" border="+scrollerborder+"><tr><td bgcolor="+backgroundcolor+"> </td></tr></table>"
}
window.onload=initiate
// - End of JavaScript - -->
</SCRIPT>
<DIV ID="wavemessagebg" style="position:absolute;"></DIV>
<DIV ID="wavemessage" style="position:absolute; filter:wave()"></DIV>

IMPORTANT: Do not paste this code into tables nor between <DIV> and </DIV> tags nor between any other container tags!

Step 2: Open your webpage. Go to the top of the script and configure the font-attributes, the colors as well as the size and the position of the newsboard. (Just follow the instructions.)