Multi-dialogue forms on one page
Turning Tables Into Selection Lists
You are here: irt.org | Articles | Dynamic HTML (DHTML) | MSIE Page Transition Filters [ previous next ]
Published on: Sunday 28th February 1999 By: Ben Allen
There is a little known HTML tag that will create a merge effect whenever you load that page. The page with this tag appears over the old page, gradually filling the browser window. If you have Internet Explorer 4.0 or higher, this page will load using a page transition (NOTE: this doesn't work if you refresh a page, or in Netscape).
The page transition is put into place using the <meta> tag shown below:
<meta http-equiv="Page-Enter" content="revealTrans(duration=3,transition=1)">
Both of the parameters, duration and transition can be altered. duration determines how long it will take (in seconds) for the new page to fill the browser window. transition determines how the new page will fill the screen. The 22 different codes are listed below.
There is a second page transition available for when the page is replaced with another:
<meta http-equiv="Page-Exit" content="revealTrans(duration=3,transition=1)">
| Value | Description |
|---|---|
| 1 | Square |
| 2 | Circle (Out to In) |
| 3 | Circle (In to Out) |
| 4 | Line (Bottom to Top) |
| 5 | Line (Top to Bottom) |
| 6 | Line (Left to Right) |
| 7 | Line (Right to Left) |
| 8 | Slats (Left to Right) |
| 9 | Slats (Top to Bottom) |
| 10 | Chessboard (Left to Right) |
| 11 | Chessboard (Top to Bottom) |
| 12 | Pixellate |
| 13 | Two Lines (Right/Left to Center) |
| 14 | Two Lines (Center to Right/Left) |
| 15 | Two Lines (Top/Bottom to Center) |
| 16 | Two Lines (Centre to Top/Bottom) |
| 17 | Diagonal Line (Top Right to Bottom Left) |
| 18 | Diagonal Line (Bottom Right to Top Left) |
| 19 | Diagonal Line (Top Left to Bottom Right) |
| 20 | Diagonal Line (Bottom Left to Top Right) |
| 21 | Horizontal Strips |
| 22 | Vertical Strips |
| 23 | Random |
In general, all of the transitions work better with small HTML pages with few images.
See http://javascript.connect-2.co.uk/jscript/scripts/Efadein.html for an example of page transition.
This article first appeared on Dynamic It! JavaScript and DHTML resources.
Multi-dialogue forms on one page
Turning Tables Into Selection Lists
Drag and Drop with Microsoft Internet Explorer 5
A Gift of "Life" : The Document Object Model