Layer Emulation API for Mozilla

An Experimental Emulation API for Layers

Bob Clary, Netscape Communications
Last Modified: December 16, 2002

Contents

This proof of concept illustrates the possibilities of using the Mozilla DOM prototypes to extend the underlying DOM in Netscape 6/Mozilla to support proprietary features. Layers.js extends the Netscape 6/Mozilla DOM to support Layers with only minimal modifications to the original Navigator 4 HTML and JavaScript required. This Layer emulation API is currently under development and not all of the Layer API is currently emulated. Please check back often to get the latest news and updates.

Required Modifications to existing Layer based code

  1. Insert the following into the HTML page before any other scripts 
    <script type="text/javascript">
if (document.layers)
	createLayer = new Function('width', 'parentLayer', 'return new Layer(width, parentLayer);');
else if (navigator.product == 'Gecko')
	document.write('<script type="text/javascript" src="Layers.js"><\/script>')
</script>
  2. Insert the following into the HTML page just before the ending BODY tag 
    <script type="text/javascript">
<!--
if (navigator.product == 'Gecko'))
	initializeLayers();
// -->
</script>
  3. Edit the existing Layer based JavaScript by replacing all occurrences of new Layer(...) with createLayer(...)

Examples

Simple Layer example

layertest.html illustrates a simple example of the use of the Layer Emulation API using the following source: 

<html>
<head>
<title>Test Layers.js</title>
<script type="text/javascript">
if (document.layers)
	createLayer = new Function('width', 'parentLayer', 'return new Layer(width, parentLayer);');
else if (navigator.product == 'Gecko')
	document.write('<script type="text/javascript" src="Layers.js"><\/script>')
</script>
<script type="text/javascript">
<!--
function init()
{
	alert('click to modify test layer');
	document.testLayer.bgColor = 'red';
	document.testLayer.moveBy(100, 100);
	document.testLayer.clip.right = 50;
}
// -->
</script>
</head>
<body onload="init()">
<div name="testLayer" id="testLayer" style="position:absolute;">
This is a test layer
</div>
<script type="text/javascript">
<!--
initializeLayers();
// -->
</script>
</body>
</html>

Michael Bostock's Original JS DHTML Collapsible List

This approach has been used to take Michael Bostock's original Layer based Collapsible List example that was supported by Navigator 4, Internet Explorer 4+ but not Netscape 6 or Mozilla.

Do not work in Netscape 6/Mozilla due to Layers

and modify it according to the above instructions to give a version that is supported by Navigator 4, Internet Explorer 4+ and Mozilla/Netscape 6.

Do work in Netscape 6/Mozilla using the Layer Emulation API

Current Implementation

NameStatus
Global Functions
ConstructorcreateLayer(width, parentLayer)
InitializerinitializeLayers
Properties
Layer.abovenot implemented
Layer.belownot implemented
Layer.backgroundread/write
Layer.bgColorread/write
Layer.clipread
Layer.clip.topread/write
Layer.clip.rightread/write
Layer.clip.bottomread/write
Layer.clip.leftread/write
Layer.clip.widthread/write
Layer.clip.heightread/write
Layer.documentread
Layer.document.openimplemented
Layer.document.closeimplemented
Layer.document.writeimplemented
Layer.document.writelnimplemented
Layer.document.bgColorread/write
Layer.document.layersread
Layer.document.imagesread
Layer.hiddenread/write
Layer.leftread/write
Layer.nameread
Layer.pageXread/write
Layer.pageYread/write
Layer.parentLayerread
Layer.siblingAbovenot implemented
Layer.srcnot implemented
Layer.topread/write
Layer.visibilityread/write
Layer.zIndexread/write
Methods
Layer.captureEventsnot implemented
Layer.handleEventsnot implemented
Layer.loadnot implemented
Layer.moveAboveimplemented
Layer.moveBelowimplemented
Layer.moveByimplemented
Layer.MoveTonot implemented
Layer.moveAbsoluteimplemented
Layer.releaseEventsnot implemented
Layer.resizeByimplemented
Layer.resizeToimplemented
Layer.routeEventnot implemented

Limitations

This API will only work in limited circumstances:

Note these limitations exclude the famous and widely used Smith 1 and 2 menus, since they rely on loading after the onload fires for Netscape Navigator 4.x and on loading before the onload fires in Internet Explorer 4.

Conclusion

The use of the Advanced JavaScript and DOM implementation in Netscape 6/Mozilla, make it possible for JavaScript library developers to modify and extend the basic DOM support in Mozilla/Netscape 6 to support a variety of proprietary features available in legacy browsers.

Caveat Emptor

This Layer Emulation API extension to the Mozilla DOM was developed quickly for demonstration purposes. It is not guaranteed to work for you and is subject to major modifications. It is provided here for informational purposes only.

See also

Document History