reptile7's JavaScript blog
Friday, July 04, 2008
Viewport Flux
Blog Entry #118

Many moons ago, way back in Blog Entry #18, we briefly discussed the use of the Netscape-specific innerWidth and innerHeight properties of the window object to set the dimensions of a browser window and also the use of the Netscape-specific screenX and screenY properties of the window object to position a browser window relative to the monitor screen. We return to these properties in today's post as we take up HTML Goodies' "Minimize/Maximize a Browser Window" tutorial, which presents a script containing
(a) a Maximize( ) function that 'maximizes' a browser window, i.e., blows it up so that it covers the entire screen, and
(b) a Minimize( ) function that 'minimizes' a browser window, more specifically, shrinks it to a 100px-by-100px smaller window; Netscape notes here that the Navigator browser's windows have an enforced minimum size of 100 x 100 pixels.
The Maximize( ) function thus effectively mimics the maximize button of the Windows interface:

Components of the Windows interface

However, per the above description, the Minimize( ) function does not convert a browser window to a button on the task bar.
(A picture is worth a thousand words, eh? The Windows components image came from Figure 2.14 on this page (sorry for providing a link to a cached resource, but the original file is at press time strangely unavailable) created by Professor Charles Ward at the University of North Carolina Wilmington.)

Here's the "Minimize/Maximize a Browser Window" script:

<script type="text/javascript">

function Minimize( )
window.innerWidth = 100;
window.innerHeight = 100;
window.screenX = screen.width;
window.screenY = screen.height;
alwaysLowered = true;

function Maximize( )
window.innerWidth = screen.width;
window.innerHeight = screen.height;
window.screenX = 0;
window.screenY = 0;
alwaysLowered = false;

<a href="javascript:onclick=Minimize( );">Minimize</a>
<a href="javascript:onclick=Maximize( );">Maximize</a>

The tutorial provides a script demo page here.


The Minimize( ) and Maximize( ) functions are called by JavaScript URLs assigned to the href attributes of the "Minimize" and "Maximize" hyperlinks. The "onclick=" part of these URLs can be removed:

href="javascript:Minimize( );" <!-- and --> href="javascript:Maximize( );"

is all that's necessary.

Mozilla's DOM window Reference will tell you that the innerWidth property and the innerHeight property are read-only, but the now-"obsolete"-but-still-essential JavaScript 1.3 Client-Side Reference will tell you that they are writable; in practice on my computer, I find that Netscape 7.02 does indeed write them. The Minimize( ) function sets both innerWidth and innerHeight to 100 (pixels), the minimum value as noted earlier. Conversely, the Maximize( ) function sets innerWidth to screen.width and innerHeight to screen.height.

The client-side screen object, which represents the monitor screen, does not appear in the 'classical JavaScript' Navigator object hierarchy but is now listed as a property (child object) of the window object on Mozilla's DOM window Reference page (this might seem counterintuitive - you might think that the screen object would be at least a peer or even the parent of the window object - however, there's no reason why a browser window can't be larger than the monitor screen, and recall from CSS 2.1 that a browser window ("viewport") frames a document "canvas" whose dimensions are "infinite"); you won't find anything on the screen object in any of the W3C's DOM materials. Mozilla's definitions of screen.width and screen.height could be fleshed out a bit more; although it's true that, respectively, these properties return the width and height in pixels of the monitor screen, it would be more accurate to say that they return the horizontal and vertical resolutions in pixels of the screen: the values of these properties will change if you change the resolution of your monitor (e.g., from 800 x 600 to 1024 x 768).

Above and beyond the document content area, the innerWidth width and the innerHeight height respectively include (if present) the right and bottom scrollbars but they exclude the rest of the 'browser chrome': specifically for Netscape 7.02, innerWidth does not include the window's left and right borders or sidebar whereas innerHeight does not include the window's title bar, navigation toolbar, personal toolbar, tab bar, status and component bars, or bottom border. In practice, I find that assigning screen.width to window.innerWidth and screen.height to window.innerHeight gives an enlarged window whose
(a) right border has been pushed beyond the right edge of the screen (as expected),
(b) left border/sidebar are still on-screen and abut the left edge of the screen (in theory, these components should be pushed just beyond the left edge of the screen),
(c) bottom border and status/component bars have been pushed beyond the bottom edge of the screen (as expected), and
(d) upper browser chrome is still on-screen and abuts the top edge of the screen (in theory, these components should be pushed just beyond the top edge of the screen).

The window object has outerWidth and outerHeight properties whose values are supposed to include the browser chrome parts excluded by the innerWidth/innerHeight properties, but at least with Netscape 7.02 on my computer, assigning screen.width to window.outerWidth and screen.height to window.outerHeight gives a window identical to that described above - the right and bottom parts of the browser chrome are again pushed off-screen.

A careful counting of window pixels with the DigitalColor Meter utility revealed that, in fact, outerWidth was not including the window's left and right borders (together constituting 13 pixels of unrecognized horizontal chrome) and outerHeight was not including the window's title bar and bottom border (together constituting about 30 pixels of unrecognized vertical chrome).* In addition, a probe of my system's screen.availHeight return - the amount of vertical space available to the window on the screen - revealed that an 800px-by-20px region at the bottom of my screen is unavailable for display (with my monitor's resolution set to 800 x 600, screen.height returns 600 and screen.availHeight returns 580, whereas screen.width and screen.availWidth both return 800). To get the entire maximized window on-screen, then, we'll need to assign slightly smaller lengths to the window width and height; it follows from the preceding discussion that

window.outerWidth = screen.width - 13;
window.outerHeight = screen.height - 50;

will reliably do the trick when using Netscape 7.02.

*I repeated this exercise with an earlier version of Netscape, specifically, Netscape 4.79 (the tutorial script was evidently designed for Netscape 4.x given that the tutorial was written in July 2000, a few months prior to Netscape 6.0's release); with this browser, I found that outerWidth and outerHeight pick up every pixel of chrome (as they are supposed to). You would thus expect

window.outerWidth = screen.availWidth;
window.outerHeight = screen.availHeight;

to get all of the maximized window on-screen, and they do, with 8 pixels of horizontal space and 8 pixels of vertical space to spare.

(Something else I learned: both Netscape 7.02 and Netscape 4.79 impose a limit on how large of a window they will generate; for an 800 x 600 screen, regardless of the values assigned to innerWidth and innerHeight, Netscape 7.02 gives a maximum window whose document content area measures a full 800px by 600px whereas Netscape 4.79 gives a maximum window whose document content area measures 792px by 572px.)

There's more to maximizing a window than getting its dimensions right; we must also line up the window/screen x-y coordinate systems. Accordingly, the Maximize( ) function equalizes the window/screen 'origins' (i.e., their upper-left-hand corners) by assigning 0 to both window.screenX and window.screenY. The preceding Mozilla links imply that screenX and screenY are read-only properties; for its part, the JavaScript 1.3 Client-Side Reference alleges, Setting the values of the screenX and screenY properties requires the UniversalBrowserWrite privilege. In the event, I find that both Netscape 7.02 and Netscape 4.79 write these properties uneventfully without doing anything special on my part.

The Minimize( ) function sets window.screenX and window.screenY to screen.width and screen.height, respectively; in theory, these assignments should push a window completely off-screen - the window's upper-left-hand corner should coincide with the screen's lower-right-hand corner - the whole point of minimizing a window, after all, is to get it out of the way. In practice, however, the minimized window is still on-screen and approximately abuts the screen's lower-right-hand corner - depending on the version of Netscape you're using, the window's right and bottom chrome, plus a small amount of adjoining document content area, may or may not be pushed off-screen. (As noted earlier, the Minimize( ) function does not convert a window to a task bar button, and perhaps the script's author thought that this was 'the next best thing'.) Netscape notes here that a [Navigator] window won't move past the screen boundaries if you don't have the UniversalBrowserWrite privilege, which I guess is really necessary this time.

Lastly and leastly, the Minimize( ) and Maximize( ) functions respectively assign true and false to "alwaysLowered". Contra the tutorial, alwaysLowered has absolutely nothing to do with lower[ing] and mov[ing] the [minimized] window to the bottom right of the screen - it isn't even a normal property of the window object. Actually, alwaysLowered is an optional feature for a )-opened window; Netscape defines it here: If yes, creates a new window that floats below other windows, whether it is active or not. This is a secure feature and must be set in signed scripts - in other words, "alwaysLowered=yes" generates a persistently 'popped-under' window. Even if the alwaysLowered statements were deployed correctly, and assuming that another window is open on the screen, are we interested in hiding the minimized window and its "Maximize" hyperlink? Not at all. The alwaysLowered code can and should be thrown out.

In sum, the "Minimize/Maximize a Browser Window" script works reasonably well with Netscape given that, at least on the basis of Mozilla's materials, the innerWidth/innerHeight and screenX/screenY properties would not be expected to be writable. Next question: can the script be modified so that it works with MSIE? Tune in to the next post to find out!


Comments: Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)