Free JavaScript: Patch Color Ticker

» 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

Patch Color Ticker
Enhance your website with a fancy, stylish and very colorful JavaScript ticker, your visitors never have seen before. What's so special about it? The ticker is created by lots of color-patches placed by a random-generator! You define font-colors and background-colors. The result is really unique! Look and Feel can be set withhin the style-tags. Patch Color Ticker is supported by IE6+, FF2+, Safari 3+, Google Chrome 3+ and Opera 8+.

More samples

Black and white only

Many colors. Different colors for font and background

Many font-colors, one background-color

Dark background-color, light font-colors

Configuration:

Step 1: Open your webpage and paste the following code anywhere between <body> and </body>:

<style>

/* boxstyle sets the style of the tickerbox such as border and shodow! */
/* Colors, width and height of the ticker must be set within the script code */
.boxstyle {
	/* Shadow for Internet Explorer 5.5+ */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#CCCCCC');
	/* shadow for Firefox */
	-moz-box-shadow: 5px 5px 5px #CCCCCC;
	/* shadow for Chrome and Safari */
	-webkit-box-shadow: 5px 5px 5px #CCCCCC;
	/* shadow for Opera */
	box-shadow: 5px 5px 5px #CCCCCC;
	
	/* rounded corners for Firefox */
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-bottomright: 15px;
	/* rounded corners for Chrome and Safari */
	-webkit-border-top-left-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	/* rounded corners for Opera */
	border-top-left-radius: 15px;
	border-bottom-right-radius: 15px;
	
	text-align:center;
}

/* a.textstyle sets the font attributes! */
/* Font-colors and background-colors must be set within the script */
a.textstyle {
	font-family: Arial;
	font-size:40pt;
	font-weight:bold;
	text-decoration:none;
}
</style>

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

////////////////////////////////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
////////////////////////////////////////////////////////////////////////////

// the messages. You may add as many messages as you like
var message=new Array("Are you Mary?", "How are you?", "I'm fine!", "Thank you!")

// the links corresponding to the messages above. Must be as many as messages
var textlink=new Array("http://www.hotscripts.com", "http://www.hotscripts.com", "http://www.hotscripts.com", "http://www.hotscripts.com")

// standstill of the messages (seconds)
var standstill=3

// width of ticker (pixels)
var textbox_width=400

// height of ticker (pixels)
var textbox_height=66

// the number of rows of pieces, more than 20 might slow down the script
var y_slices=5

// the number of pieces within a row, more than 50 might slow down the script
var x_slices=40

// background-colors used by the random-color-genarator. You may add as many colors as you like
var bgclrs =new Array("black","#444444")

// font-colors used by the random-color-genarator. You may add as many colors as you like
var clrs =new Array("orange","yellow","red")

// speed of transition between the messages, high value means high speed
var transitionspeed=40

////////////////////////////////////////////////////////////////////////////
// SCRIPT-CONFIGURATION ENDS HERE
////////////////////////////////////////////////////////////////////////////

// Do not change the code below
var x_finalpos=0
var i_clrs=0
var i_bgclrs=0
var y_finalpos=0
var screenheight
var screenwidth
var x_step=new Array()
var y_step=new Array()
var x_randompos=0
var y_randompos=0
var i_loop=0
var max_loop=20
var i_message=1
var i_wholebox=1
var width_slice
var height_slice
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
var pause=20
standstill=1000*standstill

function randomcolors() {
	i_clrs=Math.floor(Math.random()*clrs.length)
	i_bgclrs=Math.floor(Math.random()*bgclrs.length)
	if (i_clrs == i_bgclrs) {
		randomcolors()
	}
	else {
		return
	}
}

document.write("<div id='roofdiv' class='boxstyle' style='position:relative;width:"+textbox_width+"px;height:"+textbox_height+"px;'>")
	document.write("<div id='wholetext' style='position:absolute;width:"+textbox_width+"px;height:"+textbox_height+"px;left:0px;top:0px'>")
	document.write("</div>")
	for (i=0;i<=y_slices-1;i++) {
		for (ii=0;ii<=x_slices-1;ii++) {
    		document.write("<div id='span"+spancounter+"' style='position:absolute;left:0px;width:"+textbox_width+"px;height:"+textbox_height+"px;background-color:white;'></div>")
			spancounter++	
		}
	}
	
document.write("</div>")
spancounter=0

window.onload=setclips
// - End of JavaScript - -->
</script>

Step 2: Go inside the <style>-tags and configure the style of the text and box

Step 3: Go to the lines below the <script>-tag and configure the messages, links colors as well as the width and height of the tickerbox.