DHTML JavaScript Intro Ticker with Fade Effect and Preload Feature Code

DHTML JavaScript Intro Ticker with Fade Effect and Preload Feature Code
This new intro ticker combines an eye catching fade effect with a very useful preload feature. While your visitors are reading your messages the next web page will be preloaded and cached. After preloading the intro ticker automatically stops and opens the preloaded web page. Cross-browser (IE4x/5x/6x ticker with fade effect and preload feature, NS6x ticker with fade effect, NS4x ticker).

Introticker demo
Click here to test intro ticker

Configuration:

Step 1: Open an empty page with your text editor (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>
<meta NAME="keywords" content="DHTML, JavaScript, ticker, load, fade, message, download, free, samples, applet">
<meta NAME="description" content="This new intoticker 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 intoticker 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).">
</head>
<body>
<script language="JavaScript" type="text/javascript">

// CREDITS:
// Introticker with fade-effect and preload-feature
// by Peter Gehrig and Urs Dudli
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com & http://www.designerwiz.com
// fabulant01@hotmail.com
// 8/20/2002

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 
// where this script will be running.

// 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://corps.24funclick.hop.clickbank.net"

// 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.

Download 500 free copy-and-paste scripts

Like this code snippet? Why not share it with others by copying this page URL: