HTML Goodies: Script Tip: Week 77

 

Greetings…

     Last week we learned the layer and its properties. Now let’s get it to display. We’ll take the functions in two steps. Today we’ll do the loops and next week we’ll discuss how they work and wrap up the script. Take
another look at the code and its effect and we’ll get started.

---

The Script’s Effect

---

Here’s the Code

---

     We know that the entire layer is on the page; we’ve just made a point of hiding part of it. The function showmenu() reveals the rest of the layer, but rather than just popping it up, it produces a scroll. It’s a nice effect that requires the use of two “for” loops. Since “for” loops are new to the script tips, let’s look at how they work.

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)



}}}

     Rather than simply starting with line one and bulling forward, allow me to give you the overall big picture. Two things are happening in this function. A portion of the layer is being revealed. Then a span of time is allowed to pass, then another piece is revealed, then a span of time is allowed to pass, etc., etc.

     There are two “for” loops in the function. For loops do just as their name suggests, they loop through again and again until some condition is met. Let’s break down the first loop. You don’t know this yet, but this loop represents the number of pixels that will be revealed when the mouse passes over.

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

     In this loop, a variable, “j” is created and given the value of zero. That’s a starting point. Next is the condition of the loop. As long as “j” is less than 70, the loop can continue. Now the third portion of the loop. If “j” is less than 70, then add one to “j”. See those two plus signs in a row? That creates an incremental
count, up by one, each time the loop goes around.

     This “for” loop will have to loop 70 times (zero through 69) in order to meet its conditions.
Again, this loop represents the number of pixels of the layer that will be displayed.

     OK, jumping down again, the next for loop looks like this:

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

     This loop doesn’t produce anything. It simply marks time until the first loop can run again. At the moment, the loop is set to count up to 120. That’s really an arbitrary number. You can change it to whatever you’d like.

     Larger numbers will make the script run slower. Smaller numbers will make the script run faster. Why? Follow the logic:

• The script runs the first loop and posts a new pixel line of the layer.
  
• The next loop counts up to 120, marking time.
  
• When finished the first for loop runs again adding another pixel layer.
  
• The second for loop marks time again for a count of 120.
  
• Back to the top for a new pixel layer.
  
• Mark time again.
  
• New pixel layer.
  
• Mark time.
  
• New layer.
  
• Mark time
  

     Get it? If you ask the second loop to count up to 500 instead of 120, the process will take longer because the loop “marking time” has to count higher.

     Of course, you can probably guess that the first for loop, the one that denotes how many
pixel layers will display, can be altered to show more or less by altering the number. That’s important depending on how large or small your layer must be to allow for a links table.

     The “for” loops always follow the same pattern. First a value is assigned, next is the condition to be met, then an action that somehow changes the variable value attempting to get to the condition.

     Each section is separated by semicolons. Since the “for” loop is a condition, something has to happen. That “something” follows the loop inside the curly brackets. The effect is loop, do what’s inside the curly brackets, loop, curly brackets, loop, etc., etc., until the “for” loop finishes.

     Next week we’ll look at what’s inside those curly brackets and how the function produces the effect.

Next Week: The Total Function

---

Learn to write your own JavaScripts with the