![]() |
Design | HTML | Dynamic HTML | Stylesheets | Graphics & Fonts | Multimedia | Browsers | Java | JavaScript | |
|
![]() |
![]() |
Page 5: A Trick for Accessing Objects |
||
More on
dynamic_html - - - - - - - - - - Taylor's Dynamic HTML
Tutorial - Day 1 Taylor's Dynamic HTML Tutorial - Day
2 Taylor's Dynamic HTML Tutorial - Day
4 Taylor's Dynamic HTML Tutorial - Day
5 |
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. Page 1: Let's Look at Scripting |
||
Want to print this
article? Use this version. Questions? Comments? Talk to the monkey. The Webmonkey Secret Hideout |
![]() Copyright © 1994-98 Wired Digital Inc. All rights reserved. |