HTML and CSS Reference
In-Depth Information
EXAMPLE
13.8 (
CONTINUED
)
</script>
</head>
8
<body onResize="getDimensions();">
<form>
<input type="button" value="Click to change window size"
9
onClick="JavaScript:shrinkScreen()" />
</form>
</body>
</html>
EXPLANATION
1
The function
shrinkScreen()
will cause the screen to be made half its size, if it is
within the lower limit of 100 pixels.
2
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.
3
The window will be resized to the new dimensions created on the previous two
lines.
4
The alert box displays the dimensions of the screen in pixels after it has been re-
sized.
5
The function,
getDimensions()
, is called whenever the window is resized.
6
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.
7
Internet Explorer uses the
clientWidth
property of the document object to get the
width of the window.
8
The
onResize
handler is associated with the body of the document. When the win-
dow changes in size, this handler is triggered.
9
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
Figure 13.9.
