Now, that worked out OK for moving around one object on a page, but when you get into moving a lot of objects around a page in sequence or doing multiple actions off of multiple events, not
only will your code start ballooning in size (what with having to do multiple
if/then statements every time you access an object), but you're going to get really
sick of typing document.truck.left for every action. And in the Netscape
model, when you nest DIVs, you create an increased hierarchy in the document object
model, which looks like this:
<div id="foo">
<div id="bar">
<div id="sna">
</div>
</div>
</div>
To access foo would be document.foo, but to access bar would be
document.foo.document.bar. And to access sna would be document.foo.document.bar.document.sna.
YIKES!
So to deal both with the increasing size of referencing an object and to prevent
the need for a conditional every time an object is moved, there's a
snazzy little trick you can use. And you're probably more familiar with it
than you realize.
Anyone who's ever worked with JavaScript on a Web page has probably dealt with
opening up a little popup window. So, this little snippet of code will
look mighty familiar:
windowID = window.open('name', 'http://blah.com/');
The window pops open, but you are able to continue to control that window by
using the windowID as a reference to it. You can change the source by saying
windowID.location = 'http://www.taylor.org/', or you can close the
window by saying "windowID.close()". Or do all kinds of stuff to it.
What you have done is to create a reference to the JavaScript object. This same
technique lets you greatly simplify your code for dynamic HTML.
You may have noticed that, in the chart on the last page, there are similarities in the syntax
for most of the positioning properties - they just happen to fall under different
objects. So let's quickly solve this little problem with one JavaScript routine.
<script>
function setup(){
if(document.layers){
daTruck = document.truck;
} else if(document.all) {
daTruck = truck.style;
}
}
</script>
Now the moveIt function can read
function moveIt() {
daTruck.left = parseInt(daTruck.left) - 5;
if(parseInt(daTruck.left) < 0){
daTruck.left = 480;
}
setTimeout('moveIt()', 100);
}
Much smaller, isn't it? So how about a quick assignment? Take the dramatis personae
page that you built yesterday, and have all the DIVs fly in. Yes, I know it's
cheesy and overdone, but it's easy (which is why it's cheesy and overdone).
Then move on to the next page.
next page»
