This chapter is from the book
This chapter is from the book
This chapter is from the book
Moving and Resizing Windows
New to JavaScript 1.2 is the ability to move or resize windows. While Netscape 4 placed some restrictions on this, Netscape 6 and Internet Explorer 5 and later allow you to move and resize any window freely. You can do this using the following methods for any window object:
window.moveTo() moves the window to a new position. The parameters specify the x (column) and y (row) position.
window.moveBy()moves the window relative to its current position. The x and y parameters can be positive or negative, and are added to the current values to reach the new position.
window.resizeTo()resizes the window to the width and height specified as parameters.
window.resizeBy() resizes the window relative to its current size. The parameters are used to modify the current width and height.
As an example, Listing 11.2 shows an HTML document with a simple script that allows you to resize or move the main window.
Listing 11.2 Moving and resizing the current window
<html>
<head>
<title>Moving and resizing windows</title>
<script language="javascript1.2" type="text/javascript1.2">
function DoIt() {
if (document.form1.w.value && document.form1.h.value)
self.resizeTo(document.form1.w.value, document.form1.h.value);
if (document.form1.x.value && document.form1.y.value)
self.moveTo(document.form1.x.value, document.form1.y.value);
}
</script>
</head>
<body>
<h1>Moving and Resizing Windows</h1>
<form name="form1">
<b>Width:</b> <input type="text" name="w"><br>
<b>Height:</b> <input type="text" name="h"><br>
<b>X-position:</b> <input type="text" name="x"><br>
<b>Y-position:</b> <input type="text" name="y"><br>
<input type="button" value="Change Window" onClick="DoIt();">
</form>
</body>
</html>
In this example, the DoIt function is called as an event handler when you click the Change Window button. This function checks if you have specified width and height values. If you have, it uses the self.resizeTo() method to resize the current window. Similarly, if you have specified x and y values, it uses self.moveTo() to move the window.
NOTE
While developers have wanted a way to move or resize windows for a long time, this is one of those JavaScript features you should think twice before using. These methods are best used for resizing or moving pop-up windows your script has generated—not as a way to force the user to use your preferred window size.