Build data-base-driven sites without coding, Try Drumbeat.



Design | HTML | Dynamic HTML | Stylesheets | Graphics & Fonts | Multimedia | Browsers | Java | JavaScript | Perl | Backend | E-business |

webmonkey/dynamic_html/

Page 5: A Trick for Accessing Objects

More on dynamic_html
- - - - - - - - - -

Taylor's Dynamic HTML Tutorial - Day 1
Dynamic HTML is how Netscape's and Microsoft's 4.0 browsers are pushing the Web to new limits. In the first of five parts, Taylor looks at what dHTML is all about and what skills you need to code for it. 9 Mar 1998

Taylor's Dynamic HTML Tutorial - Day 2
Taylor digs into dynamic HTML, showing you the basics of using CSS-P to lay out your pages. He even looks at the elusive z-index. 10 Mar 1998

Taylor's Dynamic HTML Tutorial - Day 4
Taylor has gone through the dynamic HTML basics, and today he shows you some practical dHTML to spiff up your site. 12 Mar 1998

Taylor's Dynamic HTML Tutorial - Day 5
The long road to dHTML mastery is over ... or has it just begun? In this final day of his five-part tutorial, Taylor looks at the most common problems you're apt to have and how to get around them. 13 Mar 1998

<advertisement>
Click here to know what other Web developers think
</advertisement>


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
Page 2: Syntax: Microsoft vs. Netscape
Page 3: Make It Work in Both Browsers
Page 4: How the Script Works
Page 5: A Trick for Accessing Objects
Page 6: Make the Monkeys Chase One Another

Want to print this article? Use this version.

Questions? Comments? Talk to the monkey.

The Webmonkey Secret Hideout



[W]Wired Digital offers HotWired, Wired News, HotBot, Wired magazine online, Suck, LiveWired, Cocktail, The Rough Guide, and NewsBot.

Copyright © 1994-98 Wired Digital Inc. All rights reserved.