Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : DHTMLLib 2.0
By Scott Isaacs

Update - December 24, 1999
- Fixed event handling bug and made event bubbling more robust
- Updated version number to 2.10

Update - December 5, 1999
- Added onscroll support for Macintosh Internet Explorer 4.x
- Fixed key mask mappings in Netscape Navigator (thanks Sada)

Update - March 29, 1999
- Added Macintosh Internet Explorer 4.x Usage Notes
- Added Macintosh Test Variable
- Removed script-errors if library runs in a 3.x browser
- Fixed downloading issue with Navigator 4.5
- Fixed script errors for pages that contain no positioned elements.

Update - July 21, 1999
- Add defaults for the offsetWidth and contains() method.

Update - September 12, 1999
- Fix "return value not defined" error in certain point releases of Netscape 4.x.

Prior to the 4.0 browsers, Internet Explorer and Netscape Navigator exposed very similar but very limited object models for manipulating the page. The primary difference was the lack of an images collection in Internet Explorer 3.x. With the 4.0 browsers, Netscape's and Microsoft's implementations diverged. Netscape's model evolved to allow a little more control over the page by allowing positioned elements to be manipulated. Microsoft, on the other hand, expanded to provide control to every element on the page. To further confuse matters, both companies called their new implementations Dynamic HTML. We have created DHTMLLib to help you design cross-browser DHTML pages without requiring you to understand the complete details of the different object models.

When authoring cross-browser DHTML the most important point to remember is that cross-browser scripting is a combination of compromise and testing. We have tested this section on the 4.x Window versions of Netscape Navigator and Internet Explorer. These examples may not run on the other platforms. (The lack of testing on other platforms is due to our lack of hardware. We are acquiring a Macintosh later this month to do further tests). For now, if you are running on other platforms, you can help us by letting us know what demos don't run, the errors you see, plus any other information that will help us locate the issue.

Different from most compatibility layers that wrap both browsers in a third object model, we built our compatibility layer to allow you to script DHTML using a subset of Internet Explorer's object model. If you are familiar with Internet Explorer's DHTML, you will find DHTMLLib a very natural programming model. If not, don't worry as the principals behind Internet Explorer's object model work very similar to the existing 3.0 browser's object models. The primary difference is Internet Explorer opens up the entire document to scripting. With DHTMLLib, wherever there is an overlap in functionality between Internet Explorer and Netscape Navigator, you can use Internet Explorer's object model to manipulate both browsers. All this without requiring you to use any cross-browser detection.

To help prove our point, we start with a simple path animation demonstration. In this demonstration we show you how to animate an image in a circle. The script to do the animation uses JavaScript to manipulate the position of a DIV element containing the image.

Following the demo, we give you a brief introduction to the scripting models exposed by Internet Explorer and Netscape Navigator. In this introduction we explain some of the object model differences and issues related to using the new features. While DHTMLLib helps hide the object model differences, your ability to understand both models is still useful to understand what cross-browser scenarios are possible.

[Continue with Demonstration]