DHTML Explained 2

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

DHTML Explained~2

by SimplySally

Script by tom357mag

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

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

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


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

This section defines the movement.

Div one, will move 5 pixels every 50 milliseconds
until it is 10 pixels from the left side of the screen.
Lowering the move time from 50 will speed the action.

When it reaches 10 pixels from the left 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; top:0; } 


This is our friend positioning CSS.

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

Then it will move across as we specified.

The CSS sets the placement of our div from the top of the screen.
In this case, our div will be 0 pixels from the top.


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> 
function bgn() {
document.all.one.style.posLeft=-400;
document.all.two.style.posLeft=-400;
document.all.three.style.posLeft=-500;
document.all.four.style.posLeft=-550;
document.all.five.style.posLeft=-500; {
move1()}
}
function move1() {
document.all.one.style.posLeft += 5;
if (document.all.one.style.posLeft < 10) {
/* make a step every 50 milliseconds*/
setTimeout("move1()", 50); }
else { setTimeout("move2()", 200); } 
} 
function move2() {
document.all.two.style.posLeft += 5;
if (document.all.two.style.posLeft < 494) {
setTimeout("move2()", 50); }
else { setTimeout("move3()", 200); } 
} 
function move3() {
document.all.three.style.posLeft += 5;
if (document.all.three.style.posLeft < 45) {
setTimeout("move3()", 50); }
else { setTimeout("move4()", 200); } 
} 
function move4() {
document.all.four.style.posLeft += 5;
if (document.all.four.style.posLeft < 45) {
setTimeout("move4()", 50); }
else { setTimeout("move5()", 200); } 
} 
function move5() {
document.all.five.style.posLeft += 5;
if (document.all.five.style.posLeft < 455) {
setTimeout("move5()", 50); }
} 
</script>
<style type="text/css"> 
#one { position:absolute; z-index:1; top:0; } 
#two { position:absolute; z-index:1; top:0; } #three { position:absolute; z-index:1; top:50; } #four { position:absolute; z-index:1; top:100; } #five { position:absolute; z-index:1; top:150; } </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