Introticker with fade-effect and preload-feature

Introticker with fade-effect and preload-feature
This new introticker combines an eyecatching fade effect with a very useful preload-feature. While your visitors are reading your messages the next webpage will be prelaoded and cached. After preloading the introticker automatically stops and opens the preloaded webpage. Crossbrowser (IE4x/5x/6x ticker with fade effect and preload-feature, NS6x ticker with fade effect, NS4x ticker).

Introticker demo
Click here to test introticker

Configuration:

Step 1: Open an empty page with your texteditor (such as WordPad or NotePad). Do not use Frontpage, GoLive, Dreamweaver or any similar tools.

Step 2: Paste the following code into the empty page and save it as HTML-file (such as intropage.html)

<html>
<head>
<title>Introticker with fade-effect and preload-feature</title>

</head>

<body>
<script>
// Introticker with fade-effect and preload-feature
// enter as many messages as you like
var message=new Array()
message[0]="Hello, how are you, my friend?"
message[1]="Soon you will jump to a very exciting tool."
message[2]="This tool allows you to generate flying popups without programming skills."
message[3]="Are you ready?"
message[4]="Ok then let's jump together!"

// enter the width and height of the ticker (pixel)
var tickerwidth=200
var tickerheight=300

// enter font
var tickerfont="Arial"

// enter font-size
var tickerfontsize=5

// enter the three font-colors
var tickerfontcolorpre="#FFFF00"
var tickerfontcolormark="#FFFFFF"
var tickerfontcolorafter="#333333"

// enter the background-color
var backgroundcolor="black"

// enter the pause between each word marked (1000 = 1 second)
var pausebetweenwords=200

// enter the pause between each message (1000 = 1 second)
var pausebetweenmessages=1000

// enter the pause after the fade effect (1000 = 1 second)
var pauseafterfade=1000

// enter the URl of the next webpage (the one that will be preloaded)
var linkurl="http://www.heavyscripts.com"

// do not edit the code below this line
var transparency=100
var transparencystep=5
var windowheight=0
var windowwidth=0
var x_pos=0
var y_pos=0
var i_message=-1
var messagesplit=""
var i_messagesplit=0
var i_mark=0
var tickercontent
var pausefade=40
var linkurlloaded=false
var oneloopfinished=false
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0

function splitmessage() {
	transparency=100
	if (ie) {
		i_message++
		if (i_message>=message.length) {oneloopfinished=true}
		if (i_message>=message.length) {i_message=0}
		i_mark=0
		messagesplit=message[i_message].split(" ")
		for (i=0;i<messagesplit.length;i++) {
			messagesplit[i]=messagesplit[i]+" "
		}
		messagesplit[messagesplit.length]=" "

document.all.ticker.filters.alpha.opacity=transparency
		if (oneloopfinished && linkurlloaded) {
			document.location.href=linkurl
		}
		else {
			runticker()
		}
	}
	else if (ns6 || ns4) {
		i_message++
		if (i_message>=message.length) {document.location.href=linkurl}
		else {
			i_mark=0
			messagesplit=message[i_message].split(" ")
			for (i=0;i<messagesplit.length;i++) {
				messagesplit[i]=messagesplit[i]+" "
			}
			messagesplit[messagesplit.length]=" "
			if (ns6) {
				document.getElementById('ticker').style.MozOpacity=transparency/100
			}
			runticker()
		}
	}
	else {
		document.location.href=linkurl
	}
}

function runticker() {
	if (i_mark<messagesplit.length) {
		gettickercontent()
			
		if (ie) {
			ticker.innerHTML=tickercontent
		}
		if (ns6) {
			document.getElementById('ticker').innerHTML=tickercontent
		}
		if (ns4) {
			document.ticker.document.write(tickercontent)
			document.ticker.document.close()
		}
  		i_mark++
				
  		var tickertimer=setTimeout("runticker()",pausebetweenwords)

}
	else {
		clearTimeout(tickertimer)
		setTimeout("fade()",pausebetweenmessages)
	}
}

function fade() {
	if (transparency>0){
		transparency-=transparencystep
		if (ie) {
			document.all.ticker.filters.alpha.opacity=transparency
		}
		if (ns6) {
			document.getElementById('ticker').style.MozOpacity=transparency/100
		}
		var fadetimer=setTimeout("fade()",pausefade)
	}
	else {
		clearTimeout(fadetimer)
		setTimeout("splitmessage()",pauseafterfade)
	}
}

function gettickercontent() {
		
	tickercontent="<table width="+tickerwidth+" height="+tickerheight+" cellpadding=0 cellspacing=0 border=0><tr valign=middle><td align=center>"
	tickercontent+="<font face=\""+tickerfont+"\" size="+tickerfontsize+" color=\""+tickerfontcolorpre+"\">"
	for (i=0;i<i_mark;i++) {
		tickercontent+=messagesplit[i]
	}
	tickercontent+="</font>"
	tickercontent+="<font face=\""+tickerfont+"\" size="+tickerfontsize+" color=\""+tickerfontcolormark+"\">"
	tickercontent+=messagesplit[i_mark]
	tickercontent+="</font>"
	tickercontent+="<font face=\""+tickerfont+"\" size="+tickerfontsize+" color=\""+tickerfontcolorafter+"\">"
	for (i=(i_mark+1);i<messagesplit.length;i++) {
		tickercontent+=messagesplit[i]
	}
	tickercontent+="</font>"
	tickercontent+="</td></tr></table>"

}

setposition()
function setposition() {
	if (ie) {
		windowheight=document.body.clientHeight
		windowwidth=document.body.clientWidth
	}
	if (ns6) {
		windowheight=window.innerHeight
		windowwidth=window.innerWidth
	}
	if (ns4) {
		windowheight=window.innerHeight
		windowwidth=window.innerWidth
	}
	x_pos=(windowwidth-tickerwidth)/2
	y_pos=(windowheight-tickerheight)/2
	document.bgColor=backgroundcolor
}
function jump() {
	linkurlloaded=true
}

if (ie) {
	document.write("<div id=\"ticker\" style=\"position:absolute;top:"+y_pos+"px;left:"+x_pos+"px;width:"+tickerwidth+"px;height:"+tickerheight+"px;overflow:hidden\;filter:alpha(opacity=100);-moz-opacity:100\">")
	document.write("</div>")
	document.write("<iframe onLoad=\"jump()\" src="+linkurl+" width=0 height=0></iframe>")
	splitmessage()
}
else if (ns6) {
	document.write("<div id=\"ticker\" style=\"position:absolute;top:"+y_pos+"px;left:"+x_pos+"px;width:"+tickerwidth+"px;height:"+tickerheight+"px;overflow:hidden\;-moz-opacity:100\">")
	document.write("</div>")
	splitmessage()
}
else if (ns4) {
	document.write("<layer name=\"ticker\" width="+tickerwidth+" height="+tickerheight+" top="+y_pos+" left="+x_pos+">")
	document.write("tickercontent")
	document.write("</layer>")
	document.close()
	window.onload=splitmessage
}
else {
	document.location.href=linkurl
}
</script>

</body>
</html>

Step 3: Go to the top of the script-code and set your messages, the size of your ticker and the font-attributes.