HTML and CSS Reference
EXAMPLE 13.8 ( CONTINUED )
<input type="button" value="Click to change window size"
The function shrinkScreen() will cause the screen to be made half its size, if it is
within the lower limit of 100 pixels.
The available screen width, screen.availWidth , and the available screen height,
screen.availHeight , specify the current width or height of the screen, in pixels, minus
features such as the taskbar in Windows. The variables newWidth and newHeight
will get the available screen width and height divided by two.
The window will be resized to the new dimensions created on the previous two
The alert box displays the dimensions of the screen in pixels after it has been re-
The function, getDimensions() , is called whenever the window is resized.
If the outerWidth property exists, the browser is not Internet Explorer. The origi-
nal screen dimensions and the new window dimensions will be displayed in the
alert box. The outerWidth property determines the width of the window (includ-
ing taskbars, etc.); using the innerWidth property determines the width excluding
the text decoration.
Internet Explorer uses the clientWidth property of the document object to get the
width of the window.
The onResize handler is associated with the body of the document. When the win-
dow changes in size, this handler is triggered.
When the onClick event handler is triggered, the shrinkScreen() function will
be called and the screen will be resized to half its size. The output is shown in