/beyond/javascript/stips/article.php/3472151/HTML-Goodies-Script-Tip-Week-77.htm HTML Goodies: Script Tip: Week 77

HTML Goodies: Script Tip: Week 77

By Joe Burns



     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++) {



     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.

Want more information about layers?
Search the Web.

     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

     Do YOU have a Script Tip you'd like to share? How about suggesting a Script Tip to write about? I'd love to hear it. Write me at: jburns@htmlgoodies.com.

Learn to write your own JavaScripts with the HTML Goodies 30-Step Primer Series

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date