Приглашаем посетить
Андреев (andreev.lit-info.ru)

Manipulating the Window

Manipulating the Window

The window object exposes methods for moving, resizing, and scrolling the window. All three operations can be performed relative to the current window state or to a new absolute position through a pair of methods for each operation. The following table lists these methods and their actions.


Method Manipulates Description
moveBy(offsetTop, offsetLeft) Window Moves the window by the specified offsets (measured in pixels)
moveTo(top, left) Window Moves the window so that its top left corner is at the specified location (measured in pixels)
resizeBy(offsetWidth, offsetHeight) Window Resizes the window by the specified offsets (measured in pixels)
resizeTo(width, height) Window Resizes the window to the specified size (in pixels)
scrollBy(offsetHorizontal, offsetVertical) Document Scrolls the document by the specified offsets (measured in pixels)
scrollTo(horizontal, vertical or scroll(horizontal, vertical) Document Scrolls the document to the specified position (measured in pixels; scrollTo and scroll are aliases for each other)

The Manipulates column specifies whether the method applies to the physical window or to the current document. Normally, window methods called within a frame apply to the current frame, but the moving and resizing methods are exceptions. These methods always apply to the containing window. Therefore, an invocation of any of these four methods is the same as calling the method on the topmost window, as shown here:

top.methodName

The top property is described in the section "Manipulating Framesets" later in this chapter. This property of a window object always returns the topmost window in the document hierarchy. The moving and resizing methods have restrictions preventing them from moving the window off the screen or sizing it too small to be seen. The scrolling methods manipulate the document in the window the method is invoked on. The scrolling methods correspond to the scrollTop and scrollLeft properties exposed on the body property of the document, which are introduced in Chapter 9, "Scripting Individual Elements." Calling the scrollTo method is the same as assigning new pixel values to these properties.

Scrolling the Window

The scroll method (and the equivalent scrollTo method) can be used to scroll the document to a specified location using xy-coordinates. The xy-coordinates are specified in pixels relative to the document's top left corner—this means that scroll(0, 0) always scrolls the top left corner of the document onto the screen.

The scroll method will not scroll past the end of the document. If you pass a vertical argument that is too large, for example, the scroll method will not return an error; it will simply scroll the bottom of the document to the bottom of the screen. You cannot write code that will scroll the last line of the document off the screen.

Whenever the document is scrolled, an onscroll event is fired on the window. This event fires regardless of whether the scrolling is the result of the scroll method or the user manually scrolling the document.

In general, you should not write code that relies on the position of the scrollbar, even if the width and height of the document are taken into account, because different resolutions and different platforms may render fonts larger or smaller or calculate the size of the document differently. Instead, you should write more generic code that checks for specific state changes. For example, in response to the onscroll event, you can write code that directly checks whether an element is on the screen rather than trying to infer the location from the scroll position.

More browsers support the scroll method than the equivalent scrollTo method. The scrollTo method was introduced to allow naming consistency with the moving and resizing methods.

Creating an Auto-Scrolling Window

The following code shows you how to use a timer to create a document that automatically scrolls. This code demonstrates how to use the scroll method and take into account the document's size. This example produces scrolling text similar to that produced by the built-in Marquee element.

<HTML>
   <HEAD>
      <TITLE>Automatically Scrolling Window</TITLE>
      <SCRIPT LANGUAGE="JavaScript">
         var tScroll;
         var curPos = 0;

         function runTimer() {
            curPos = document.body.scrollTop + 3;
            window.scroll(0, curPos);
            // Start over when end of document is reached.
            if (curPos > document.body.scrollHeight -
                  document.body.clientHeight)
               window.scroll(0, 0);
            tScroll = window.setTimeout("runTimer();", 100);
         }

         window.onload = runTimer;
         window.onunload = new Function("clearTimeout(tScroll)");
      </SCRIPT>
   </HEAD>
   <!-- The margin-bottom style attribute adds white space
        following the last line of text. -->
   <BODY STYLE="margin-bottom:350pt">
      Contents to scroll
   </BODY>
</HTML>

[Содержание]