« »

Simple DHTML-ticker with cool last-letter-animation. Add as many messages as you like. Each message can be linked to a different URL. Easy configuration of messages, tickersize, tickerposition, speed and font-attributes (such as fontcolor, fontfamily, fontsize, fontweight and more). CROSSBROWSER (works smoother with Internet Explorer).

Label: Simple DHTML-ticker with unique last-letter-animation

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT language=javaScript>
<!-- Beginning of JavaScript -
// Simple DHTML-ticker with last-letter-animation

// 	Configure your messages. You may add as many messages as you like.
var message=new Array()
message[0]="JavaScriptBank.com - Bank of over 2000+ free JavaScript"

// set a link for each meassage
var messagelink=new Array()
messagelink[0]="http://JavaScriptBank.com"


// set a target for each messagelink. Accepted values: '_blank', '_top',
// '_parent', '_self' or the name of your frameset
var linktarget=new Array()
linktarget[0]="_blank"
linktarget[1]="_blank"
linktarget[2]="_blank"

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

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

// width of the ticker
var tickerwidth=180

// height of the ticker
var tickerheight=200

// distance from the messagetext to the tickermarrgin (pixels)
var tickerpadding=10

// borderwidth of the ticker (pixels)
var borderwidth=1

// font-family
var fnt="Verdana"

// font-size of the text
var fntsize=9

// font-size of the last letter of the ticker
var fntsizelastletter=10

// font-color of the text
var fntcolor="FFFF00"

// font-color of the last letter of the ticker
var fntcolorlastletter="red"

// font-weight. Set a value between 1 to 9 to adjust the boldness
var fntweight=4

// backgroundcolor
var backgroundcolor="black"

// standstill between the messages (microseconds)
var standstill=2000

// speed (a higher value will slow down the ticker)
var speed=40

// Do not edit the variables below
var i_substring=0
var i_presubstring=0
var i_message=0
var messagecontent=""
var messagebackground=""
var messagepresubstring=""
var messageaftersubstring=""
fntweight=fntweight*100

function initiateticker() {
	getmessagebackground()
	if (document.all) {	
		document.all.ticker.style.posLeft=leftposition
		document.all.ticker.style.posTop=topposition
		document.all.tickerbg.style.posLeft=leftposition
		document.all.tickerbg.style.posTop=topposition
		tickerbg.innerHTML=messagebackground
		showticker()
	}
	if (document.layers) {
		document.tickerbg.document.write(messagebackground)
		document.tickerbg.document.close()
		document.ticker.left=leftposition
		document.ticker.top=topposition
		document.tickerbg.left=leftposition
		document.tickerbg.top=topposition
		showticker()
	}
}

function getmessagebackground() {
		messagebackground="<table border="+borderwidth+" width="+tickerwidth+" height="+tickerheight+"><tr><td valign=top bgcolor='"+backgroundcolor+"'>"
		messagebackground+="hello</td></tr></table>"
}

function getmessagecontent() {
		messagepresubstring=message[i_message].substring(0,i_presubstring)
		messageaftersubstring=message[i_message].substring(i_presubstring,i_substring)
		messagecontent="<table border=0 cellpadding="+tickerpadding+" width="+tickerwidth+" height="+tickerheight+"><tr><td valign=top>"
		messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsize+"pt;font-weight:"+fntweight+"'>"	
		messagecontent+="<a href='"+messagelink[i_message]+"' target='"+linktarget[i_message]+"'>"
		messagecontent+="<font color='"+fntcolor+"'>"
		messagecontent+=messagepresubstring
		messagecontent+="</font>"
		messagecontent+="</a>"
		messagecontent+="</span>"
		messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsizelastletter+"pt;font-weight:900'>"	
		messagecontent+="<a href='"+messagelink[i_message]+"' target='"+linktarget[i_message]+"'>"
		messagecontent+="<font color='"+fntcolor+"'>"
		messagecontent+=messageaftersubstring
		messagecontent+="</font>"
		messagecontent+="</a>"
		messagecontent+="</span>"
		messagecontent+="</td></tr></table>"
}

function showticker() {
	if (i_substring<=message[i_message].length-1) {
			i_substring++
			i_presubstring=i_substring-1
			if (i_presubstring<0) {i_presubstring00}
			getmessagecontent()
		if (document.all) {
			ticker.innerHTML=messagecontent
			var timer=setTimeout("showticker()", speed)
		}
		if (document.layers) {
			document.ticker.document.write(messagecontent)
			document.ticker.document.close()
			var timer=setTimeout("showticker()", speed)
		}
	}
	else {
		clearTimeout(timer)
		var timer=setTimeout("changemessage()", standstill)
	}
}

function changemessage() {
	i_substring=0
	i_presubstring=0
	i_message++
	if (i_message>message.length-1) {
		i_message=0
	}
	showticker()
}

// - End of JavaScript - -->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<BODY onload=initiateticker()>
<DIV id=tickerbg style="POSITION: absolute"></DIV>
<DIV id=ticker style="POSITION: absolute"></DIV>
</BODY>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->