DHTML Lab: Cross-Browser Visibility Transitions; Explorer Code

Cross-Browser Visibility Transitions
the Explorer code

The In-Page Script

Any page that we wish to have access to the transition library should have our usual browser detection and a dummy doTrans() function for backward compatibility. Since Explorer 4 for the Macintosh supports neither filters nor clipping, we deny it access to our script. The isTrans variable identifies browsers that are either Navigator 4 or Explorer 4 for Windows.

<SCRIPT LANGUAGE="JavaScript">
<!--
    NS4 = (document.layers) ? 1 : 0;
    IE4 = (document.all) ? 1 : 0;
   ver4 = (NS4 || IE4) ? 1 : 0;   
  isMac = (navigator.appVersion.indexOf("Mac") != -1) ? 1 : 0;
isTrans = (NS4 || (IE4 && !isMac)) ? 1 : 0;
function doTrans() {return};
//-->
</SCRIPT>

Next, we insert our external JavaScript file, trans.js, that contains the transition script:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (isTrans) {
  document.write("<SCRIPT [keep with next line]
   LANGUAGE='JavaScript1.2' SRC='trans.js'><\/SCRIPT>");
}
//-->
</SCRIPT>

The function in the external script that initiates the transitions is doTrans(), which takes three arguments: the element ID as a string, the transition type, using the Explorer numbering scheme, and the transition duration, in seconds. For example, to hide an element called elTrial, using a wipe left transition that lasts four and a half seconds, we would issue this function call:

doTrans("elTrial",7,4.5)

The function call may be in our HTML as part of any event handler. Examples:

onClick="doTrans('elTrial',7,4.5)" or
onMouseOver="doTrans('elTrial',7,4.5)" etc.

More often than not, however, we will probably include it as statement in a script that responds to user or time events.

Note: To facilitate the creation of a cross-browser script, and to provide more variety in transitions, four of the transitions, 1, 3, 14 and 16 show the element. The remainder hide the element. Therefore, in these four cases, the original state of the element must be hidden. Otherwise, the original state must be visible.

The External Script

The first function in our external script is doTrans(), which names its three passed arguments el (element ID), transNo (transition type) and dur (transition duration).

First, we evaluate the element ID string (el) and assign it to a variable, whichEl, for easy reference. Then we convert transNo to an integer with parseInt() and reassign it to transNo. In most cases, you will be passing an integer, so this statement will be redundant. There are cases, however, where transNo might be passed as a string, dynamically, without your intervention. For example, if passed from a form input, transNo would be a string, as is the case with the live example on the first page of this column.

We then create an array, arHidden, which contains the transition types that take an element from a hidden state to a visible one.

function doTrans(el,transNo,dur) {
    whichEl = eval(el);
    transNo = parseInt(transNo);
    arHidden = new Array(1,3,14,16);   
    if (IE4) {doTransIE(whichEl,transNo,dur)}
}

With this simple overhead accomplished, doTrans() then calls doTransIE() to continue with Explorer-specific script, passing the three arguments in their new versions.

In doTransIE(), we first define a transition filter for our element, using script syntax and the passed arguments. Then we create a variable, endState, that stores the state the element should be in when the transition is complete. The default value we give it is "hidden", as most of our transitions take an element from a visible state to a hidden one.

Next, we compare the value of transNo with the values in arHidden. If there is a match, it means our transition should take whichEl from a hidden state to a visible one. Therefore, endstate is assigned a value of "visible". If one of these transitions is invoked, whichEl should already be hidden. However, there may be a case when you want a visible element to reappear using one of these transitions, so the harmless redundant statement whichEl.style.visibility="hidden"; is issued.

function doTransIE(whichEl,transNo,dur) {
    whichEl.style.filter = [keep with next line]
 "revealTrans(duration=" + dur + ",transition=" + transNo + ")";
    endState = "hidden";
    for (i=0; i<arHidden.length; i++) {
        if (arHidden[i] == transNo) {
            endState = "visible";
            whichEl.style.visibility="hidden";
        }
    }
    whichEl.onfilterchange = clearFilt;
    whichEl.filters.revealTrans.apply();
        whichEl.style.visibility = endState;
    whichEl.filters.revealTrans.play();
}

The onfilterchange Event

All elements have an onfilterchange event which fires when a filter effect is complete. In the case of transitions, it fires when the element has changed to its new state. We assign the clearFilt() function to be called when our transition is complete. The reason is discussed below.

Our element now has a filter defined with the correct parameters, so we apply the filter, (whichEl.filters.revealTrans.apply();) freezing the element display. Next, we change the visibility of the element, using endstate as the value assigned to the visibility property. Finally, we begin the transition from one state of the element to the other, using the play() method (whichEl.filters.revealTrans.play();).

Quirk

If one assigns Reveal Transition 23, Random, Explorer does not randomly choose a transition and pass the chosen integer identifier to the filter property, as one would assume. Explorer, instead, assigns a random transition to integer 23, and passes 23 as the transition type! If you choose to invoke a random (23) transition for an element more than once, Explorer will check the filter property, find a 23 already stored there and repeat the last transition. It will not choose a new random transition!

The preferred behavior is for a new, random, transition to be applied, every time we use 23 as the transition type. To accomplish this, we must clear the filter property at the end of a transition, so Explorer will be forced to choose a new random transition for the element if we require one later.

Therefore, we call clearFilt() with the onfilterchange handler, to clear the filter property.

function clearFilt() {
    whichEl.style.filter="";
}

That's it for Explorer! Simple, since the transitions are built-in. With Navigator, we have to code them ourselves!