Cross-Browser DHTML API v1.1 RC

This library is designed to make coding cross-browser projects a lot easier, in Netscape 4, NS6+/Mozilla, Opera 7+, Safari 1.0+, IE4+, some functionality in Opera 5 and 6, and also other DOM-compatible browsers like Konqueror.

It is built to be small and fast (for people who don't more than a couple of KBs of extra code), and also possible to include in a page several times safely while maintaining previous information (for all the cut-n-paste script combiners out there). From its modular design, you can take as little as you need for each project and add in additional objects and functions later when needed.

Please note, this will NOT teach you DHTML, it will NOT ensure your scripts run perfectly in every browser, and you need to be very familiar with JavaScript to use it effectively. Having a good idea of regular DHTML (i.e. the various DOMs of the browsers) is also recommended. I use it in all my scripts and it can make code much more readable (less if/else statements).

It includes several modules, namely:

• Browser Detection Variables: Detect the presence of DOM browsers (IE5,NS6,etc.), IE, IE4, NS4, Opera, and platform (Windows or other).
• DOM Reference Functions: These use document.all[], .getElementById() or .layers[] depending on the browser. Also supports nested layers and cross-frames usage, and can obtain a reference to the .style property of the element automatically.
• Layer Object API: Wraps up the above references in a object you can use to access the properties of the layer.
• Layer Object Functions: Add capabilities to all your layer objects, some or all of positioning, dimensioning, visibility, background colours/images, clipping, replacing the content of the layer and altering opacity. Many support getting and setting the current values.
• Dynamic Layer Creation: Create new layers via DHTML and access via a layer object.
• Page Object: Automatically obtain the dimensions of the current document and window clipping region, and the scroll position of the document. Can also detect the page position of any given layer or anchor in pixels.
• Multiple Event Manager: Can assign and run several functions with one event like window.onload() or document.onclick() in a cross-browser script. Will automatically either call object.addEventListener, or dynamically compile an array of all assigned events coupled with a custom event running/parsing function to ensure previous events are backed up and run appropriately. It will also automatically manage return values, and NS4's document.captureEvents / routeEvent methods, and passes the correct "event" object to functions invoked.

Usage instructions and examples are in the source. Page and event objects demonstration:

Good luck - Angus

Version History:

• v1.1:
  • Added page.elmPos() function and demonstration.
  • Rewrote addEvent() function, now it's smaller and more self-contained.
  • A few tweaks to the comments and readme.
• v1.0 (28 August 2002): Initial Public Release.