Categories
Just Shelley

X-Objects Introduction

Copy found on Wayback Machine.

Since Dynamic HTML was first introduced in 1997, I’ve always provided code that allows DHTML to be used with the two most popular browsers: Netscape’s Navigator and Microsoft’s Internet Explorer. To make cross-browser DHTML easier to work with, I created a set of cross-browser objects, which I’ve used for all of my DHTML effects.

These objects have now been updated to work with IE 6.0, Netscape 6.x, and the DHTML that should be supported with Mozilla 1.0 when it releases in 2002.

Cross-Browser out…cross-DOM in

Netscape 6.x is a complete re-architecture of the older 4.x browser. Originally the Netscape folks were incorporating new technologies such as CSS and XML into the existing Navigator, and were planning on rolling this out as Navigator 5.0. However, last year these same folks decided not to try and hold onto an architecture that just wasn’t compatible with new Web standards. Instead, they, and the Mozilla Group, started fresh, re-building the browser layout engine from the ground up.

Because Netscape 6.x is built from the ground up, and based on current and upcoming standards, you’re going to find that many of the features supported in Navigator 4.x are no longer supported. This includes the use of layers as well as JavaScript styles (JSS). Instead, Netscape 6.x embraces CSS (both CSS1 and CSS2), as well as XML, and the DOM Levels 0 and 1 (and partially DOM 2 from what I can see) releases from the W3C.

As you can imagine, this is going to have an impact of your Navigator-only or cross-browser DHTML effects. How much so could surprise you.

Changes…

The implementations for DHTML for the new DOM-compliant browsers (Mozilla/Netscape 6.x) is the same as that for IE 4.x and up — for most of the functionality. This includes hiding and showing an element using the visibility CSS attribute, as well as moving an element and changing the element’s width, using the respective CSS2 attributes. In fact, Netscape 6.x is going to be closer in functionality to IE than it will be to Navigator 4.x. Read more on shared functionality in the sections “Movement and Visibility”, “Element Height and Width”, and “Layering and Z-Order”, found at the bottom of this page.

One nice surprise is that event handling with Mozilla/Navigator 6.x is quite easy to incorporate into your DHTML effects, thanks to the new Event-based objects in the DOM Level 2. Very little code had to change in my DHTML applications based on event handling, though each DHTML page did have to change (event handling is not part of the X-Object implementation — See the article section titled “Events”).

We’ll explore the changes between Navigator 4.x and 6.x, as well as the new DOM functionality, as we convert my existing cross-browser objects to the new, improved X-Objects.