DHTML Lab: Cross-Browser Visibility Transitions; Transitions 14&16 (Vertical/Horizontal Split-Out) - WebReference.com | WebReference

DHTML Lab: Cross-Browser Visibility Transitions; Transitions 14&16 (Vertical/Horizontal Split-Out) - WebReference.com


Cross-Browser Visibility Transitions
transitions 14&16: Split Vertical/Horizontal Out

Click the buttons below
to show the element

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

Transition 12: Random Dissolve

In combining transitions on the previous page, we skipped transition 12 (Random Dissolve).

Navigator cannot duplicate this transition either, since it splits the element into many pieces as it dissolves from one state to another. We can simulate it, however, using a partly-transparent GIF image, as we did with our Dynamic Headline Fader in column 13. Since we are creating a one-external-file transition library, we will not create any image-based workarounds. Instead, we will direct transition 12 to act like transition 0 (Box-In) for Navigator. We, therefore, modify the case label for 0:

case 0:
case 12:
	incW = halfW/visits;
	incrementW = (incW >= 1) ? parseInt(incW) : 0;
	xtraPixW = Math.round((incW - incrementW) * visits);
	incH = halfH/visits;
	incrementH = (incH >= 1) ? parseInt(incH) : 0;
	xtraPixH = Math.round((incH - incrementH) * visits);
	whichEl.transFunct = zero;

Split Vertical Out

The variables are the same as with Split Vertical In. Since this is a hidden-to-visible transition, we also clip the element's width to 0, and make it visible before calling the function for the first time.

case 14:
    increment = halfW/visits;
    whichEl.clip.left += halfW;
    whichEl.clip.right -= halfW;
    whichEl.visibility = "show";            
    whichEl.transFunct = fourteen;


Since we are expanding the size of the element, we make our usual current size-final size comparison. If we find that we have an increment or less to go, we restore the element to its full size and clear the timer:

function fourteen(){
    if ((this.clip.left - this.origLeft) <= increment) {
        this.clip.left = this.origLeft;
        this.clip.right = this.origRight;
    else {
        this.clip.left -= increment;
        this.clip.right += increment;

Split Horizontal Out

The increment is based on the height of the element and the element's height is reduced to 0 before the function is called. Otherwise, the setup procedure for transition 16 is the same as that for 14.

case 16:        
    increment = halfH/visits;
    whichEl.clip.top += halfH;
    whichEl.clip.bottom -= halfH;
    whichEl.visibility = "show";
    whichEl.transFunct = sixteen;


Simply, a horizontal version of fourteen():

function sixteen(){
    if ((this.clip.top - this.origTop) <= increment) {
        this.clip.top = this.origTop;
        this.clip.bottom = this.origBottom;
    else {
        this.clip.top -= increment;
        this.clip.bottom += increment;

Hang on, we're almost finished. Next page, we look at the "strips" transitions.

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/transSplitOut.html