Expandable Outlines: Cross-Browser | WebReference

Expandable Outlines: Cross-Browser


Expandable Outlines
Cross-Browser: Initialization

A cross-browser version can be created without much ado, although several concessions will be made to the Navigator way of doing things. We must, for example, maintain the Navigator requirement of enclosing all outline heads, outline expandable elements, and subsequent elements in positioned elements (DIVs). We'll also keep the links to expandIt() as they are.

Contrastly, Explorer should not consider the DIVs as positioned elements, but as simple page divisions, and should use the display property toggle. Surprisingly, this is easily achieved.

First, we omit the inline STYLE attributes from the DIVs, and replace them with style CLASS identifiers:

    <DIV ID="elOneParent" CLASS="parent"> ... </DIV> <DIV ID="elOneChild" CLASS="child"> ... </DIV> <DIV ID="elTwoParent" CLASS="parent"> ... </DIV> <DIV ID="elTwoChild" CLASS="child"> ... </DIV> <DIV ID="elBod" CLASS="regular"> ... </DIV> <DIV ID="elFooter" CLASS="regular"> ... </DIV>

We have assigned three types of classes: parent for the outline heads, child for the expandable elements, and regular for any DIV after the outline.

The DIVs will be considered positioned elements, only if the class style declarations include positioning properties. We must make sure that a different definitions exists for Navigator and Explorer.

Dynamic Stylesheets

Since a CSS stylesheet is just text enclosed in HTML tags, it can be created on-the-fly using JavaScript:

    if (ver4) { with (document) { write("<STYLE TYPE='text/css'>"); if (NS4) { write(".parent {position:absolute; visibility:visible}"); write(".child {position:absolute; visibility:visible}"); write(".regular {position:absolute; visibility:visible}") } else { write(".child {display:none}") } write("</STYLE>"); } }

Now, Navigator has its positioned elements, and Explorer has simple HTML elements, some of which (members of the child class) have a display of none. For Explorer, the parent and regular classes do not exist and are overlooked.

With just a few lines of code, we have created two co-residing but conceptually completely different versions of the same page. The on-screen result is, of course, exactly the same.

Original Layout

Our end-of-page Navigator-specific snippet remains the same:

    ... </DIV> <SCRIPT LANGUAGE="JavaScript1.2"> <!-- if (NS4) { firstEl = "elOneParent"; firstInd = getIndex(firstEl); arrange(); } //--> </SCRIPT> </BODY> </HTML>

Explorer needs no pre-page-load instructions, as it has already rendered the outline correctly. It will, however, need a bit of additional initializtion immediately after the page loads, so our onload = initIt; handler remains for both browsers.

A little more creative combining and we will have our cross-browser version.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Jan. 14, 1998
Revised: Jan. 18, 1998

URL: http://www.webreference.com/dhtml/column12/outCROSSone.html