DHTML Lab: Cross-Browser Visibility Transitions

Cross-Browser Visibility Transitions
hide/show positioned elements with flair

This tutorial can be appreciated by users of any browser, any version.
The in-line examples will work only in Netscape Navigator 4
and Microsoft Internet Explorer 4 for Windows.

One of the major features of DHTML is the ability to set the visibility of a positioned element and show/hide it at will. We've been exploiting this ability to create DHTML techniques since column 2, Low Bandwidth Rollovers. Other columns that discuss element visibility in some way are: column 3, column 5, columns 8-11, column 12, columns 14-15, column 16 and column 18.

This time around, we will give you more control over how your elements are hidden or shown, by creating a library of transition routines. All the routines are contained in a single external JavaScript file that can be inserted into any page, allowing you to hide your elements with cinematic style.

Try it. Immediately following, we have included a positioned element that can be hidden, and in four cases, shown, using transitions from our library. Choose a transition, then click the Do Transition button. To try another one, click RESET, choose a new transition and click Do Transition again.

0 Box insame 1 Box outsame* 2 Circle inalt 3 Circle outalt* 4 Wipe upsame 5 Wipe downsame 6 Wipe rightsame 7 Wipe leftsame  8 Vertical blindssub  9 Horizontal blindssub 10 Checkerboard acrosssub 11 Checkerboard downsub 12 Random dissolvesub 13 Split vertical insame 14 Split vertical outsame* 15 Split horizontal insame 16 Split horizontal outsame* 17 Strips left downalt 18 Strips left upalt 19 Strips right downalt 20 Strips right upalt 21 Random bars horiz.sub 22 Random bars vert.sub 23 Randomsame

This text is originally    hidden by the positioned element.

Duration (secs):

Prerequisites

1. Knowledge of the concept of positioned elements. How to create them, position them and modify their properties in Navigator and Explorer. All our columns, except column 1, deal with positioned elements. We will not create positioned elements in this column.

2. An understanding of Explorer 4 transition filters. These are available only to Explorer 4 for Windows, and we introduced them in column 13. The one-page introduction included in that column, is an excellent preface to the present technique discussion.

3. Familiarity with positioned element size clipping. We introduced clipping in column 2. It was also heavily used for our Jigsaw Puzzle.

In This Column

We will discuss:

• defining the Explorer Reveal Transition filters
• applying the transition filters
• the Navigator transition script logic
• creating a box-in transition for Navigator
• creating a box-out transition for Navigator
• simulating the circle-in and circle-out transitions for Navigator
• creating wipe transitions for Navigator
• creating split-in transitions for Navigator
• creating split-out transitions for Navigator
• simulating the strip (diagonal wipe) transitions for Navigator
• selecting a random transition for Navigator

For the first time, in our columns, we will learn:

• to use the Explorer Reveal Transitions
• to program the Explorer onfilterchange event handler
• to replace multiple if statements with the JavaScript 1.2 switch statement
• to use JavaScript built-in Math.round() and Math.max() methods

Always keep in mind, as you're reading this column, that we are not attempting to duplicate the Explorer Reveal Transition Filters for Navigator. We are creating a positioned element visibility transition library. To achieve this in Explorer, we call upon the built-in Reveal Transition Filters, using only a fraction of their abilities. Since these filters have integer identifiers, we maintain this standard when creating Navigator transitions. As a bonus for Explorer users, we allow all the reveal transitions. Since many of them do not have Navigator equivalents, the Navigator script substitutes a Navigator-enabled transition.

We have a lot of ground to cover, so let's begin with a look at Explorer's Reveal Transition Filters.

Produced by Peter Belesis and

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

URL: https://www.webreference.com/dhtml/column19/