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

Cross-Browser Visibility Transitions
the Navigator script

General Variables

In the doTransNS() function, we first store the original, present, size of the element. This is accomplished by assigning the four clip values to four new properties of the element, origLeft, origTop, origRight and origBottom. We do not assume that clip.left and clip.top are 0. The element we are to manipulate may very well be clipped to begin with.

Next, we create a hideIt() method for the element, that calls the hideIt() function. This will be used if we need to restore the element's original size and hide it after the transition.

We convert dur, specified in seconds, to milliseconds by multiplying it by 1000. This value is stored in the mSecs variable.

In creating the transition library, we found that an interval of 100 milliseconds, for the setInterval() method, gave the best results. Explorer times the transitions internally, so the duration is exact. In Navigator, we will be attempting to duplicate this behavior by repeatedly calling a function at a specified interval, to perform a series of stements. Many external factors come into play that keep the timing from being exact. These include: length of function called; other OS programs running, and so on. One hundred milliseconds was the best interval in our tests.

If we divide the complete duration of our transition (mSecs), by the interval (intval) we get the number of times our function will be called to complete the effect. We store this value in the visits variable.

Our transitions will need to know the full width/height of the element, or in some cases, the half width/height, when determining transition-specific variables. We, therefore, declare four more variables, fullW, fullH, halfW and halfH to store these values. Finally, two Boolean variables, alternateW and alternateH are initialized to true. Their function will be discussed further down.

function doTransNS(whichEl,transNo,dur) {
    whichEl.origLeft = whichEl.clip.left;
    whichEl.origTop = whichEl.clip.top;
    whichEl.origRight = whichEl.clip.right;
    whichEl.origBottom = whichEl.clip.bottom;
    whichEl.hideIt = hideIt;
    mSecs = dur * 1000;
    intval = 100;
    visits = (mSecs/intval);
    fullW = whichEl.clip.width;
    fullH = whichEl.clip.height;;
    halfW = fullW/2;
    halfH = fullH/2;
    alternateW = alternateH = true;
    
    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("whichEl.transFunct()",intval);
}

The switch Statement

With JavaScript 1.2, multiple if statements can be replaced by the new switch statement. switch has this syntax:

switch (expression){
   case expressionValue: 
      statements;
      break;
   case expressionValue: 
      statements;
      break;
   ...
   default:
      statements;
}

switch matches an expression against a series of possible values. Each of these values is preceded by the case label. If a match is found, the statements immediately following are executed until the break statement is encountered. If no matches are found, switch executes any statements in the final default label, which is optional.

In our script, switch will match the transNo variable, and execute the specific statements, associated with that transition. One of the statements in each case will assign an appropriate transition function to a new element method, whichFunct().

The switch statement in doTransNS() now takes this form:

switch (transNo) {
    case 0:
        transition type-specific variables
        whichEl.transFunct = zero;
    case 1:
        transition type-specific variables  
        whichEl.transFunct = one;      
    case 2:
        transition type-specific variables 
        whichEl.transFunct = two;
    .
    .
    .
    case 23:
        transition type-specific variables 
        whichEl.transFunct = twentythree;
}

The final statement in doTransNS() takes the whichEl.transFunct() method and uses it as the function argument in setInterval().

transTimer=setInterval("whichEl.transFunct()",intval);

The setInterval() method is assigned to the transTimer variable, necessary for cancelling the repeated function calls later.

Restoring the Element to Original Size

We will build the switch statement, and the individual functions, transition by transition, as we proceed. The only other function common to all is hideIt():

function hideIt() {
    this.visibility = "hide";
    this.clip.left = this.origLeft;
    this.clip.top = this.origTop;
    this.clip.right = this.origRight;
    this.clip.bottom = this.origBottom;
}

hideIt() is called whenever an element has been clipped to simulate a transition to a hidden state. It truly hides the element, then restores it to its original size.

With the basics of the Navigator code behind us, we can begin to create the transitions.