So You Want To Toggle, Huh? Method Two

By Joe Burns

...use these to jump around or read it all
[Toggling with MSIE]
This is a second full tutorial

[The Effect]
[The Layer]
[Getting the Toggle Effect]

     First things first... This is a tutorial dealing with Netscape Layers. You need to be running a Navigator browser, 4.0 level or better, to see the effect.

     This tutorial is one of a pair that offer the same effect, but use totally different methods to get the job done. If you haven't already, you should take the time to read over this tutorial's twin Toggling with MSIE. The toggling effect, an item being made able to appear and disappear, is done in MSIE by using a division. In this Netscape-based tutorial, we'll get the same effect by getting a layer to toggle.

     And if you have read the other tutorial, I think you'll find that this one is a whole lot easier to understand.

The Effect

     Here's what I'm talking about:

Dig This

The Layer

     The layer itself carries with it all the stuff needed to place it and make it disappear. It's a one trick pony, but it turns that trick so well.

The code will open in a new window so you can
keep that window open while I talk about it.

     If you haven't noticed already, I've got one of the attributes set to a different color. That's what makes the layer invisible. VISIBILITY="hide" hides the layer.

           All I've got in the layer is a background set to purple and the words "Ta Da!" I'm a clever fellow, ain't I Ma?

     The other parts I'm interested in pointing out to you are the TOP and LEFT settings. It's my opinion that this effect literally hinges on the correct positioning of the layer. I've seen the effect so that each layer comes up near the element it is suppose to work with, and I've seen the effect where the layer comes up somewhere far away from the element that caused it to appear. I also like the look of multiple layers popping up and disappearing due to multiple mouse rollovers. However, each layer popped up in the exact same place. It was like a billboard. It looked great. So when you set this up for yourself - remember that positioning is king.

      I also wanted to make sure you saw that the layer was given a name. In this case, it's "layer1". I again made the name up all by myself. Me clever.

     You'll also note there's an end layer tag. You need that.

     Actually now that I've looked over the text, heck, I've pointed out just about everything. Eh, it'll help you later.

Getting The Toggle Effect

     The entire effect revolves around a JavaScript hierarchy statement meant to point an Event Handler right at the layer in question. Remember, the layer has a name, layer1. Later we'll talk about getting multiple layer toggles. Then the name of the layer becomes quite important.

     Here's the code that made up the first hypertext link in the example:

If you haven't already, close the
other code window before opening this one.

     This is the JavaScript hierarchy statement that makes the magic:


And its counterpart:


     The first makes the layer visible, the second makes the layer disappear. Notice the code is very similar to the code used in an image flip. An onMouseOver and onMouseOut Event Handler is used to enact the hierarchy statement. When the mouse passed over, the layer appears. When the mouse moves off, the layer is hidden. It's just like magic except without the seven beautiful assistants and all the bird poop.

The Button Code

     As you probably noticed, there are also two form buttons that get the effect. They work the same way incorporating the hierarchy statements, except the buttons use an onClick handler to get the job done. Here's the basic code:

If you haven't already, close the
other code window before opening this one.

Multiple Toggling Layers

     As promised, let's talk about toggling multiple layers. Imagine a long line of links down the left side of a page. It would look great if you could get a new layer to show up every time the mouse passed over the next link. It would look like a glorified series of image flips.

     The effect is not hard, but does require some attention. You'll obviously have to create a new layer code for each layer you want to pop up. They're all probably going to say different things I would assume.

     You'll need to set new TOP and LEFT positions unless you want all of the layers to appear in the same location (which isn't a bad look actually).

     But most of all, you will have to assign each layer a different name. They cannot all have the same name. Think up new names for each layer! (Did that drive the point home?)

     Now, since you have new names for each layer, you can create a JavaScript hierarchy for each individual layer. If you have a layer named "bob", then you would use the hierarchy statements:




     ...to affect that "bob" layer.

     Now imagine you create a second layer named "george". The hierarchy statement you created for "bob" will not work for "george". You need to use new george-ready hierarchy statements. They'll look like this:




     Every time you create a new layer, you need to create new hierarchy statements. Then you can set links and buttons to toggle just the right layer.

     And how much fun will that be?

     And that's that. Good luck with the layer thing, and if you haven't looked yet, go see how to get the same look using DHTML with MSIE.


[Toggling with MSIE]
This is a second full tutorial

[The Effect]
[The Layer]
[Getting the Toggle Effect]

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date