JavaScript Messagebox with fadeing Background

» 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

Messagebox with background fade effect
This script creates a messagebox with an eyecatching background-fade-effect. Add as many messages as you like. Easy configuration of messages, font-attributes, colors, size and border. Internet Explorer 5x/6x/7/8x/9x, Firefox 2x/3x, Opera 7x/8x/9x/10x/11x and Google Chrome 3x/4x/5x/6x/7x/8x.

Configuration:

Step 1: Open your webpage that will display your messagebox. Insert the following code where you wisth the textbox 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

// set your messages. Add as many as you like (you may add additional HTML-tags)
var text=new Array()
text[0]="Thank you for visiting fabulant.com"
text[1]="It's a pleasure to show you some dirty JavaScript tricks."
text[2]="Also we invite you to test the speed of your Browser. <b>Just click here.</b>"

// set the corresponding links 
// If you don't want to link a message just add a "#" instead of an URL
var textlink=new Array()
textlink[0]="http://www.fabulant.com"
textlink[1]="#"
textlink[2]="http://www.fabulant.com/downloadcenter/benchjs/benchjs.html"

// set the corresponding targets 
// Acceptable values are "_blank", "_self", "_top" or the name of any frame
var texttarget=new Array()
texttarget[0]="_blank"
texttarget[1]="_self"
texttarget[2]="_top"

// set the font of the messages
var textfont="Arial"

// set the font-color of the messages
var textfontcolor="#FFFFFF"

// set the rollover-fontcolor of the messages
var textfontcolorrollover="#FF0000"

// set the font-size of the messages (CSS-values)
var textfontsize=9

// set the font backgroundcolor of the textbox
var textbgcolor="#000000"

// set the textweight (normal or bold)
var textweight="normal"

// set the fontstyle (normal or italic)
var textitalic="normal"

// set the width of the textbox (pixels)
var textwidth=398

// set the height of the textbox (pixels)
var textheight=40

// set the pause (seconds)
var textpause=2

// set the width of the border
var textborder=3

// set the color of the border
var textbordercolor="#FF0000"

// set the horizontal alignment of the messages (center, left, right)
var textalign="center"

// set the vertival alignment of the messages (middle, top, bottom)
var textvalign="middle"

// do not edit below this line
var textdecoration="none"
var transparency=100
var transparencystep=2

var x_pos=0
var y_pos=0
var i_text=0
var textsplit=""
var i_textsplit=0
var i_mark=0
var tickercontent
var pausefade=30
textpause*=1000

var oneloopfinished=false

var browserinfos=navigator.userAgent 
var ie=document.all&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=document.getElementById
var opera=browserinfos.match(/Opera/) 
var chrome=browserinfos.match(/Chrome/)  
var browserok=ie||ns4||ns6||opera

function changecontent() {
	getcontent()
	i_text++
	if (i_text>=text.length) {i_text=0}	
	document.getElementById('ticker').innerHTML=content
	fadeout()	
}

function fadein() {
	if (transparency<100){
		transparency+=transparencystep
		if (document.getElementById('tickerbg').filters) {
			document.getElementById('tickerbg').filters.alpha.opacity=transparency
		}
		else {
			document.getElementById('tickerbg').style.opacity=transparency/100
		}
		var fadetimer=setTimeout("fadein()",pausefade)
	}
	else {
		clearTimeout(fadetimer)
		setTimeout("changecontent()",1000)
	}
}

function fadeout() {
	if (transparency>0){
		transparency-=transparencystep
		if (document.getElementById('tickerbg').filters) {
			document.getElementById('tickerbg').filters.alpha.opacity=transparency
		}
		else {
			document.getElementById('tickerbg').style.opacity=transparency/100
		}	
		var fadetimer=setTimeout("fadeout()",pausefade)
	}
	else {
		clearTimeout(fadetimer)
		setTimeout("fadein()",textpause)
	}
}

getcontent()
function getcontent() {
	var tablewidth=textwidth
	var tableheight=textheight
	content="<table width="+tablewidth+" height="+tableheight+" cellpadding=0 cellspacing=0 border=0><tr valign="+textvalign+"><td align="+textalign+">"
	content+="<a href=\""+textlink[i_text]+"\" target=\""+texttarget[i_text]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\" onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
	content+=text[i_text]
	content+="</a></td></tr></table>"
}

document.write("<div id=\"roof\" style=\"position:relative;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textbgcolor+";\">")
	
document.write("<div id=\"tickerbg\" style=\"position:absolute;top:"+-textborder+"px;left:"+-textborder+"px;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+";border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textfontcolor+";overflow:hidden\;filter:alpha(opacity=100);opacity:1\">")
document.write("</div>")

document.write("<div id=\"ticker\" style=\"position:absolute;top:"+-textborder+"px;left:"+-textborder+"px;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+";border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;overflow:hidden\;\">")
document.write("</div></div>")

window.onload=changecontent

</script>

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