Friday, March 29, 2024

So You Want To Toggle, Huh? Method Two

…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:

document.layer1.visibility=’show’

And its counterpart:


document.layer1.visibility=’hide’

     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:

document.bob.visibility=’show’


and


document.bob.visibility=’hide’


     …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:


document.george.visibility=’show’


and


document.george.visibility=’hide’

     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]


Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured