spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / dhtml / column19
Developer News
Metasploit 3.2 Offers More 'Evil Deeds'
'Thank You Apple. Seriously.'
The Buzz: BlackBerry App Store Seen Next
Logo

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:

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

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



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
Avaya Article: Call Control XML - Powerful, Standards-Based Call Control
Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks
Internet.com eBook: The Pros and Cons of Outsourcing
Go Parallel Article: Scalable Parallelism with Intel(R) Threading Building Blocks
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices
HP On Demand Webcast: Virtualization in Action
Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Microsoft Download: Silverlight 2 Software Development Kit Beta 2
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Beta 2 Runtime
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview · Controllers: Programming Application Logic - Part 2 · How to Use JavaScript to Validate Form Data
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Choosing the Right Online Backup Provider · Mother Avaya Nurtures Her Technology Partners · Software as a Service a Winning Model for Hotspot Provider

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

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