DHTML Lab - DHTML Diner - IE4: Toggling TITLE Value Display | 4

Toggling the Display of TITLE Values

This script requires access to all objects in the page. It should therefore be placed at the very end of the HTML page. Alternately, all statements, except for the function, can be included in a function called by an onload handler.

Let's review the steps outlined on the previous page:

1.

Have a variable track whether use of tool tips is on or off.

We create the variable isTips, and assign it the value of true.

isTips = true;

2.

Identify the page elements that have a TITLE= attribute and store them in an array.

An array, arTitled, is created to store all elements that have been defined with a TITLE= attribute. That is, all elements that require popup tool tips:

arTitled = new Array();

3.

Cycle through TITLE-enabled elements and create a new property for them which stores the title property.

We go through every element in the page, by looping through Explorer's document.all collection:

for (i=0;i<document.all.length;i++) {
    elT = document.all(i);
    if (elT.title) {
        arTitled[arTitled.length] = elT;
        elT.tooltip = elT.title;
    }
}

For easy reference, a temporary variable, elT, is created to represent the current page element in the loop. We check for the existence of the TITLE= attribute by checking the element's title property: if (elT.title).

If the element has a value in title, then this element is added to the arTitled array and a new property is created for it, tooltip. The tooltip property is assigned whatever is in the element's title property. We know have identical values for the element's title and tooltip properties.

4.

Create a function that assigns either null or the value of the second property to title.

A single function, togTips(), handles the property value switching.

function togTips(){
    isTips = !isTips;
    for (i=0;i<arTitled.length;i++) {
        elT = arTitled[i];
        elT.title = (isTips) ? elT.tooltip : "";
    }
}

Our function first toggles the value of isTips, which reflects the user's wishes. It then loops through all the elements in arTitled. If isTips is true, then the element's title is assigned the value in its tooltip property. Tool tips will now appear, since the relevant elements have a value for title. If isTips is false, the title property is nulled by assigning an empty string. The elements no longer have a value for title, so no tool tips appear.

Calling the Function
This function can be called programatically, through a script statement, or with an in-page link:

<A HREF="javascript:togTips()">Toggle Tool Tips</A>
<A HREF="javascript:void(0)"
   onClick="togTips();return false">Toggle Tool Tips</A>

The above are both valid ways of calling the function.

HOWEVER, since this function is for Explorer-only, try to avoid errors in cross-browser pages, by using the Explorer-only <BUTTON> tag. Other browsers will ignore it.

Therefore, the ideal HTML-script combination is:

.
.
.
<BUTTON onClick="togTips()">Toggle Tool Tips</BUTTON>
.
.
.
</BODY>
<SCRIPT LANGUAGE="JScript"> // Explorer-only (all versions)
<!--
if (document.all) {    // Explorer4 only
    isTips = true;
    arTitled = new Array();
    for (i=0;i<document.all.length;i++) {
        elT = document.all(i);
        if (elT.title) {
            arTitled[arTitled.length] = elT;
            elT.tooltip = elT.title;
        }
    }
    function togTips(){
        isTips = !isTips;
        for (i=0;i<arTitled.length;i++) {
            elT = arTitled[i];
            elT.title = (isTips) ? elT.tooltip : "";
        }
    }
}
//-->
</SCRIPT>
</HTML>

Happy toggling!