Section D. Window geometry

D. Window geometry

The window object represents the graphical browser window the user sees on her computer screen. As such, the window object contains a few objects, methods, and properties that allow you to read out information about, or even change, the graphical browser window.

The screen object

The screen object contains information about the user's computer screen. screen.width and screen.height properties give the screen resolution, while screen.availWidth and screen.availHeight give the available screen resolution, i.e., the screen resolution minus taskbars and such.

screen.colorDepth gives the number of bits per pixel the computer screen can handle. screen.pixelDepth gives the same information, but doesn't work in Explorer.

These properties are often a part of detection scripts, such as Site Survey, in which it is important to gather information about the computer and browser the visitor is using. Other than in such scripts, the screen object has no real use.

Window dimensions

A set of properties contains information about the window dimensions. The most important are window.innerWidth and window.innerHeight, which set the window dimensions.

Nowadays we don't need these properties, because all browsers have made this information available elsewhere. We'll discuss the right way to read out window dimensions in 9H.

Moving, resizing, and scrolling the window

The window object has two methods to move the window, two methods to resize the window, and two methods to scroll the window. They are moveTo(), moveBy(), resizeTo(), resizeBy(), scrollTo(), and scrollBy(). All these methods take two arguments: an x and a y coordinate.

The To() methods are absolute, i.e., the x and y coordinates give the new absolute position, size, or scrolling offset of the window. The By() methods are relative, i.e., they add the given x and y arguments to the current position, size, or scrolling offset of the window.

I use resizeTo() in Site Survey:

[Site Survey/popup.js, lines 59-63]

function startSurvey() {    self.resizeTo(800,600);    self.focus();    document.forms[0].submit(); } 

When the survey starts, the script resizes the popup to 800 x 600 pixels. resizeBy(800,600) would make the popup 800 pixels wider and 600 pixels higher than the current width and height.

Similarly, moveTo(200,100) means "Move the window to 200 pixels right of and 100 pixels below the upper left corner of the screen," while moveBy(200,100) means "Move the window to 200 pixels right of and 100 pixels below its current position."

Finally, scrollTo(200,100) means "Scroll to scrolling offset 200/100." scrollBy(200,100) means "Scroll the page by 200 pixels to the right and 100 pixels to the bottom, starting from the current scrolling position of the page."

Resizeby(0,1)

The most important reason for using resizeBy() is to defeat CSS rendering problems. Occasionally a browser doesn't respond correctly to a CSS change. It is supposed to reinterpret the CSS for the entire page, but due to some bug or other, it doesn't.

Fortunately, all browsers reinterpret all CSS after the window has been resized. Therefore, resize the window minimally, for example: resizeBy(0,1), to ensure that the CSS renders properly. A one-pixel resize is enough; it triggers the CSS reinterpretation and the bugs disappear.

Ideally, follow this up with a resizeBy(0,-1) so that the window regains its original dimensions.

These methods also accept negative arguments: moveBy(-100,-100) means "Move the window to 100 pixels left of and 100 pixels above its current position."

focus and blur

Each window has a method focus() and a method blur(). focus() brings the window to the front of the stacking order; i.e., it becomes the uppermost window on the user's computer screen. The window also gains the keyboard focus; if you press Ctrl+R it's the focused window that reloads. blur() does the opposite: it hides the window behind the other windows.

As we just saw, I also use focus() in Site Survey. When the window has been resized, I focus on it. Then I submit the form, so that the newly resized and focused window contains the start of the actual survey.