|
This is typical DHTML loading. DHTML Did you notice the table begins at the top and offscreen? We have added a function in the script called placement() To get the browser to place the table off the screen we use an "onload" command, onload="placement()". It simply means "when the page is loaded...." perform the function specified. In this case placing the table at 200 pixels left and 120 pixels above your screen. function placement(){ document.all.table1.style.posLeft=200; document.all.table1.style.posTop=-120; setTimeout("move1()", 2000) } The last line in this function is the setTimeout("move1()", 2000) We saw that in the last lesson used to cycle a function. But in function placement() it is used as a timer to delay changing functions The first function is placing the table off the screen. The onload=placement() starts the script and places the table, but without another function the table will just sit there static and out of sight. So how do we get the table from its static position out of sight and get it moving? The timer waits 2 seconds, then loads move1() function move1() { if (document.table1.style.posTop <= 50) document.table1.style.posTop += 2; setTimeout("move1()", 20) } If table one is less than 50pixels from the top then move it 2 pixels every 20 miliseconds till it reaches 50 pixels. We have left out the "else" command because we dont want it repositioned once the table reaches the limit. We want it to just stop. This forms the basis of DHTML loading. Though we use only one div in our current script, it is possible to use many different "chunks" of content and have them move in any way you see fit. The key is linking the functions together, and the setTimeout does this nicely. The next page uses what has been learned to this point and takes it to an extreme. See if you can "read" it.
|