Wednesday, July 16, 2008
Viewport Flux, Part 2
Blog Entry #119
We return now to our discussion of HTML Goodies' "Minimize/Maximize a Browser Window" tutorial. In this entry:
(1) We'll address the tutorial script's (in)compatibility with Internet Explorer with respect to the script's original property-based design.
(2) Subsequently, I'll give you a cross-browser script and demo based on window object methods for maximizing/minimizing browser windows.
Window dimensions
The MSDN Library's window object page doesn't list any width/height-type properties associated with the window object*: no width/height, innerWidth/innerHeight, or outerWidth/outerHeight.
(*This isn't quite true: Microsoft's window object does have dialogWidth and dialogHeight properties that apply to "dialog" windows created by the showModalDialog( ) and showModelessDialog( ) methods, but this is a can of worms we're not going to open.)
Microsoft introduced with MSIE 4 clientWidth and clientHeight properties that are applicable to the body element/object; respectively, the expressions document.body.clientWidth and document.body.clientHeight are approximately equivalent (they don't take scrollbars into account) to Mozilla's window.innerWidth and window.innerHeight. However, clientWidth and clientHeight are read-only properties; I can confirm that MSIE throws "Object doesn't support this property or method" runtime errors upon attempts to write them. And now that I think about it, even if clientWidth/clientHeight were writable, there's no reason to expect that changing the size of the body element would change the size of the window that contains it.
With respect to maximizing a window, and pushing a minimized window off-screen, MSIE does at least support a screen object with width and height properties that are equivalent to their Mozilla counterparts.
Window positioning
Microsoft offers screenX and screenY properties for the event object (as does Mozilla) but not for the window object. Instead, MSIE supports screenLeft and screenTop properties that correspond, but are not equivalent, to Mozilla's screenX and screenY window object properties; screenLeft measures the horizontal distance between the left edge of the monitor screen and the left edge of a browser window's document content area (unlike the screenX length, the screenLeft length includes the left part of the browser chrome), whereas screenTop measures the vertical distance between the top edge of the screen and the top edge of a window's document content area (unlike the screenY length, the screenTop length includes the top part of the browser chrome).
The preceding MSDN links say that screenLeft/screenTop are also read-only, although I don't know for certain what happens if you try to write them because they are not supported by MSIE 5 for the Macintosh; as noted here in Blog Entry #18, window.screenLeft and window.screenTop both return undefined with MSIE 5.1.6 on my iMac.
A method-based approach
So for getting the script to work with MSIE, things aren't looking so good on the window object properties front. But hold on a minute: the second paragraph of the tutorial's "Here's What's Happening" section begins,
There are other methods of getting the same resize effect, but the first time I saw this done, the author used the innerWidth and innerHeight commands, so I kept it that way.Ka-ching! Methods? Speak up, Dr. Burns, what methods might those be? Come, gentle reader, let me tell you about them...
For setting a window's dimensions:
(1) Both Microsoft and Mozilla offer a resizeTo( ) method
window.resizeTo(iWidth, iHeight);
that resizes the current window to a width** of iWidth pixels and a height** of iHeight pixels, subject to browser constraints: specifically, the resizeTo( ) method will not generate a smaller-than-the-minimum or larger-than-the-maximum window allowed by a browser.
**The precise meanings of width and height in this context are browser-dependent. We noted in the previous entry that Netscape 7.02 and Netscape 4.79 interpret the outerWidth and outerHeight properties differently; I find that both MSIE 5.1.6 and Netscape 7.02 use the resizeTo( ) iWidth/iHeight values to set a window's outerWidth/outerHeight lengths as Netscape 7.02 interprets them, i.e., the left border, right border, title bar, and bottom border parts of the browser chrome are excluded. In contrast, Netscape 4.79 uses the iWidth/iHeight values to set a window's innerWidth/innerHeight lengths (ironically, Netscape's original resizeTo( ) documentation specifies that the iWidth/iHeight values should set a window's outerWidth/outerHeight lengths as Netscape 4.x interprets them, i.e., all parts of the browser chrome should be included).
(2) Microsoft and Mozilla also provide a related resizeBy( ) method that resizes a window vis-à-vis its current size.
For positioning a window:
(1) Both Microsoft and Mozilla offer a moveTo( ) method
window.moveTo(x, y);
that offsets the left edge of a window x pixels from the left edge of the monitor screen and the top edge of a window y pixels from the top edge of the screen, again subject to browser constraints: specifically, a window cannot be pushed completely off-screen via the moveTo( ) method.
(2) Microsoft and Mozilla also provide a related moveBy( ) method that offsets a window vis-à-vis its current position.
The browsers on my computer generate differently sized maximum windows and differently sized minimum windows, and they behave differently in response to attempts to push a window off-screen, and thus the code I offer below does not give identical results with these browsers but it works well enough for my tastes (it'll be up to you to tweak it if the results are not to your tastes).
Maximizing a window
Let's pick the low-hanging fruit first; maximizing a window is definitely more straightforward than minimizing a window. I find that
window.resizeTo(screen.width - 13, screen.height - 49);
window.moveTo(0, 0);
gives a nicely maximized and entirely on-screen window when using either MSIE 5.1.6, Netscape 7.02, or Netscape 4.79. Of these browsers, Netscape 7.02 gives the largest maximum window; the -13/-49 screen.width/screen.height adjustments are the minimum needed to get the Netscape 7.02 window completely on-screen.
Minimizing a window
Let's begin by harmonizing the hyperlink font/position across (modern) browsers with the following style rule set:
body { font-size: 16px; font-family: Arial, sans-serif; margin-left: 10px; margin-top: 8px; }
After quite a bit of experimentation, I find that
window.resizeTo(152, 154);
window.moveTo(screen.width - 158, screen.height - 170);
gives an acceptable minimized window with both MSIE 5.1.6 and Netscape 7.02.
Of the browsers on my computer, Netscape 7.02 gives the smallest minimum window, measuring outerWidth=100px by outerHeight=100px or precisely 113px by 129px if all of the browser chrome is included. With Netscape 7.02, if all of the top chrome bars are visible, the preceding code generates a window with a 152px-by-34px on-screen document content area in which the "Maximize" hyperlink does not wrap:
MSIE 5.1.6 gives a considerably larger minimum window, measuring precisely 329px by 229px if all of the browser chrome is included; on the other hand, unlike Netscape, MSIE allows its windows to be pushed almost completely off-screen with the moveTo( ) method. With MSIE 5.1.6, if all of the top chrome bars are visible, the preceding code generates a window with a 152px-by-35px on-screen document content area:
Netscape 4.79's minimum window measures innerWidth=100px by innerHeight=100px or precisely 113px by 239px if all of the browser chrome is included. The Netscape 7.02/MSIE 5.1.6 code can be used with Netscape 4.79, but you'll get a smaller window if you use the following code that mirrors the corresponding commands in the original script:
window.resizeTo(100, 100);
window.moveTo(screen.width, screen.height);
Here's the Netscape 4.79 minimized window - its document content area and right chrome are entirely on-screen but its bottom chrome is mostly off-screen:
The "Maximize" hyperlink wraps, as it does in Joe's original demo.
Follow this link to try out my code (I've slightly modified it so as to accommodate the OS X browsers on my current computer) on your system - a demo page will open in a new 400px-by-400px window.
Before ending this section, I should mention that the innerWidth, innerHeight, outerWidth, outerHeight, clientWidth, clientHeight, screenX, and screenY properties are all on track for W3C adoption, but only in a read-only sense. It is to be hoped that the W3C will in the future decide that the normal CSS width and height properties should apply to browser windows in a read/write sense, and that Microsoft, Mozilla, and other vendors will update their browsers accordingly.
We'll wrap up our analysis of the "Minimize/Maximize a Browser Window" tutorial with a brief follow-up post in which we'll discuss the use of hyperlinks to open new browser windows.
reptile7
- posted by A. Peak @ 6:06 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)