Bouncing Widget

This is how to make a bouncing widget that can bounce in the visible window or bounce all over the document. Change the showInvisible to true or false to control the bounds of the bounce.
Source for ball.html:

<HTML>
<HEAD>
<TITLE>Bouncing Widget</TITLE>
<Script language=Javascript>
<!-- Activate Cloaking
/*  ================== Bouncing Widget ==================
	This script is modified from a IE only script for
	bouncing a ball around the window in "Dynamic HTML"
	by the Microsoft Press.
	www.havenofbliss.com Wyatt Houtz 11/11/2001
    ===================================================== */

//Change this value to true to have it bounce everywhere 
//or false for just in the visible window
var showInVisible = false;  

//Increase this value to slow down bouncing widget
var speed = 25;

//Change These Values to change how far the image moves
//Each time it updates
var offsetx = 4;
var offsety = 5;

var x = 0;
var y = 0;
var an = navigator.appName;
var cWidth, cHeight, lScroll, rScroll, oWidth, oHeight;


function bounceIt() {
	if (an != "Netscape") { //Not Netscape
		//Widget Size
		oWidth = document.all.bounce.offsetWidth; 
		oHeight = document.all.bounce.offsetHeight;

		//Visible Window Size
		cWidth = document.body.clientWidth;  
		cHeight = document.body.clientHeight;

		if (showInVisible) {
			//Increase to Document Size
			if (document.body.scrollHeight > cHeight) 
				cHeight = document.body.scrollHeight;
			if (document.body.scrollWidth > cWidth) 
				cWidth = document.body.scrollWidth;
		    }

	    	lScroll = document.body.scrollLeft;
		dScroll = document.body.scrollTop;
	} 
	else { //Netscape
		oWidth = document.bounce.clip.width; //Widget Size
		oHeight = document.bounce.clip.height;
 		cWidth = window.innerWidth; //Visible Window Size
		cHeight = window.innerHeight;
		if (showInVisible) {
			//Increase to Document Size
			//add 20 to account for scroll bars in NS
			if (document.height > cHeight) 
				cHeight = document.height + 20; 
			if (document.width > cWidth) 
				cWidth =  document.width + 20;
		}

		lScroll = pageXOffset;
		dScroll = pageYOffset;
	}

	x += offsetx;
	y += offsety;
	if (showInVisible) {
		if ((x + oWidth >= cWidth) || (x <= 0)) {
			offsetx = -offsetx;
		}
		if ((y + oHeight >= cHeight) || (y <= 0)) {
			offsety = -offsety;
		}
	}
	else {
		if ((x + oWidth >= cWidth + lScroll) || (x <= lScroll)) {
			offsetx = -offsetx;
			if (x <= lScroll)
				x = lScroll;
			else
				x = cWidth - oWidth + lScroll;
		}
		if ((y + oHeight >= cHeight + dScroll) || (y <= dScroll)) {
			offsety = -offsety;
			if (y <= dScroll)
				y = dScroll;
			else
				y = cHeight - oHeight + dScroll;
		}

	}
	if (an != "Netscape") {
		document.all.bounce.style.posLeft = x;
		document.all.bounce.style.posTop = y;
	}
	else {
		document.bounce.left = x;
		document.bounce.top = y;
	}
}

// De-activate Cloaking -->
</Script>
</HEAD>
<BODY ONLOAD="window.tm = setInterval('bounceIt()', speed);" ONUNLOAD="clearInterval(window.tm);" bgcolor="#FFFFFF">
<!-- Put all the moving content between these DIVs // -->
<div id="bounce" style="position:absolute; z-index:2; left: 0px; top: 0px">
<IMG SRC="http://www.havenofbliss.com/images/whbball.gif">
</div>

<a href="javascript:void(0);" onclick="javascript:showInVisible = true;">Bounce Everywhere</a><br>
<a href="javascript:void(0);" onclick="javascript:showInVisible = false;">Bounce Only in Window</a><br>

<!-- HTML GOES HERE -->

</BODY>
</HTML>
Back