6.1 Setting the Main Window's Size

NN 4, IE 4

6.1.1 Problem

You want to resize the browser window that contains the current page.

6.1.2 Solution

Ever since Version 4 of Internet Explorer and Netscape, scripters have been able to adjust the pixel size of the browser window with two window object methods: resizeTo( ) and resizeBy( ). To resize the window to a specific pixel size, use the resizeTo( ) method:

window.resizeTo(800, 600);

To increase or decrease the size of the window by a fixed pixel amount, use the resizeBy( ) method:

window.resizeBy(50, -10);

Adjustments affect the outside measure of the browser window.

6.1.3 Discussion

Both parameters are in pixel measures and are required for both methods. The first value affects the width of the window, the second value affects the height. In the case of the resizeBy( ) method, if you want to modify only one axis value, pass a value of 0 as the other parameter.

When you resize a window, the position of the top-left corner of the window does not change. Instead, the right and bottom edges of the window move to meet the requirements of the method parameters. See Recipe 6.2 and Recipe 6.3) for how to move and maximize the window.

These two window object methods may also be applied to subwindows that your scripts open (see Recipe 6.4). As long as the script that creates the new window maintains a reference to the subwindow in a global variable, you can reference that window's resizeTo( ) and resizeBy( ) methods.

Resizing the window to accommodate content of a known size isn't as easy to do across browsers as it might seem. Only Navigator 4 and later provide a pair of read/write properties—innerHeight and innerWidth—that let you specifically control the content region of the browser window. Internet Explorer provides no comparable scriptable feature. Trying to use the outer window dimensions as a guide to the content region size is not reliable. Users can select different sets of toolbars and toolbar settings that can throw off careful calculations you make on test browsers.

Whether you should script the size of a window that is already open is hotly debated among user interface designers. By and large, users are not fond of web pages hijacking their browser windows. It's not uncommon, especially for experienced users, to have a carefully customized layout of application windows on the desktop. Along comes a maverick web page that makes the browser window take over nearly the entire screen. Upon leaving the site, the web browser window remains in its giant size, and the user must reconstruct the desktop arrangement. Take these considerations into account before you deploy window resizing.

6.1.4 See Also

Recipe 6.2 for setting the position of the window on the screen; Recipe 6.3 for a way to approximate a maximized window; Recipe 6.4 for how to open a new window.