Free JavaScript: message-board with a smooth gradient color effect

» 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

JavaScript message-board with a smooth gradient color effect
This free JavaScript creates a message-board with a smooth gradient color effect. It's an eye-catching alternative to the usual news ticker or scroller! You may add as many colors and messages as you like. Each message can be linked. Most style-attruibutes can be set by CSS. Crossbrowser: Internet Explorer 5x/6x/7x/8x, Firefox 3.6 or higher, Google Chrome 4x/5x/6x/7x/8x/9x/10x and Opera 7x/8x/9x/10x/11x (Opera displays a color animation without gradients).

Configuration:

Step 1: Open your webpage that will display your messagebox. Insert the following code wherever you wish the newsticker to be displayed.

<style>
a.textcontentstyle{
	/* Set the font-style of the text */
	/* ATTENTION: background-color must be set within the script below */
	font-family:Arial;
	font-size:10pt;
	color: #000000;
	padding:5px;
	text-decoration:none;
	font-weight:bold;
	color:#000000;
}

.textalignstyle{
	/* Set the alignement of the text */
	text-align:center; 	/* Set the horizontal text-alignement (center or left or right) */
	vertical-align:middle; 	/* Set the vertical text-alignement (middle or top or bottom) */
}

.textboxstyle{
	/* Set the attributes for the text-box */
	/* ATTENTION: width and height must be set within the script below */
	border-style:solid;
	border-width:1px;
	border-color:white;

/* shadow and rounded corners for Firefox */
	-moz-box-shadow: 5px 5px 8px #818181;
	-moz-border-radius-topleft: 25px;
	-moz-border-radius-bottomright: 25px;

/* shadow and rounded corners for Safari and Chrome */
	-webkit-box-shadow: 5px 5px 8px #818181;
	-webkit-border-top-left-radius: 25px;
	-webkit-border-bottom-right-radius: 25px;

/* shadow and rounded corners for Opera */
	box-shadow: 5px 5px 5px #818181;
	border-top-left-radius: 25px;
	border-bottom-right-radius: 25px;
}
</style>

// 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 message= [

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

// Set your messages and the corresponding links below
// Add as many messages and links as you like
{
text : "Download free fun-scripts now.",
linkto : "http://www.fabulant.com"
}, // commra required

{
text : "Create great JavaScript animations.",
linkto : "http://www.fabulant.com"
}, // comma required

{
text : "Pimp your site with hot JavaScript effects.",
linkto : "http://www.fabulant.com"
}, // comma required

{
text : "And please, please be happy don't worry!",
linkto : "http://www.fabulant.com"
} // comma NOT required

]

// Set the width of the textbox (pixels)
var textboxwidth=400

//Set the height of the textbox (pixels)
var textboxheight=40

// Select the background-colors below
// IMPORTANT 1: The script requires three colors at least
// IMPORTANT 2: The last two colors must be the same as the font-color
// IMPORTANT 3: The script requires hexadecimal-values! For instance: enter "#FFFFFF" instead of "white"
var colors=new Array("#FFFFFF","#FFFF00","#FF0000","#000000","#000000")

// Set pause between colors (seconds)
var pausebetweencolors=1

// Set speed (higher=slower)
var speed=30

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

// do not edit code below this line
var i_loopmax=1000
var pausesteps=30
var gradient_effect="horizontal"
var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')
var redcol_1
var redcol_2 
var redcol_1_b
var redcol_2_b 
var greencol_1 
var greencol_2 
var greencol_1_b 
var greencol_2_b
var bluecol_1 
var bluecol_2 
var bluecol_1_b 
var bluecol_2_b
 
var rgbredfrom
var rgbgreenfrom
var rgbbluefrom
var rgbredto
var rgbgreento
var rgbblueto
var rgbrednow
var rgbgreennow
var rgbbluenow

var rgbredfrom_b
var rgbgreenfrom_b
var rgbbluefrom_b
var rgbredto_b
var rgbgreento_b
var rgbblueto_b
var rgbrednow_b
var rgbgreennow_b
var rgbbluenow_b

var colorhexafrom
var colorhexato

var i_step=1
var i_loop=0
var i_colorsA=0
var i_colorsB=1
var i_colorsC=1
var i_colorsD=2

var i_message=0

pausebetweencolors*=1000

var browserinfos=navigator.userAgent.toLowerCase();
var ie4=document.all&&!document.getElementById
var ie5=document.all&&document.getElementById&&!browserinfos.match(/opera/)
var opera=browserinfos.indexOf("opera")!=-1
var chrome=browserinfos.indexOf("chrome")!=-1
var ff36=browserinfos.indexOf("firefox/3.6") !=-1 || browserinfos.indexOf("firefox/.3.6") !=-1 || browserinfos.indexOf("firefox/0.3.6") || browserinfos.indexOf("firefox/3.7") !=-1 || browserinfos.indexOf("firefox/.3.7") !=-1 || browserinfos.indexOf("firefox/0.3.7") || browserinfos.indexOf("firefox/3.8") !=-1 || browserinfos.indexOf("firefox/.3.8") !=-1 || browserinfos.indexOf("firefox/0.3.8") || browserinfos.indexOf("firefox/3.9") !=-1 || browserinfos.indexOf("firefox/.3.9") !=-1 || browserinfos.indexOf("firefox/0.3.9") || browserinfos.indexOf("firefox/4") !=-1 || browserinfos.indexOf("firefox/.4") !=-1 || browserinfos.indexOf("firefox/0.4") !=-1;

var ns4=document.layers
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/opera/)

var browserok=ie4||ie5||ns4||ns6||opera||ff36||chrome

function translateintorgb() {

document.write("<div id='textbox' class='textboxstyle' style='position:relative;width:"+textboxwidth+"px;height:"+textboxheight+"px;'>")
document.write("<div style='position:absolute;left:0px;top:0px;width:"+textboxwidth+"px;height:"+textboxheight+"px;'><table width="+textboxwidth+" height="+textboxheight+"><tr><td id='textalign' class='textalignstyle'><a href='"+message[0].linkto+"' id='textcontent' class='textcontentstyle'>"+message[0].text+"</a> </td></tr></table></div>")
document.write("</div>")

if (browserok) {
	window.onload=translateintorgb
}
</script>

Step 2: Set the values within the style-zone and within the script-code according to the instructions.