Please wait, preparing script...
Here's an example layer.
It's got text in it, and is positioned absolutely...
[ scroll down for readme... ] |
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.