So You Want To Toggle, Huh? Method Two
WEBINAR: On-demand Event
Replace Oracle with the NoSQL Engagement Database: Why and how leading companies are making the switch REGISTER >
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.
Here's what I'm talking about:
The LayerThe 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.
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.
Here's the code that made up the first hypertext link in the example:
other code window before opening this one.
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:
other code window before opening this one.
Multiple Toggling LayersAs 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?)
...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.