Working with Windows: Manipulating Windows

Working with Windows

Manipulating Windows

Once you've got hold of a window variable, you can manipulate it by invoking various methods. In the previous section of this column, we discussed the close() method:

win = window.open("https://www.docjs.com/", "js");
win.close();

JavaScript provides many other methods and properties that we can use to control the window.

Moving, Scrolling, and Resizing

The following methods (N4+, IE4+) move, scroll, and resize a given window:

// move the screen position of the window to the specified x and y offset
window.moveTo(iX, iY)
// move the screen position of the window by the specified x and y offset
window.moveBy(iX, iY)
// scroll the window to the specified x and y offset
window.scrollTo(iX, iY)
// scroll the window by the specified x and y offset 
window.scrollBy(iX, iY)
// set the size of the window to the specified width and length
window.resizeTo(iWidth, iHeight)
// change the current size of the window by the specified x and y offset
window.resizeBy(iX, iY)

Notice that these methods belong to the window object, so they can be executed on the current window or any other referenced window. You can use the move and resize methods when you want to set the position or dimensions of a window dynamically, after it has been created. The following button launches a new window with our front page:

This button simply executes the following statement:

win = window.open("https://www.docjs.com/", "js");

We now have a variable that references the new window (win). We can use it to manipulate the new window:

Note that it isn't possible to control a window holding a Web page from a different server ("access denied").

Maximizing a Window

The following button maximizes the size of this window:

Take a look at the HTML and JavaScript code for this button:

<SCRIPT LANGUAGE="JavaScript">
<!--
function maximizeWin() {
  if (window.screen) {
    var aw = screen.availWidth;
    var ah = screen.availHeight;
    window.moveTo(0, 0);
    window.resizeTo(aw, ah);
  }
}
// -->
</SCRIPT>
<FORM><INPUT TYPE="button" VALUE="Maximize" onClick="maximizeWin()"></FORM>

Notice that the resizeTo() method refers to the dimensions of the entire window (outer-dimensions). Therefore, we don't need to account for the window chrome.

A Floating Ad

Ad click-through rates are often extremely low. We can move an advertisement window to grab the user's attention. Click the following button for an example:

The preceding button calls the following function:

function makeAd() {
  window.open("adpage.html", "ad", "width=468,innerWidth=468,height=80,innerHeight=80,left=0,top=0");
}

Here's the script in adpage.html:

<SCRIPT LANGUAGE="JavaScript">
<!--
function startAd() {
  if (window.screen) {
    pos = 0;
    aw = screen.availWidth;
    window.moveTo(pos, 0);
    timerID = setInterval("moveAd()", 50);
  }
}
function moveAd() {
  if (pos <= 0) inc = 5;
  // 5 - so it doesn't pass the right edge
  // 10 - accounts for the window chrome
  if (pos + 468 + 10 + 5 > aw) inc = -5;
  pos += inc;
  window.moveTo(pos, 0);
}
window.onload = startAd;
// -->
</SCRIPT>

When adpage.html loads, the startAd() function is invoked. It only moves the window if the user's browser supports the window.screen object, which we need in order to calculate the width of the screen. The window slides at the top edge of the screen, from the upper-left corner (pos = 0) to the upper-right one.

We move the advertisement window 5 pixels every 50 milliseconds via the built-in setInterval() function. If you want to implement a "stop" button, it should run the following statement:

clearInterval(timerID);

A Shaking Window

As you've seen, the move methods can help you grab the attention of your users. If you don't want to make your site's users motion sick, you might want to add the following effect:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var quakeID = 0;
var totalX = 0;
var totalY = 0;
// max pixels in each movement
var maxShift = 10;
// min movements in each quake
var minJumps = 10;
// max movements in each quake
var maxJumps = 40;
// min milliseconds between two quakes
var minBetweenQuakes = 1000;
// max milliseconds between two quakes
var maxBetweenQuakes = 4000;
function jump() { // -maxShift to maxShift
  with (Math)
    return (maxShift + 1 - ceil(random() * (maxShift * 2 + 1)));
}
function winShake() {
  for (var i = 0; i < (minJumps + (Math.random() * (maxJumps - minJumps))); i++) {
    dX = jump();
    dY = jump();
    window.moveBy(dX, dY);
    totalX -= dX;
    totalY -= dY;
  }
  
  window.moveBy(totalX, totalY);
  totalX = 0;
  totalY = 0;
  quakeID = setTimeout("winShake()", Math.ceil(Math.random() *
    (maxBetweenQuakes - minBetweenQuakes)) + minBetweenQuakes);
}
window.onload = winShake;
//-->
</SCRIPT>

The script generates an series of earthquakes. It begins when the page loads (window.onload). In order to run the script on this page, click the following button:

winShake()

If the quakes make you feel sick, click the following button to stop:

clearTimeout(quakeID)

The jump() method returns a random integer from -maxShift to maxShift. The following code segment is responsible for a single quake:

for (var i = 0; i < (minJumps + (Math.random() * (maxJumps - minJumps))); i++) {
  dX = jump();
  dY = jump();
  window.moveBy(dX, dY);
  totalX -= dX;
  totalY -= dY;
}

Since we have no way of knowing the window's initial position, we must keep track of how much we moved it in each direction. The totalX and totalY variables hold the window's position in relation to its initial position, before the quake began. When the quake is over, the window is moved back to its origianl position:

window.moveBy(totalX, totalY);
totalX = 0;
totalY = 0;

The winShake() function is then called again after a random pause:

quakeID = setTimeout("winShake()", Math.ceil(Math.random() *
  (maxBetweenQuakes - minBetweenQuakes)) + minBetweenQuakes);

Next: How to write content to a window

Produced by Yehuda Shiran and Tomer Shiran

Created: April 10, 2000
Revised: April 10, 2000

URL: https://www.webreference.com/js/tutorial1/manipulate.html