The JavaScript Diaries: Part 8/Page 6

The JavaScript Diaries: Part 8

scrollBy()

This method is used to determine the distance, in pixels, that the document will scroll in a window. The format is:

window.scrollBy(xWidth,yHeight);

Setting the first parameter (shown as xWidth above) will cause the window to scroll from left to right the amount of pixels set in the parameter, as long as there is something to scroll. If the content of the page wraps at the right margin, then it won't scroll to the right. The second parameter (shown above as yHeight) will cause the window to scoll down the page, from top to bottom, the amount of pixels set in the parameter. For instance,

window.scrollBy(0,150);

would cause the page to scroll down 150 pixels from the top of the page. If you want to scroll upward, use a negative number. If the method is placed somewhere other than the top of the document, it would scroll down (or up) the page from the spot where the method is invoked. For instance, if you had the following in the middle of the page:

<form>
  <input type="Button" value="Scroll Window" onclick="window.scrollBy(0,150);">
</form>

the page would scroll down 150 pixels from the place where the button is located. You could use the onLoad event handler to scroll the page once it's loaded:

<body onLoad="window.scrollBy(0,350);">

scrollTo()

This method is used to place a document at a specific destination, given the pixels stated in the parameters in the method. It does not matter if the method is called from someplace other than the top of the document, it will move to the stated parameter, counting from the left or top of the document. This would be similar to using a target link on a Web page: <a href="#linkOnPage">, which would point to a fixed location on the page. The format is:

window.scrollTo(xPixel,yPixel);

Setting the first parameter (shown as xPixel above) will cause the window to scroll to the given pixel from the left of the window, as long as there is something to scroll. If the content of the page wraps at the right margin, then it won't scroll to the right. The second parameter (shown above as yPixel) will cause the window to scoll to the given pixel on the page, counting from the top down. This method does not take negative numbers.

setInterval()

This method is used to repeatedly execute a function at a set interval. The format for this method is:

window.setInterval("functionName()",time);

The first parameter ("functionName()") is the name of the function that you want to have executed. Notice that the function name is in quotes. It's treated as a string to prevent it from executing immediately. The second parameter (time) is the amount of the delay in milliseconds, between each time the function is executed (1 minute = 60000 milliseconds). This is useful in animation, for rotating pictures in a gallery or perhaps refreshing the screen. For instance, to reload a page after an interval of 10 minutes (600,000 milliseconds), try this script:

function reFresh() {
  location.reload(true)
}
window.setInterval("reFresh()",600000);

Here, we declared a function called reFresh. We then used the window.location method. (Remember, since it refers to the window object, which is the highest object, we do not need to include the window object.) The location object contains the URL of the current page. (We'll look at this object a little later in our study.) We used the location method to load a fresh copy of the document from the server. If we didn't add the true parameter, it would reload the page from the user's cache.
Next, we used the setInterval method to reload the Web page every ten minutes (600,000 milliseconds).
Note: It would probably be best to put a notation on the page that it refreshes every ten minutes. This will reload the page and place the focus at the top of the page. If someone is reading three quarters of the way down the page, it will make them lose their place. (I have also created a manual version that can be refreshed by the user. It can be found on JavaScript Search.)

clearInterval()

This method is used to stop the timed loop which was started with the setInterval() method above. The format is:

window.clearInterval(varName);

In order to use it, the loop must be assigned to a variable.

Let's go back to our page refresh script above. We only need to add the var reserved word in front of the setInterval() loop:

function reFresh() {
  window.open(location.reload(true))
}
var repeat=window.setInterval("reFresh()",600000);

Then we could create a button to stop the page refresh:

<form>
  // The next two lines should all be on one line
  <input type="Button" value="Stop the Page Refresh"
    onclick="window.clearInterval(repeat);">
</form>

The function is the same as we created previously except, as I noted, the setInterval method has now been assigned to a variable. The button we created merely says to clear the time interval of the variable repeat. If you want to see this script in action at a faster pace, change the time interval from 600000 (10 minutes) to 60000 (1 minute). Once you load the page, go back and edit the page, adding something to it, and save it. Then, go back to the browser and wait for it to refresh.

setTimeout()

This method is used to execute a JavaScript function after a predetermined amount of time. (The name is a bit misleading. It doesn't stop the script for a period of time; it waits a period of time before beginning.) Unlike the setInterval() method, it only executes once. You will remember we used this when we looked at the blur() and focus() methods. It was used to give the IE browser time to catch up before we printed data to the new window. The format is:

window.setTimeout("functionName()",time);

This method has many different applications. It could be used in a game, to set a specified amount of time for performing a procedure, to reset a page when the computer is set up in a kiosk environment or it could be used to popup a window for a friendly reminder to a visitor. There are many other applications. The trick is not to annoy your visitors. Let's take a look at how this methods works:

function inquire() {
  alert("Are you still there?");
}
var ask=window.setTimeout("inquire()",10000);

This is actually quite simple. First, we declared a function named inquire.
Next, within the function, we gave an alert box a string value of "Are you still there?"
Then we declared a global variable named ask and initialized it with a value assigned to the setTimeout method.
The setTimeout method was given the parameters of the function inquire and a time delay of 10000 milliseconds (10 seconds).

clearTimeout()

This method is used for clearing the time interval set by the setTimeout() method. It works along the same lines as the clearInterval. Using our script above, let's see how it works. First, here's our setTimeout script:

function inquire() {
  alert("Are you still there?");
}
var ask=window.setTimeout("inquire()",10000);

Next, we add a button to our page to cancel the alert window in the inquire function:

<form>
  // The next two lines should all be on one line
  <input type="Button" value="Stop the Alert Window"
    onclick="window.clearInterval(ask);">
</form>

This button can be used to stop the action that will be executed by the setTimeout method.

Conclusion

That wraps up of look at the methods associated with the window object. In the next installment we will take a look at some of the event handlers and see how we can use them.

Continue on to "The JavaScript Diaries: Part 9"

[previous]

Created: August 19, 2005

URL:

The JavaScript Diaries: Part 8/Page 6