DHTML Explained

<center><spacer type=block height=200><br /> <font color=red size=7>WeBTV Bug!! <p>RELOAD PAGE</font></center>

DHTML Explained

by SimplySally

Script by tom357mag

There are five parts to this script
to make our objects move.

document.all.one.style.posTop=-400;

This part sets the object off the screen.
In this case our div is 400 pixels above the screen.


function move1() {
document.all.one.style.posTop += 5;
if (document.all.one.style.posTop < 100) {
setTimeout("move1()", 50); }
else { setTimeout("move2()", 200); }

This section defines the movement.

Div one, will move 5 pixels every 50 milliseconds
until it is 100 pixels down
from the top of the screen.
Lowering the move time from 50 will speed the action.

When it reaches 100 pixels down our second div
will move in 200 milliseconds.
Lowering this number will make the objects move closer together, timewise.

<style type="text/css"> 
#one { position:absolute; z-index:1; left:10; } 


This is our friend positioning CSS.

We know our div is going to start 400 pixels above the screen.

Then it will move down as we specified.

The CSS sets the placement of our div across the screen.
In this case, our div will come down 10 pixels from the left.


4. onLoad="bgn()">

This tells the browser when to commence the action.

In this case upon loading the page.


5.<div id="one">
<table bgcolor="green"border="3">
<tr><td bgcolor=000066 height=40 width=40> 
</td></tr></table> 
</div> 


This is our div or object to be moved.

The div can be an image, table, gradtable,
audioscope, or a combination of any of them.



Now, let's see those tables moving!"




<html><head><title>Code for Five objects in succession.
</title> <script> 
/* presets the objects above the top of the screen. this is needed for 2.7 up?grade   */
function bgn() {
document.all.one.style.posTop=-400;
document.all.two.style.posTop=-400;
document.all.three.style.posTop=-200;
document.all.four.style.posTop=-200;
document.all.five.style.posTop=-200
move1()
}
/*tell object one to move down in 5px steps unitl it is 325 px from top. */
function move1() {
document.all.one.style.posTop += 5;
if (document.all.one.style.posTop < 325) {
/* make a step every 50 milliseconds*/
setTimeout("move1()", 50); }
/*after reaching 325px go to function move2() in 200 milliseconds*/
else { setTimeout("move2()", 200); } 
} 
function move2() {
document.all.two.style.posTop += 5;
if (document.all.two.style.posTop < 325) {
setTimeout("move2()", 50); }
else { setTimeout("move3()", 200); } 
} 
function move3() {
document.all.three.style.posTop += 5;
if (document.all.three.style.posTop < 325) {
setTimeout("move3()", 50); }
else { setTimeout("move4()", 200); } 
} 
function move4() {
document.all.four.style.posTop += 5;
if (document.all.four.style.posTop < 325) {
setTimeout("move4()", 50); }
else { setTimeout("move5()", 200); } 
} 
function move5() {
document.all.five.style.posTop += 5;
if (document.all.five.style.posTop < 325) {
setTimeout("move5()", 50); }
} 
</script>
<style type="text/css"> 
#one { position:absolute; z-index:1; left:10; } 
#two { position:absolute; z-index:1; left:494; } #three { position:absolute; z-index:1; left:50; } #four { position:absolute; z-index:1; left:50; } #five { position:absolute; z-index:1; left:50; } </style> 
</head>
<body bgcolor="#000000" text="#ffd700" onLoad="bgn()"> 
<noframes><center><spacer type=block height=200><br />
<font color=red size=7>WeBTV Bug!!  <p>RELOAD PAGE</font></center></noframes> 
<div id="one">
<table border="0">
<tr><td bgcolor=ffffff height=40 width=40> 
</td></tr></table> 
</div> 
<div id="two">
<table border="0">
<tr><td bgcolor=ffffff height=40 width=40> 
</td></tr></table> 
 </div> 
<div id="three">
<table border="0">
<tr><td bgcolor=ffffff height=40 width=444> 
</td></tr></table> 
</div>
<div id="four">
<table border="0">
<tr><td bgcolor=ffffff height=40 width=444> 
</td></tr></table> 
</div>
<div id="five">
<table border="0">
<tr><td bgcolor=ffffff height=40 width=444> 
</td></tr></table> 
</div>
</body></html>








TooTs