resizeTo()

You can size a window with JavaScript using "window.resizeTo()". Here's an example. Clicking the "Big" link makes the window bigger and the "Small" link makes the window smaller.

NOTE: If the window's too small to see the links, drag its lower-right corner to make it bigger.

This effect is coded by using the "resizeTo()" method:

window.resizeTo(300,300)

This would resize the window to 300 pixels wide and 300 pixels tall. The width is represented by the first number and the height is determined by the second. They are separated by a comma. This defines the dimensions you want the window to "grow" or "shrink" to.

You'll notice when using resizeTo() to size a window that the window grows as if it's being dragged from the bottom-right corner. This is the only way it grows. Keep this in mind. It's a good idea to move a dynamically sized window toward the top-left corner of the screen (moveTo()) to insure growing room.

Netscape will not reliably resize a window that's been opened with "window.open()" and given a set height and width in the "window.open()" statement.

To get "resizeTo()" to work with this type of window in Netscape, don't size the window in the "window.open()" method. Instead, use an initial "resizeTo()" statement right after the "window.open". Here's how I opened the window above:

frank = window.open("samp107.htm");
frank.resizeTo(300,300); frank.moveTo(20,20);

You'll see that I've left the sizing, and everything else, out of the "window.open()" statement. I then resized the window, which I named "frank", with an initial "resizeTo()" in the second statement.

The code in the resizing window is coded right in the links on the page:

<a href="javascript:window.resizeTo(200,200)">
SMALL</a>

The "BIG" link is coded similarly:

<a href="javascript:window.resizeTo(600,500)">
BIG</a>

The only difference between the links are the dimensions. Remember that the first number represents the width you want to size to in pixels. The second number is the height.

resizeBy()

The "window.resizeBy()" method is slightly different than it's "resizeTo()" cousin. It does not size a window to a specific width or height. Instead, it changes a window's dimensions a certain number of pixels from it's current size.

Here's an example. Each click of the "Grow" link makes the window bigger by 50 pixels in width and height. The "Shrink" link makes it smaller by 50 pixels in each dimension.

The statement that makes the links in the above example work is:

window.resizeBy(pixel change in width, pixel change in height)

Here's the code in the "Grow" link:

<a href="javascript:window.resizeBy(50,50)">

It's easy to get this confused with "resizeTo()". If we'd used "resizeTo()" in this statement, we'd make the window 50x50 pixels in size. The "resizeBy()" in this case makes the window grow by 50 pixels in width and height from its current size.

The "resizeBy()" method adds to or subtracts from the current dimensions. It does not set absolute dimensions. That's the job of "resizeTo()".

You can use any pixel values you want. Even negative values. This is how you get the window to shrink:

<a href="javascript:window.resizeBy(-50,-50)">

Note the use of minus signs (-) before each "50". This causes the browser to "shrink" by 50 pixels.

You don't have to use 50 pixels. You can use any combination of pixels you'd like. You can mix both negative and positive numbers.

Some Practical Considerations

There are some limits to how small and large you can make a window. If a window becomes larger than the viewer's screen, it will grow off of the screen and often cause an error.

You can run into problems with Netscape when trying to size a window narrower or shorter than 100 pixels. IE will size windows as small as you want, but really tiny windows aren't that useful.

Summary & Exercises

You can set a windows dimensions anytime with a JavaScript Event and "window.resizeTo(width,height). The width and height are numbers representing each dimension's size in pixels.

You can also resize windows by making them grow or shrink a given number of pixels from their current size. This is done with "window.resizeBy(width,height)".

Make a small window that grows over time to a certain point and then shrinks to a tiny size and stops. Control the timing of the growth and shrinkage by using "setInterval("function()", milliseconds). Stop the growth or shrinkage by checking the the dimensions with an IF statement and clearing the interval (clearInterval(interval_name)).

If you need to learn about "setInterval()" check out the Scrollbar Detection Tutorial.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index