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: https://www.webreference.com/dhtml/column12/outCROSSone.html