Expandable Outlines: Cross-Browser (cont'd) | WebReference

Expandable Outlines: Cross-Browser (cont'd)

Logo

Expandable Outlines
Cross-Browser: Expanding/Collapsing


Explorer Quirks

Earlier, we looked at Explorer's dynamic handling of the display property and the possible values for it. The Microsoft documentation for the CSS display and the scripting display states that:

"Values for block, inline, and list-item are not supported explicitly but are useful in setting the display property to be on."

We saw that the empty string value caused the element to be rendered. Writing this column, however, a couple of other "quirks" were noticed.

Creating a New Collection

With the above in mind, let's move on to complete our code. Our first task is to manually assign the "none" value to the display property of all child elements in our outline, for Explorer. Instead of searching for the "Child" string in element IDs, as we do in Navigator, we can take advantage of a powerful scripting feature unique to Explorer: the ability to narrow down our to-be-searched elements by creating a new collection that is a subset of the all-encompassing document.all collection.

The new Explorer tags() method takes one argument, a string representing the name of an HTML tag, an can be assigned to these collections/arrays:

    all embeds plugins anchors forms scripts applets images styleSheets areas links

This code:

    newCollection = document.all.tags(tagString)

returns a collection (read array) of all elements in document.all that are of the type tagString.

For example, to create a collection named divColl that contains all the DIVs in a page:

    divColl = document.all.tags("DIV");

divColl can then be searched and manipulated like any array. Note that the Explorer collection standard of () should be used instead of the array [] for collection element referencing.

Our initIt() function now becomes:

    function initIt(){ if (!ver4) return; if (NS4) { for (i=0; i<document.layers.length; i++) { whichEl = document.layers[i]; if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide"; } arrange(); } else { divColl = document.all.tags("DIV"); for (i=0; i<divColl.length; i++) { whichEl = divColl(i); if (whichEl.className == "child") whichEl.style.display = "none"; } } }

The Navigator part of initIt() is as before. The Explorer part first creates the divColl collection of all DIVs. Then it checks each DIV for a child value of its className property. The className property reflects the value of the HTML CLASS attribute. If a child element is identified, its display is set to none.

Expanding/Collapsing

The expandIt() function essentially incorporates the two codes developed separately earlier. The Explorer-specific part has the element identification addition to compensate for the new DIV enclosed elements, and the specification of block as the display value when an element is to be rendered.

    function expandIt(el) { if (!ver4) return; if (IE4) { whichEl = eval(el + "Child"); whichIm = event.srcElement; if (whichEl.style.display == "none") { whichEl.style.display = "block"; whichIm.src = "triUp.gif"; } else { whichEl.style.display = "none"; whichIm.src = "triDown.gif"; } } else { whichEl = eval("document." + el + "Child"); whichIm = eval("document." + el + "Parent.document.images['imEx']"); if (whichEl.visibility == "hide") { whichEl.visibility = "show"; whichIm.src = "triUp.gif"; } else { whichEl.visibility = "hide"; whichIm.src = "triDown.gif"; } arrange(); } }

Conclusions

CSS1 provides us with the tool to selectively render elements: the display property. Explorer can simply toggle its value to create expandable/collapsable outlines. Navigator presently needs a workaround, but one that can be easily combined with Explorer's version to create cross-browser outlines.

When used in outline heavy pages such as navigation frames or link lists, the cross-browser version is well worth developing and using.

The next two pages repeat the complete code discussed.

Join us immediately following for a look at expanding/collapsing a complete outline all at once, as we did on our first page.


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/outCROSStwo.html