Script Tip 76by Joe Burns, Ph.D.
The Spirit of Script Tips...
Well, ever since I put up that tutorial, readers have been clamoring for a script that produces the same effect in Netscape Navigator. Here it is.
The effect is achieved through toggling layers between visible and non-visible. Where this script goes further is that it just doesn't pop the layer up, it actually produces a scrolling effect.
Right up front, I should tell you that I didn't write this one. The author is Tom Richardson Jr.. Tom was one of the first authors to submit to JavaGoodies. He really helped to build the site when it was just getting under way.
So, here it is. Remember, you must be using a Netscape Navigator browser that understands layers (version 4.0 or better).
Yes, yes, I know. I hate the yellow background too. I only put it in there to show the layer and the opening scroll. Before this tutorial is over, you'll know how to lose it altogether or change it to a better color.
There are not two layers. It is only one that, when loaded, only displays a portion of the layer. The onMouseOver effect triggers a function that displays the remainder of the layer.
We'll start with the code for the layer itself and then tackle the two functions.
As you can see, there's only the one <LAYER> and </LAYER> command. This is all one layer.
I'm really only concerned about the main <LAYER> command as everything inside the layer is basic HTML. It's a basic heading created through font flags and then a table containing six cells and six links. The HTML code is quite simple. So, let's look at the LAYER flag:
It starts with "LAYER" obviously. The next command is your concern if you hate the yellow background. It's a simple BGCOLOR attribute. Lose, or change it to whatever color you'd like. I think the best effect is setting it so that the layer and the page background are the same. Then you get the effect of the menu floating on the page. Moving along...
There are methods of getting one function to run multiple layers, but I always like the easy way pf putting multiple similar effects on the same page. I just copy and paste the entire script and layer code again and again, changing the names in each. Yes, it gets a little "codey" but it all stays straight in my brain and that's what's important to me.
Next we set the layer's position, 200 pixels in from the left and 25 down from the top. Keep in mind that these coordinates refer to the upper left-hand corner of the layer itself.
Now we get into shaping the layer when it first appears. The attribute "CLIP" is set to two numbers. The first number refers to the width and the second to the height. I have this layer set to 250 and 25 because that's all the space I needed to surround the heading text. You may have to change these numbers depending on the size or length of the text you decide to make visible on the page when it loads.
Remember that the entire layer is there. You're just hiding it with these numbers. If your height is too tall, some of the table below may show. Be aware of these numbers. They're important to the effect.
Note the returns are false. That means the function effect will not remain. It will want to go away, but we can't just have it popping in and out. We need to smooth that run. We'll do that in the functions and next week.
Next Week: The "For" Loops