HTML Goodies: Script Tip: Week 78

 

Wrapping it all up…

     OK, we’ve got the basics. We know about the layer, we understand the loops, now let’s put it all together in a function. Yes, I know there are two functions, but look again. They are exactly the same function except for one keystroke.

---

The Script’s Effect

---

Here’s the Code

---

     Here’s that first function:

function showmenu() {



startx = document.layers[”click”].clip.bottom



for (j=0;j<70;j++) {



document.layers[”click”].clip.bottom = startx+j



for (x=0;x<120;x++) {



void(0)



}}}

     The concept of a layer is incorporated in JavaScript through the use of the command “layers”. That’s simple enough. Look at the first line:

startx = document.layers[”click”].clip.bottom

     The variable “startx” is given the value document.layers[”click”].clip.bottom

     This is a hierarchy statement that denotes the current document, then the layer. Notice that the “layers” command acts a lot like calling for an array. Following “layers” are square brackets. Inside those square brackets is the name of the layer the hierarchy statement is to act upon. In this case it’s a layer named “click”.
If you remember back a couple of Script Tips, the name of this layer is “click”, so we’re connected from this statement to that layer.

     Next we further delve into the layer itself asking for “clip”. In Script Tip 76, “clip” was the attribute that denoted the height and width of the layer. We set it so only a portion of the layer was visible.

     Further delving into the layer, we want this hierarchy statement to work on the bottom of the layer.

     OK, so we are attached to the layer and we know that what follows will act upon the bottom of the layer. Now the loops start to roll:

for (j=0;j<70;j++) {



document.layers[”click”].clip.bottom = startx+j



for (x=0;x<120;x++) {



void(0)

     The first loop rolls. The condition is not met so the hierarchy statement document.layers[”click”].clip.bottom is now given the value “startx” plus j.

     See what happens? One is added to the bottom of the layer. Each time the “for” loop rolls another will be added. Don’t be confused as to where the script rolls through each time. It starts again at the “for” loop, not at the top. Some may be confused because the hierarchy statement is set to zero at the very top of the function. That never comes into play again after the loops have begun rolling. Remember that the loop only produces what’s in its curly brackets.

     Look at the curly bracket structure carefully. Inside the first “for” loop’s brackets is the second loop. That second loop is part of the first “for” loop. By doing it this way, you always return back to the first loop.

     The second loop will always complete itself. It will always count up to the number you set. It’s only purpose is to mark time. See what happens once the number is reached? The curly brackets of the second for loop contain a void command. That stops the process. The second loop is complete and the first “for” loop can run again.

     In this case, the first “for” loop will run 70 times. That means the second for loop will count up to 120, 70 times.

     See how it works?

     Now, what about that second function, unshow()?

     It’s the exact same function except instead of adding the value of “j” to “startx”, the value of “j” is subtracted from it. The layer is at full size when this function is triggered. There is no need for it to add anything else; it has to take something away to re-hide the layer.

     There you go, a layer, a couple of loops, and two functions. Again, this only works in Netscape Navigator. If you’d like to get the same effect in Internet Explorer, see my IE Menu tutorial.

     Next week, we will have a script that you’ll find more helpful than you can believe. The script basically takes any HTML document and eliminates the HTML flags, leaving only the text. It’s a great script to help you grab only the words that display when you download a page.

Next Week:

---

Learn to write your own JavaScripts with the