6.3 Maximizing the Main Window

NN 6, IE 5

6.3.1 Problem

You want to expand the browser window so that it occupies the same screen real estate as a maximized (Windows) application window.

6.3.2 Solution

Use the following function, which operates best in Internet Explorer 5 or later and Netscape 6 or later:

function maximizeWindow( ) {
    var offset = (navigator.userAgent.indexOf("Mac") != -1 || 
                  navigator.userAgent.indexOf("Gecko") != -1 || 
                  navigator.appName.indexOf("Netscape") != -1) ? 0 : 4;
    window.moveTo(-offset, -offset);
    window.resizeTo(screen.availWidth + (2 * offset), 
                   screen.availHeight + (2 * offset));
}

Although the window may occupy the entire screen and appear to be maximized (in the Windows OS sense), the browser is not officially maximized.

6.3.3 Discussion

The notion of maximizing (and minimizing) a window is primarily a Windows phenomenon. Macintosh windows, for example, have an icon that performs an optimization for window size, but it tends to leave a space along the right edge of the screen so that a portion of the underlying Desktop is still visible. A maximized window under Windows, however, occupies the entire screen except for the Taskbar (if the Taskbar is visible in your preferences settings).

Scripts can, at best, simulate a maximized window, but even then, there are some limitations for one browser or another. First of all, a truly maximized window in Windows is not positioned at point 0,0 of the screen. Instead, the top-left corner of the window is located at point -4,-4, which is just slightly off screen. This hides the four-pixel border around the window, and lets the active part of the window (including titlebar, toolbars, and scrollbars) "bleed" right to the edge of the video screen. The Macintosh doesn't behave this way, choosing instead to allow the thin window border to be visible at all times.

But it is not enough to simply look for the operating system running the page to set this offset value. The Netscape browser (from Version 4 onward) does not allow windows to be positioned off the screen unless signed scripts are used. Therefore, it is not practical to apply the four-pixel offset to browsers bearing the Netscape application name nor to the Gecko engine.

When the four-pixel offset is applied (for IE under Windows), the height and width of the window must be adjusted for twice the thickness in order to fill the entire available screen space. When maximized in this way, the browser window is exactly the same size and position as an officially maximized window. The only difference is that in the scripted simulation, the resize icon at the lower right corner of the window is visible, allowing users to manually drag the window's size as desired.

To determine the space available for a simulated maximized window, the screen object's availWidth and availHeight properties provide sufficient detail for most operating systems and browsers. In the case of Windows, these properties return dimensions of the space other than that occupied by the Taskbar. The only detail you cannot deduce is whether the Taskbar is in its default location at the bottom of the screen or the user has moved it to the top. On the Macintosh side, the screen.availHeight property begins its measure immediately below the universal menu bar. In fact, browsers treat the screen space so that coordinate 0,0 is at the top-left corner of the available space. Thus, positioning the window at 0,0 to simulate a maximized window does not slip the window underneath and make it partially obscured by the menu bar. To make a pseudomaximized window appear more Mac-friendly, consider altering the width component of the resizeTo( ) method to leave about 100 horizontal pixels uncovered on the right side.

The behavior of the function shown in this recipe with older and other brands of browsers is unpredictable. In the case of Opera, for example, the fact that the window is not officially maximized means that the titlebar of the window remains visible and affects the alignment of the content region of the window.

Just as there is no scripted way to officially maximize a window, there is no equivalent to minimizing the window either. You could try to simulate it with IE for Windows by moving the window off screen until it receives focus (when a user clicks on the window's region in the Taskbar), but Windows sometimes fails to fire the desired window events, such that (at least in the days preceding Windows XP), the operating system didn't know which window was the one with focus.

6.3.4 See Also

Recipe 6.1 for other window resizing advice.