DHTML Lab: Cross-Browser Visibility Transitions; Navigator Transitions I

Cross-Browser Visibility Transitions
the Navigator logic

Horse of a Different Color Dept.

Always keep in mind that in this column, we are creating a positioned element transition library. To help us, we are using the Explorer built-in reveal transitions only for the purpose at hand. The Explorer transitions have many more uses. With that repeated, let's move on to Navigator 4.

We will build transitions pixel-by-pixel using a completely different logic than that used for Explorer. Our first task is to outline the logic necessary:

1. All our transitions will use clipping to simulate the Explorer transitions. Clipping was introduced in column 2, and played a major role in the Jigsaw Puzzle columns. We, therefore establish cross-transition general variables that will assist us in our clipping tasks. These include element size and timer variables.
2. We identify the transition requested and declare further transition-specific variables.
3. We call a transition-specific function using setInterval() that will perform the transition/clipping.
4. If an element is hidden, using a transition, we must remember that in Navigator, it is not really hidden, it is clipped to nothingness. We must therefore make it hidden and restore it to its original size. The visibility-hidden transition will then be complete.

The Script

In our external script, therefore, we first redirect Navigator 4 to doTransNS():

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

The remainder of the script takes this form, following the logic set out above:

function doTransNS(whichEl,transNo,dur) {
    general transition variables declared here
    
    switch (transNo) {
        case 0:
            transition type-specific variables
            declared here
        case 1:
            transition type-specific variables
            declared here        
        case 2:
            transition type-specific variables
            declared here
        .
        .
        .
        case 23:
            transition type-specific variables
            declared here
    }
    transTimer = setInterval(functionName,interval)
}
function zero() {
    transition 0 (Box-In) code goes here
}
function one() {
    transition 1 (Box-Out) code goes here
}
function two() {
    transition 2 (Circle-In) code goes here
}

.
.
.
   
function twentythree() {
    transition 23 (Random) code goes here
}
function hideIt() {
    code that returns element to original
    size goes here
}

Notice that every transition is a different function. This is necessitated by the use of setInterval(), which calls a function repeatedly until the transition is complete.

So, let's build the Navigator script.