The JavaScript Diaries: Part 8/Page 5

The JavaScript Diaries: Part 8

moveBy()

This method is used to move a window to a new location on the screen. The window is "moved by" the number of pixels given within the parameters in the method. You might use it to move a window out of the way of something on the parent window. (The "parent" window is the original window that opened the new window, which would be considered the "child".) The format for this method is:

window.moveBy(xDistance,yDistance);

The first parameter (shown as "xDistance" above) is the number of pixels the window will be moved from side to side. A positive number will move the window to the right, a negative number will move the window to the left. The other parameter (shown as "yDistance") will move the window up and down. A positive number will move the window down, a negative number will move it up. The window will move from its current position, according to the number of pixels, each time the method is invoked. If you kept pressing the "Move Window" button in the example below, the window would move 50 pixels across the page and 50 pixels down the page from its present position when the button is pressed. (You can see how it works by pressing the link here > JavaScript Demo.)

<form>
  <input type="Button" value="Move Window" onclick="window.moveBy(50,50);">
  <input type="Button" value="Close Window" onclick="window.close();">
</form>

Note: This method is best used in opening new windows. In Netscape (7.2), using the moveBy method in the main browser window will cause the browser to resize and move down the screen. In IE (6.0), the window moves down the screen, as in Netscape, but it doesn't resize. Also, in IE it's not possible to move the window by dragging it. In Firefox (1.06), the browser just resizes.

moveTo()

This method is used to "move the window to" a specific location within the screen. It's useful in placing a new window at a specific location on the screen. The format is:

window.moveTo(xDistance,yDistance);

The first parameter (shown as xDistance above) is the number of pixels the window is to be located from the left side of the screen. The second parameter (shown as yDistance) is the number of pixels the window is to be located from the top of the screen. This method does not take negative numbers nor does it continue to move if the method is reinvoked, as does the moveBy() method. (You can see how it works by pressing the link here > JavaScript Demo.)

<form>
  <input type="Button" value="Move Window" onclick="window.moveTo(50,50);"><br>
  <input type="Button" value="Close Window" onclick="window.close();">
</form>

Note: As with the moveBy method, the best use of this method is in the opening of new windows. In Netscape (7.2), using the moveTo method in the main browser window will only cause the browser to resize. In Firefox (1.06), the browser will resize, and then, when pressed a second time, relocate on the screen. In IE (6.0), the window is resized. Also, in IE, it's not possible to move the window by dragging it.

print()

This method is used to print the contents of the current window. When it's called, it opens the browser's print dialog box. The format is:

window.print();

An example would be:

<form>
  <input type="Button" value="Print page" onclick="window.print();">
</form>

resizeBy()

This method is used to resize an existing window. It will increase or decrease the size of the window according to the stated parameters. For example, if the current window is 300 pixels wide by 400 pixels high, and the method given is resizeBy(150,50), the window will be resized to 450 pixels wide by 450 pixels high (300+150=450 wide and 400+50=450 high). The top left portion of the window will remain where it is. The rest of the window will expand out from that position. If the method is used again with the same stated parameters, resizeBy(150,50), the window would resize to 600 pixels wide by 500 pixels high (450+150=600 wide and 450+50=500 high). The format is:

window.resizeBy(xSize,ySize);

The first parameter (shown as xSize above) determines the distance, in pixels, of the window from the left side of the new window, increasing or decreasing the current size of the window. The second parameter (shown as ySize above) determines the distance, in pixels, of the window from the top of the browser window, increasing or decreasing the current size of the window. Positive numbers make the window larger, negative numbers make it smaller. The method only affects the lower right-hand corner of the window as it resizes from the top, left hand corner. The top, left hand corner does not move. The window is sized from there. If you only need to adjust one parameter, set the other one to "0" (zero) as both are required.

<form>
  <input type="Button" value="Move Window" onclick="window.resizeBy(150,50);"><br>
  <input type="Button" value="Close Window" onclick="window.close();">
</form>

In this example the browser window will be increased by 150 pixels in width and 50 pixels in length, starting at the top, left hand corner.

resizeTo()

This method is used to resize an existing window. Unlike resizeBy(), which increases or decreases the size of the window by a given parameter, resizeTo() will change the entire size of the window according to the stated parameters. i.e. It will "resize the window to." The measurements, in pixels, are the actual width and height of the outer dimensions of the window. For example, if the current window is 300 pixels wide by 400 pixels high and the method given is resizeTo(250,500), the window will be resized to 250 pixels wide by 500 pixels high. The orignial size does not matter. The format is:

window.resizeTo(xWidth,yLength);

Together, the two parameters determine the new size of the window:

<form>
  <input type="Button" value="Move Window" onclick="window.resizeBy(350,250);"><br>
  <input type="Button" value="Close Window" onclick="window.close();">
</form>

In the example above the window will be resized to 350 pixels wide and 250 pixels long.

[previous] [next]

Created: August 19, 2005

URL:

The JavaScript Diaries: Part 8/Page 5