Fun of JavaScript: floating messages

» 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

Floating and fadeing message boxes
Draw more attention to your messages by putting them into floating and fadeing 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/7x/8x, FF 2x/3x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x

Configuration:

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

// 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.google.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.yahoo.com"
texttarget[2]="_blank"

// Set the font
var textfont="Arial"

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

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

// Set the font-size
var textfontsize=10

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

// Speed. Higher is faster
var floatingspeed=2

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

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

Step 2: Open your webpage. Go to the top of the script-code and configure the messages, font-attributes and speed.