DHTML Lab: Cross-Browser Visibility Transitions; Transitions 17-20 (Strips)

Cross-Browser Visibility Transitions
transitions 17-20: strips

Strips??

The so-called "strip" transitions are in reality "diagonal wipes". We cannot duplicate them, exactly, in Navigator, but we can create similar, substitute versions. Instead of a wipe, we will clip two, adjacent, sides of the element, repeatedly. This will create a box-in effect toward one corner of the element.

The variables are created using the same statements we used for our box-in transition. The difference here is that two sides are clipped instead of four, so we use fullW and fullH to generate the variables.

All four transitions have the same statements. Only the function names are different.

Left Down

case 17:
    incW = fullW/visits;
    incrementW = (incW >= 1) ? parseInt(incW) : 0;
    xtraPixW = Math.round((incW - incrementW) * visits);
    incH = fullH/visits;
    incrementH = (incH >= 1) ? parseInt(incH) : 0;
    xtraPixH = Math.round((incH - incrementH) * visits);
    whichEl.transFunct = seventeen;
    break;

Left Up

case 18:
    incW = fullW/visits;
    incrementW = (incW >= 1) ? parseInt(incW) : 0;
    xtraPixW = Math.round((incW - incrementW) * visits);
    incH = fullH/visits;
    incrementH = (incH >= 1) ? parseInt(incH) : 0;
    xtraPixH = Math.round((incH - incrementH) * visits);
    whichEl.transFunct = eighteen;
    break;

Right Down

case 19:
    incW = fullW/visits;
    incrementW = (incW >= 1) ? parseInt(incW) : 0;
    xtraPixW = Math.round((incW - incrementW) * visits);
    incH = fullH/visits;
    incrementH = (incH >= 1) ? parseInt(incH) : 0;
    xtraPixH = Math.round((incH - incrementH) * visits);
    whichEl.transFunct = nineteen;
    break;

Right Up

case 20:
    incW = fullW/visits;
    incrementW = (incW >= 1) ? parseInt(incW) : 0;
    xtraPixW = Math.round((incW - incrementW) * visits);
    incH = fullH/visits;
    incrementH = (incH >= 1) ? parseInt(incH) : 0;
    xtraPixH = Math.round((incH - incrementH) * visits);
    whichEl.transFunct = twenty;
    break;

seventeen() - twenty()

The functions are variations on our original zero() function, only two sides, relevant to the transition direction, are clipped, instead of four. Review the box-in transition for the function logic.

Left Down

function seventeen(){
    if (xtraPixW > 0) {
        if (xtraPixW <= visits) {
            if (alternateW) {
                this.clip.right--;
                xtraPixW--;
            }
            alternateW = !alternateW;
        }    
        else {
            this.clip.right--;
            xtraPixW--;
        }
    }
    this.clip.right -= incrementW;
    if (xtraPixH > 0) {
        if (xtraPixH <= visits) {
            if (alternateH) {
                this.clip.top++;
                xtraPixH--;
            }
            alternateH = !alternateH;
        }    
        else {
            this.clip.top++;
            xtraPixH--;
        }
    }
    this.clip.top += incrementH;
    visits--;
    if (this.clip.height <= 0 && whichEl.clip.width <= 0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

Left Up

function eighteen(){
    if (xtraPixW > 0) {
        if (xtraPixW <= visits) {
            if (alternateW) {
                this.clip.right--;
                xtraPixW--;
            }
            alternateW = !alternateW;
        }    
        else {
            this.clip.right--;
            xtraPixW--;
        }
    }
    this.clip.right -= incrementW;
    if (xtraPixH > 0) {
        if (xtraPixH <= visits) {
            if (alternateH) {
                this.clip.bottom--;
                xtraPixH--;
            }
            alternateH = !alternateH;
        }    
        else {
            this.clip.bottom--;
            xtraPixH--;
        }
    }
    this.clip.bottom -= incrementH;
    visits--;
    if (this.clip.height <= 0 && whichEl.clip.width<=0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

Right Down

function nineteen(){
    if (xtraPixW > 0) {
        if (xtraPixW <= visits) {
            if (alternateW) {
                this.clip.left++;
                xtraPixW--;
            }
            alternateW = !alternateW;
        }    
        else {
            this.clip.left++;
            xtraPixW--;
        }
    }
    this.clip.left += incrementW;
    if (xtraPixH > 0) {
        if (xtraPixH <= visits) {
            if (alternateH) {
                this.clip.top++;
                xtraPixH--;
            }
            alternateH = !alternateH;
        }    
        else {
            this.clip.top++;
            xtraPixH--;
        }
    }
    this.clip.top += incrementH;
    visits--;
    if (this.clip.height <= 0 && whichEl.clip.width<=0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

Right Up

function twenty(){
    if (xtraPixW > 0) {
        if (xtraPixW <= visits) {
            if (alternateW) {
                this.clip.left++;
                xtraPixW--;
            }
            alternateW = !alternateW;
        }    
        else {
            this.clip.left++;
            xtraPixW--;
        }
    }
    this.clip.left += incrementW;
    if (xtraPixH > 0) {
        if (xtraPixH <= visits) {
            if (alternateH) {
                this.clip.bottom--;
                xtraPixH--;
            }
            alternateH = !alternateH;
        }    
        else {
            this.clip.bottom--;
            xtraPixH--;
        }
    }
    this.clip.bottom -= incrementH;
    visits--;
    if (this.clip.height <= 0 && whichEl.clip.width<=0) {
        clearInterval(transTimer);
        this.hideIt();
    }
}

Finally, let's look at the last transition, Random (23).