Writing DHTML

Here is a complete webpage that shows a bouncing box. You can open the webpage by clicking here. This webpage works on both Internet Explorer 4 and Netscape 4.7.

The first three segments are the usual html, head and title tags:

<html>

<head>

<title>A Sample Page</title>

The following section contains the Cascading Style Sheet (CSS) information. The #divMain means to apply the style only to the DIV <div id=#divMain>, while the p means apply the style to all paragraphs, unlesss overridden.

<style type="text/css">
#divMain {                 
position: absolute; 		
top: 100; left: 100; 
background-color: green;}  
p {                        
font: bold 24pt arial;  	 
color: palegoldenrod;}

</style>

Next comes the script. It's pretty long, but only because of the compatibility checks. The idea behind it is really simple. All the script does is move divMain by a few pixels (DX and DY) every few milliseconds (DT).

<script language="JavaScript1.2">
/* define variables */
var X = 100; Y = 100; DX = 10, DY = 17, DT = 50;
var RECT = new MakeRect(50,50,200,200);
var MyBouncer;
/*check if netscape or internet explorer*/
var nn=document.layers ? 1 : 0;
var ie=document.all ? 1 : 0;   

/* start netscape bugfix*/
if (nn) { window.onResize = DoReload; } 

function DoReload()
{document.location = document.location;}
/* end netscape bugfix*/

/* function defines a rectange: something that
 * has sides.
 */
function MakeRect(left,top,bottom,right)
{ this.left = left; this.top = top; 
  this.bottom = bottom; this.right = right; }

/* function defines a bouncing object: something
 * with a name, speed dx/dt and dy/dt, the ability
 * to DoBounce.
 */
function MakeBouncer(objname, divname)
{
 	this.objname = objname;
 	this.divname = divname;
	this.dx = DX;
	this.dy = DY;
	this.dt = DT;
 	this.GetTop = div_top;
	this.GetLeft = div_left;
	this.Move = div_move;
	this.MoveBy = div_moveby;
	this.DoBounce = Bouncer_DoBounce;
	this.Move(X,Y);
}

/*********************************************
 * the next few functions just get and set   *
 * the position of a DIV.                    *
 *********************************************/
function div_top()
{
    if (ie) dt=document.all[this.divname].style.pixelTop;
    else if (nn) dt=document.layers[this.divname].top;
    return dt;
}
function div_left()
{
    if (ie) dl = document.all[this.divname].style.pixelLeft;
    else if (nn) dl = document.layers[this.divname].left;
    return dl;
}
function div_move(newleft, newtop)
{
    if (nn) {
        document.layers[this.divname].left = newleft;
        document.layers[this.divname].top = newtop;
    }
    if (ie) {
        document.all[this.divname].style.left = newleft;
        document.all[this.divname].style.top = newtop;
    }
}
function div_moveby(left, top)
{
    if (nn) {
        document.layers[this.divname].left 
        = document.layers[this.divname].left + left;
        document.layers[this.divname].top 
        = document.layers[this.divname].top + top;
    }
    if (ie) {
        document.all[this.divname].style.left
        = document.all[this.divname].style.pixelLeft + left;
        document.all[this.divname].style.top 
        = document.all[this.divname].style.pixelTop + top;
    }
}

/* this function moves the DIV, and checks if it is
 * outside the rectangle. if so, it reverses the direction
 * of the div by changing the sign of dx or dy. It executes
 * every dt seconds by calling itself with setTimeout.
 */
function Bouncer_DoBounce()
{
 	this.MoveBy(this.dx, this.dy);
	
	if (this.dx > 0)
	{ if(this.GetLeft() > RECT.right)
	  {this.dx = -1*this.dx;}
	}
	else if(this.GetLeft() < RECT.left)
	  {this.dx = -1*this.dx;}
	
	if (this.dy < 0)
	{ if(this.GetTop() < RECT.top) 
	  {this.dy = -1*this.dy;}
	}
	else if(this.GetTop() > RECT.bottom)
	  {this.dy = -1*this.dy;}
	
	setTimeout(this.objname +".DoBounce()", this.dt);
}

/* this function puts it all together: first, make a
 * bouncing object; then, make it bounce!
 * Note: JSMain() is not a special name; it was chosen
 * out of habit :). 
 */
function JSMain()
{
 	MyBouncer = new MakeBouncer('MyBouncer', 'divMain');
	MyBouncer.DoBounce();
}
</script>

</head>

This looks like ordinary HTML, except for the BODY tag. The onload="JSMain" means when the document body loads (load event), the function JSMain is run.

<body onload="JSMain()">
<div id="divMain">
<p>Bounce ...</p>
</div>
</body>

</html>

That's it! A copy of the file in html is downloadable here. If you want to know more about CSS, HTML and scripting standards, visit www.w3.org or www.htmlhelp.com.

Back: DHTML Dissected | Next: Links

DHTML Contents

Writing DHTML