Inside Technique : DHTMLLib 2.0 : Path Demonstration

If you are familiar with Internet Explorer 4.0's object model, the path demonstration script will look very familiar. In this demonstration we create an image that travels in a simple circle. Without DHTMLLib, to write this to run cross-browser, you would need to recognize the following object model differences between Netscape Navigator and Internet Explorer.

• Netscape uses the layers collection while Internet Explorer uses the all collection.
• You position in Netscape with the top and left properties on the element and the style sub-object's pixelTop and pixelLeft properties in Internet Explorer.

With DHTMLLib, we hide these differences and let you focus on the task at hand, making the image go in a circle. Below is the source code for the path demo. Notice that there is no browser detection in the code. All the browser differences are hidden within the included javascript library.
[View Demo]

<script language="javascript1.2" src="dhtmllib2.js">
  // This library handles the cross-browser magic.
  // You don't have to worry about this
</script>

<script language=javascript1.2>
<!--
    function pathCircle(id) {
      // Locate the element with the specified ID
      el = document.all[id]
      angle = 2 * Math.PI * el.step / 360
      x = parseInt(Math.cos(angle) * el.xradius) 
      y = parseInt(Math.sin(angle) * el.yradius)    
      // Move the element
      el.style.pixelLeft = y + el.yradius
      el.style.pixelTop = x + el.xradius
      el.step+=3
    }
    
    function layout() {
      setup() // initialize DHTMLLib
      var el = document.all.moveMe
      // Store some initial values about the circle on the element
      el.xradius = 175; el.yradius = 100; el.step = 1
      setInterval("pathCircle('moveMe')",1000)
    }    
    window.onload = layout;
// -->
</script>

In the path animation we wrote the code just as if we were programming Internet Explorer 4.0. DHTMLLib builds an object model that is a subset of Internet Explorer 4.0 in Netscape Navigator making it easy to write cross-browser scripts. This subset is defined by the set of functionality supported by Netscape Navigator so you will not be able to do everything you can do in Internet Explorer - but what you can do is written using Internet Explorer's object model.

While DHTMLLib is designed to hide the object model differences, the library by itself is not a perfect solution. You still should have an understanding of both browser's object model and some of the fundamental differences. Next we introduce some background information on both object models.

[The Object Models]

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.