Free JavaScript Newsticker

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free JavaScript Newsticker
This free DHTML-newsticker fits seamlessly into your webpage design! Each message can be linked to a different URL. And each messsage can be set to a font, fontcolor and fontsize of its own. Configure the ticker in less than 5 minutes. Absolutely no programming skills required. Crossbrowser: Internet Explorer 5x/6x/7/8x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x.

Configuration:

Step 1: Open your webpage that will display your messagebox. Insert the following code where you wish the newsticker to appear:

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

var text=new Array()
var textlink=new Array()
var texttarget=new Array()

/////////////////////////////////////////////////////////////////////
// START OF
// CONFIGURATION ZONE
////////////////////////////////////////////////////////////////////

// Your messages. Add as many as you like. Experienced webmasters may even embed simple HTML-tags (see samples below)
text[0]="<strong>Welcome to fabulant.com</strong><br> Discover the most exciting place to experience the joy of JavaScript and DHTML! <span style='color:#FF0000'>Download free</span> scripts and use our unique online tools to pimp your website. "

text[1]="<strong>JavaScript</strong><br> is an object-oriented scripting language used to enable programmatic access to objects within both the <span style='text-decoration:underline'>client applications</span> and other applications."

text[2]="<strong>Have fun!</strong><br>JavaScript was influenced by many languages and was designed to look like Java, but to be easier for non-programmers to work with. <em>Have fun!</em>"

// Add a link for each message
// Enter "#" if you don't want to link a message (see sample below)
textlink[0]="http://www.fabulant.com"
textlink[1]="http://www.fabulant.com"
textlink[2]="#"

// Add the target of the link
// Corect values are "_blank","_top", "_self", "_parent" or the name of any frame
texttarget[0]="_blank"
texttarget[1]="_self"
texttarget[2]="_parent"

// Font
var textfont="Arial"

// Font-color
var textfontcolor="#000000"

// Font-color on rollover
var textfontcolorrollover="#ff0000"

// Font-size
var textfontsize=8

// Enter true "true" if you want add an underline, else add "none"
var textdecoration="none"

// Background-color
var textbgcolor="#FDCF15"

// Font-weight. Enter "bold" or "normal"
var textweight="normal"

// Font-style. Enter "italic" or "normal"
var textitalic="normal"

// width and height of ticker (pixels)
var textwidth=240
var textheight=100

// Pause between the Messages (Sekunden)
var textpause=2

// Border-width (write 0 if you don't want to add a border)
var textborder=1

// Border-color
var textbordercolor="#000000"

// Speed (higher=slower)
var speed=40

/////////////////////////////////////////////////////////////////////
// END OF
// CONFIGURATION ZONE
////////////////////////////////////////////////////////////////////
// Do not edit below this line

document.write("<table border=0 cellpadding=0 cellspacing=0>")
document.write("<tr><td width="+textwidth+" height="+textheight+" valign=top>")

var textalign="left"
var textvalign="top"
var textitalicA=""
var textitalicB=""
var textweightA=""
var textweightB=""
var textfontsizeHTML=1
var i_mes=0

var i_substring=0
var i_presubstring=0
var i_text=0
var textcontent=""
var notag=true
var textpresubstring=""
var textaftersubstring=""
textpause*=1000

var browserinfos=navigator.userAgent 
var ie4=!document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ie5=document.getElementById&&document.all&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)

function showtickerNS6() {
	textcontent="<table border=0 cellpadding=4 width="+textwidth+" height="+textheight+"><tr valign="+textvalign+"><td align="+textalign+">"
	textcontent+="<a href='"+textlink[i_text]+"' target='"+texttarget[i_text]+"' style='position:relative; font-family:"+textfont+";text-decoration:"+textdecoration+";font-family:"+textfont+";color:"+textfontcolor+";font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+"' onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
	textcontent+=text[i_text]
	textcontent+="</a>"
	textcontent+="</td></tr></table>"
	document.getElementById("ticker").innerHTML=textcontent
	i_text++
	if (i_text>=text.length-1) {i_text=0}
	var timer=setTimeout("showtickerNS6()", 2*textpause)
}

function showticker() {
	if (i_substring<=text[i_text].length) {
			i_substring++
			i_presubstring=i_substring-1
			if (i_presubstring<0) {i_presubstring=0}
			gettextcontent()
		if (ie4) {
			ticker.innerHTML=textcontent
			var timer=setTimeout("showticker()", speed)
		}
		if (ie5 || opera || ns6) {
			document.getElementById("ticker").innerHTML=textcontent
			var timer=setTimeout("showticker()", speed)
		}
	}
	else {
		clearTimeout(timer)
		var timer=setTimeout("changetext()", textpause)
	}
}

function changetext() {
	i_substring=0
	i_presubstring=0
	i_text++
	if (i_text>text.length-1) {
		i_text=0
	}
	showticker()
}

if (ie5 || ns6 || opera) {
	if (ns6) {
		textwidth-=2*textborder
		textheight-=2*textborder
	}
	document.write('<div ID="roof" style="position:relative;width:'+textwidth+'px;height:'+textheight+'px;border-style:solid;border-width:'+textborder+'px;border-color:'+textbordercolor+';background-color:'+textbgcolor+'">')
	document.write('<span ID="ticker" style="position:absolute;top:0px;left:0px;width:'+textwidth+'px;height:'+textheight+'px;"></span>')
	document.write('</div>')
}

window.onload=showticker
document.write("</td></tr></table>")
</script>

Step 2: Go to the top of the script and configure messages, links, font-attributes, colors, border, size and speed.