Inside Technique : Targeting Layers
By Scott Isaacs

Cross-browser scripting is often more an art than an absolute science. This article exemplifies this art by providing a way to simulate the best aspects of Explorer's support for the HTML 4.0 IFrame element and Navigator 4.0's support for their proprietary Layer element.

The Netscape Navigator 4.0 Layer element allows you to absolutely position content from another document transparently over your current page. A key issue with the Layer element is that it must be absolutely positioned, and therefore mixes presentation with content. In addition, the layer has an additional flaw where all links in the embedded document are automatically targeted to the window containing the outer page. There is no built-in support for a link to just replace an existing layer on the screen. However, even with these limitations, the ability to include other documents within your webpage is very useful.

The HTML 4.0 IFrame element supported by Internet Explorer also allows you to embed a sub-document on the page. Different from the Layer tag, there is no requirement for the IFrame to be absolutely positioned allowing the IFrame to be included directly in the flow of the document. In addition, just like traditional frames, the IFrame can automatically act as the destination for links through the anchor element's Target attribute. On disadvantage of IFrames is they do not support the ability to automatically grow or shrink to their contents (scrollbars are displayed if the content does not fit), and Internet Explorer's implementation of IFrames makes them opaque over the pages background.

In this article, we explain a technique that adds support for Netscape's autogrow feature in IE, and adds IE's targeting feature in Netscape. We are leaving the IFrame transparency issue as a homework exercise for you to fix. (It is possible, to get you started, check out Layering Pages when you are finished with this article).

We present this technique in 4 sections, first we explain how to add linking to Netscape, followed by how we made the IFrame autosize in Explorer, then we take a small break for a cross-browser demo, finally concluding with how to combine both techniques into a single cross-browser script. At the end of this article we have a challenging homework assignment for you.

To start, lets explain how we added link targeting in Netscape. We were suprised how little code was needed to add this feature.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.