Expandable Outlines: Cross-Browser (cont'd)

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.

• When the display property is set using the CLASS attribute, the on-screen result is as expected, but the display property of the element's style is not updated. In our example, therefore, a child element, although not rendered, does not return a "none" value for display, as it would if STYLE="display:none" had been used. We must update this property manually, since our toggle function relies on it. This property value assignment quirk when using classes exists for many properties. Contrastly, Navigator properly updates element properties set through the CLASS attribute.
• If the class approach is used, and even after the property is updated manually, an empty string value does not cause the element to render. A value of "block" however, will render it.

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