The Dynamic Duo - The Dynamic Layer Object API

The Dynamic Layer Object API

The Dynamic Layer Object API (DynLayer) is a lightweight object that provides a highly flexible manner of working with layers. Not only does it have common properties and methods for manipulating layers, it is an object based API which opens up a new way of working with layers that far exceeds the traditional way of coding DHTML. I've found it to be the ideal foundation for nearly every application of DHTML including animation, applications, and gaming environments.

All of the next lessons in this tutorial will use the DynLayer as the basis for accomplishing some other task, so it is important that you understand how it works and how to use it.

Features of the DynLayer Object:

an object-based API that is easy to implement and use
targets layers in a similar manner that I've used pointers to target layers - to avoid the problems of the different object models between Netscape and IE
automatic nested layer handling
full support for working with layers in separate frames
provides it's own properties and methods for changing the location of the layer - to avoid the position problems associated with Microsoft's proprietory way of changing the location
has the handy hide() and show() methods to change the visibility
exposes a common event model for layer-based events
has built-in slide, clip, and write methods
includes css() function to auto-generate CSS syntax
easy to make extensions such as wipe, glide, background color, external source files etc.

Quick Summary of what the DynLayer Does

Instead of using the true commands for manipulating layers, you make a DynLayer object and tell it the name of the layer that it will be used for. The DynLayer object will have 3 main properties:

doc - points to "document.layername.document" in Netscape 4, and "document" in IE and Netscape 5 (Mozilla)
elm - points to "document.layername" in Netscape 4, "document.all['layername']" in IE, and "document.getElementById('layername')" in Netscape 5
css - points to elm in Netscape 4, elm.style in IE and Netscape 5

This manner gives us a similar way to access properties and methods of layers no matter which browser is being used.

The DynLayer then has other properties such as (x,y) to hold various information needed to operate the DynLayer, and has methods such as hide() show() and slideBy() and slideTo() to manipulate the layer. Read the next sections of the DynLayer for specific usage of these methods.

Source Code to DynLayer

dynlayer.js