DHTML - JavaScript Floating and Fading Message Boxes Code

hide me

DHTML - JavaScript Floating and Fading Message Boxes Code
Draw more attention to your messages by putting them into floating and fading message boxes. You may add as many linkable messages. Easy configuration of text, font, font size, font color, font weight, background color and border. IE 5x/6x, NS4x/6x/7x.

Create more than 20 different text animations
Text Wheel is part of the new unique Text Animator. Text Animator allows you to create 20 different text animations for your web pages in no time. You can view, check and edit all effects while you are creating them. Text Animator generates the finished code for your personalized text animations.

Configuration:

Step 1: Open the web page that will display your message boxes. Use a simple text editor such as NotePad or WordPad. Frontpage, Dreamweaver, GoLive or Word are not recommended. Insert the following code right below the <body>-tag. :

<SCRIPT>
// CREDITS:
// Floating and fadeing message boxes
// By Urs Dudli and Peter Gehrig
// Copyright (c) 2003 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com & http://www.designerwiz.com
// fabulant01@hotmail.com
// 8/6/2003

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

// CONFIGURATION:
// Go to http://www.fabulant.com
// and create your own text animation
// with our new Text Factory.

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

/////////////////////////////////////////////////////////////////////
// EDIT VALUES BELOW THIS LINE

// Add or delete as many floating message boxes as you like. 
// Just proceed as shown below (this sample creates three message boxes)

// Set the text, link and the target for your first floating message box
text[0]="Hello you"
textlink[0]="http://www.fabulant.com"
texttarget[0]="_blank"

// Set the text, link and the target for the second floating message box
text[1]="Welcome"
textlink[1]="http://www.snapbuilder.com"
texttarget[1]="_blank"

// Set the text, link and the target for the third floating message box
text[2]="Have a nice time"
textlink[2]="http://www.designerwiz.com"
texttarget[2]="_blank"

// Set the font
var textfont="Arial"

// Set the font-weight to "bold" or "normal"
var textweight="bold"

// Set the rollover-color
var textfontcolorrollover="#ff0000"

// Set the font-size
var textfontsize=12

// Set the font-color
var textfontcolor="#000000"

// Set the background-color
var textbgcolor="#dddddd"

// Set the border-color 
var textbordercolor="#ff9000"

// Set the border-width 
var textborder=4

// DO NOT EDIT VALUES BELOW THIS LINE
/////////////////////////////////////////////////////////////////////

getcontent()
function getcontent() {
	for (i=0;i<=numberofmessages;i++) {
		var content=""
		if (ie || ns6) {	
			content="<table cellpadding="+textborder+" cellspacing=0 border=0><tr valign="+textvalign+"><td align="+textalign+">"
			content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\" 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]
			content+="</a></td></tr></table>"
		}
		else {	
			content="<table cellpadding="+textborder+" cellspacing=0 bgcolor="+textbgcolor+" border="+textborder+"><tr valign="+textvalign+"><td align="+textalign+">"
			content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\">"
			content+=textweightA
			content+=textitalicA
			content+="<font face=\""+textfont+"\" size="+textfontsizeHTML+" color=\""+textfontcolor+"\">"
			content+=text[i]
			content+="</font>"
			content+=textitalicB
			content+=textweightB
			content+="</a></td></tr></table>"
		}
		spancontent[i]=content
	}
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovement() {
	checkposition()
	movepictures()
    timer=setTimeout("checkmovement()",tempo)
}

}

function checkposition() {
	if (ie) {
		for (i=0;i<=numberofmessages;i++) {             
			var thisspan=eval("document.all.span"+i+".style")
			if (thisspan.posLeft>marginright-boxwidth[i]-floatingspeed) {
				thisspan.posLeft-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.posLeft<marginleft) {
				thisspan.posLeft+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.posTop>marginbottom-boxheight[i]-floatingspeed) {
				thisspan.posTop-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (thisspan.posTop<margintop) {
				thisspan.posTop+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
	if (ns4) {
		for (i=0;i<=numberofmessages;i++) {             
			var thisspan=eval("document.span"+i)
			if (thisspan.left>marginright-boxwidth[i]-floatingspeed) {
				thisspan.left-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.left<marginleft) {
				thisspan.left+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.top>marginbottom-boxheight[i]-floatingspeed) {
				thisspan.top-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (thisspan.top<margintop) {
				thisspan.top+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
	
	if (ns6) {
		for (i=0;i<=numberofmessages;i++) {             
			var thisspan=document.getElementById('span'+i).style
			var leftx=parseInt(thisspan.left)
			var topy=parseInt(thisspan.top)
			if (leftx>marginright-boxwidth[i]-floatingspeed) {
				thisspan.left=leftx-Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (leftx<marginleft) {
				thisspan.left=leftx+Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (topy>marginbottom-boxheight[i]-floatingspeed) {
				thisspan.top=topy-Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (topy<margintop) {
				thisspan.top=topy+Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
}

if (ie || ns6) {
	for (i=0;i<=numberofmessages;i++) {
    	document.write("<span id='span"+i+"' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=0);-moz-opacity:0;border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textbgcolor+";'></span>")
    	document.close()
	}
}
if (ns4) {
	for (i=0;i<=numberofmessages;i++) {
    	document.write("<layer name='span"+i+"' left=0 top=0>"+spancontent[i]+"</layer>")
    	document.close()
	}
}
window.onload=setValues
</script>
<div style="position:absolute;top:0px;left:0px;visibility:hidden">hide me</div>

IMPORTANT: do not paste the code into table cells or between <div> tags or <span> tags!

Step 2: Open your web page. Go to the top of the script code and configure the messages and font attributes

Step 3: Have fun!

Download 500 free copy-and-paste scripts

Like this code snippet? Why not share it with others by copying this page URL: