HTML and CSS Reference
In-Depth Information
The
onResize
event handler fires when the size of an object has changed.
2
In Firefox,
Opera, and Safari, the
onResize
event handler is fired only when the size of the browser
window changes and can be an attribute or property of the body, frameset, document,
and window objects. In Internet Explorer, the
onResize
event handler is fired when the
size of the browser window or the size of a body element is changed (although Internet
Explorer can be quirky and lock up at times; new problems with this handler were
reported with Internet Explorer 8).
<body onResize="JavaScript:resizeTo(400,400);">
This event handler can be used as an attribute of the window object but is not a valid
attribute for the XHTML body tag. When the size of the document or window changes,
the
onResize
event is fired on the body element in Internet Explorer. In Firefox, Opera,
and Safari, an
onResize
event handler is fired on the body element when the browser win-
dow is resized.
EXAMPLE
13.8
<html>
<head><title>Test window.onresize</title>
<script type="text/javascript">
1
function shrinkScreen()
{
2
var newWidth=screen.availWidth/2;
var newHeight=screen.availHeight/2;
3
window.resizeTo(newWidth,newHeight);
4
alert("The screen's width is: " +
newWidth+ " and the height is: "+ newHeight);
}
5
function getDimensions() {
6
if (window.outerWidth){ //
Firefox
alert("OnResize event: the original screen dimensions
are: " +
screen.availWidth
+" x "+
screen.availHeight
+
"new dimensions are: \n" +
window.outerWidth
+""+
window.outerHeight
);
}
else{ //
Internet Explorer
7
alert("OnResize event: the original screen dimensions
are: "+
screen.availWidth
+" x "+
screen.availHeight
+
"\nnew dimensions are: " +
document.body.clientWidth
+
""+
document.body.clientHeight
);
}
}
2. This event does not fire for files with embedded controls.
