JavaScript's window object provides several methods to manage window geometry: moveTo(), moveBy(), resizeTo(), resizeBy(), scrollTo(), and scrollBy(). Each of these methods take two arguments: x and y. The argument x represents pixels along the X-axis (horizontal direction) and the argument y represents pixels along the Y-axis (vertical direction).
Here is a quick description of these methods. moveTo(x,y) moves the window from its current location on the screen to pixels (x,y). moveBy(x,y) adds (x,y) pixels to the current location and moves the window to the new screen. Likewise, resizeTo(x,y) changes the current size of the window to (x,y) pixels and resizeBy(x,y) adds (x,y) pixels on top of the current size of the window and re-sizes it. Along similar lines, scrollTo(x,y) scrolls the current window to (x,y) pixels and scrollBy(x,y) scrolls the current window by (x,y) pixels.
Note that a lot of browser do not allow manipulation of the current screen; one argument to this is that we would not want any third party JavaScript library code to manipulate the size of the current window. However, it is okay to make these calls on a child window since the parent window remains intact. Therefore, the examples in this page explicitly open a new child window to demonstrate these methods.
We provide a simple example that uses moveTo() method for a new window to move it to random locations on the screen. The example uses setInterval() to call setNewSize() function periodically and it is this function that moves the child window. And, once the random-chosen value of xVal becomes less than 100, we close the new window. With each movement, the example also prints the (x,y) values of the new location.
<!doctype html>
<html>
<div id="div_id"> Random Window Dance! </div>
<script type="text/javascript">
var elem = document.getElementById('div_id');
var newWindow = window.open('','', 'width=20,height=20');
function setNewSize() {
var xVal = 1000 * Math.random();
var yVal = 1000 * Math.random();
newWindow.moveTo(xVal,yVal);
elem.innerHTML += "<br>xVal is: " + xVal;
elem.innerHTML += ",yVal is: " + yVal;
if (xVal < 100) {
newWindow.close();
clearInterval(retVal);
}
}
var retVal = setInterval(setNewSize, 500);
</script>
</html>
When we look at the output on the browser's parent window, it provides a log of the values of xVal and yVal. Since we clear the setInterval when xVal becomes less than 100, we would see that none of the values, except the last one, have a value of xVal less than 100.
Random Window Dance! xVal is: 603.3392274542598,yVal is: 117.21999919501846 xVal is: 551.7626357007271,yVal is: 857.2211704218562 xVal is: 292.8099119495351,yVal is: 609.6677538849952 xVal is: 611.5274774519933,yVal is: 896.5626617212596 xVal is: 195.36435088841563,yVal is: 351.8911102070844 xVal is: 990.2987902296085,yVal is: 410.31302122869295 xVal is: 159.77113363663187,yVal is: 757.6898394616377 xVal is: 978.869013312942,yVal is: 238.16050588208537 xVal is: 758.5318514268396,yVal is: 918.1750965370671 xVal is: 524.8261464574213,yVal is: 71.82242776154546 xVal is: 667.4080224262929,yVal is: 89.31267647779006 xVal is: 656.1112317407801,yVal is: 994.7098070815756 xVal is: 137.5497300839571,yVal is: 700.2148310992477 xVal is: 53.05079023869696,yVal is: 652.4477717132203
By default, most of the current browsers block pop-ups and hence when running the above program, it is likely that we would not see the new child window; the alert() windows would still show! Thus, to see the new window getting opened, we would need to temporarily allow pop-ups. In Firefox, we can go to Edit->Preferences->Content and un-select the "Block pop-up windows" check-box. In Chrome, we can go to Settings->Preferences->"Under the Hood"->"Content Settings..." and select the " Allow all sites to show pop-ups" radio button; the Settings is a small symbol after the URL input text-box in a Chrome window. In Opera browser, we can go to Opera->Settings->Preferences; we can find Opera button before the URL input text-box in an Opera window. Then in the Pop-ups select-box, select the "Open all pop-ups" option. And for IE????
Lastly, we provide a rewrite of the above program where we use resizeTo() instead of moveTo(). With this, the new window is re-sized every 500 milli-seconds to a random size. Once again, if the value of xVal becomes less than 100, then we close the window and cancel the setInterval timer.
<!doctype html>
<html>
<div id="div_id"> Random Window Re-sizing! </div>
<script type="text/javascript">
var elem = document.getElementById('div_id');
var newWindow = window.open('','', 'width=20,height=20');
function setNewSize() {
var xVal = 1000 * Math.random();
var yVal = 1000 * Math.random();
newWindow.resizeTo(xVal,yVal);
elem.innerHTML += "<br>xVal is: " + xVal;
elem.innerHTML += ",yVal is: " + yVal;
if (xVal < 100) {
newWindow.close();
clearInterval(retVal);
}
}
var retVal = setInterval(setNewSize, 500);
</script>
</html>
Here is the output of the above example as seen on the browser's parent window. The output is similar to that of the previous example.
Random Window Resize! xVal is: 750.2973415294582,yVal is: 693.880234030492 xVal is: 409.39861116432866,yVal is: 102.64428388121883 xVal is: 942.0075217516654,yVal is: 551.3828481285215 xVal is: 705.3970560452914,yVal is: 962.9241562940985 xVal is: 283.83936945775343,yVal is: 844.5958169625558 xVal is: 469.86049225260575,yVal is: 720.6959816512551 xVal is: 610.6292107267066,yVal is: 366.342977228448 xVal is: 96.33114958920908,yVal is: 650.4551058799199