Our cross-browser object-based DTHML layers toolkit library sets and changes the properties of DHTML Layers

This page uses our cross-browser object-based DTHML layers toolkit library, which supports Internet Explorer (IE) 4 up, Netscape 4 and all W3C DOM Gecko-based browsers including Netscape 6 up and K-meleon. Our DTHML layers toolkit library enables you to create layers dynamically after the page has loaded, in other words the number and properties of the layers you create are not limited by the page's HTML coding. This page shows how you can change many properties of DHTML layers (dynamically positioned objects implemented by div / layer tags ) - visibility (show / hide the layer), zIndex (which layer appears above which), position (move and scroll), size (clipping), background colour / image and the contents of the layer - it can even change the HTML contents of a div / layer without destroying any child / contained div / layer, and fixes the notorious Netscape 4 resize bug. Copyright 2002 Philip Chalmers
Layer Move Set
visibility		 Set
zIndex		 Set
clipping		 Scroll, Limit Scroll, no Limit Set
bgColor		 Set
bgImage		 Show
size		 Show
position		 Write
HTML
A Move left Move right Move up Move down Hide Show     Small Large Scroll up Scroll down Scroll up Scroll down Silver Sand Clouds None Width and height Relative to CONTAINER (page) Relative to PAGE KEEP contained layers DESTROY contained layers
B Move left Move right Move up Move down Hide Show Inherit zIndex up zIndex down Small Large Scroll up Scroll down Scroll up Scroll down Green Yellow Tiles None Width and height Relative to CONTAINER (layer A) Relative to PAGE KEEP contained layers DESTROY contained layers
C Move left Move right Move up Move down Hide Show Inherit zIndex up zIndex down Small Large Scroll up Scroll down Scroll up Scroll down Pink Cyan Bubbles None Width and height Relative to CONTAINER (layer B) Relative to PAGE Write
D Move left Move right Move up Move down Hide Show Inherit zIndex up zIndex down Small Large Scroll up Scroll down Scroll up Scroll down Lime Magenta Ripples None Width and height Relative to CONTAINER (layer A) Relative to PAGE Write

www.benefit-from-it-co.uk

This ugly page tests the core facilities of our cross-browser object-based DTHML layers toolkit.

Most cells in the table above are "buttons" - each controls one operation on one layer.

Floating above the black box on the right there are 4 layers, nested like this:
  A contains B and D.
    B contains C.

Each line of text in each layer contains the layer's letter plus a line number, repeated several times.

The black box shows layer A's initial position and its small clipping region.

Our cross-browser layers toolkit even fixes the notorious Netscape 4 resize bug - without forcing the page to re-load, which would make it forget everything you've done.

Have fun playing with the options!