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

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


Cross-Browser Visibility Transitions
the Navigator logic

IE4 behavior:
  as described
NS4 behavior:
Boldsame as IE4
BItalicsimilar to IE4
Italicother trans substituted
Box in 0
Box out 1
Circle in 2
Circle out 3
Wipe up 4
Wipe down 5
Wipe right 6
Wipe left 7
Vertical blinds 8
Horizontal blinds 9
Checkerboard across10
Checkerboard down11
Random dissolve12
Split vertical in13
Split vertical out14
Split horizontal in15
Split horizontal out16
Strips left down17
Strips left up18
Strips right down19
Strips right up20
Random bars horizontal21
Random bars vertical22

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.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Apr. 28, 1998
Revised: Apr. 28, 1998

URL: http://www.webreference.com/dhtml/column19/transNSone.html