Window manipulation

This page is no longer maintained. The more interesting content has been moved to the Viewport compatibility page.

Methods

These are the methods of window that have something to do with window manipulation.

MethodDescription
moveBy(x,y)Move the window by x,y pixels to the right and bottom
moveTo(x,y)Move the upper left corner of the window to coordinates x,y
resizeBy(x,y)Resize the window by moving the lower right corner by x,y pixels.
Note that if you want to resize the entire window from a frame, you need to do parent.window.resizeBy
resizeTo(x,y) Resize the window to x by y pixels. Upper left corner stays where it is.
Note that if you want to resize the entire window from a frame, you need to do parent.window.resizeTo
Browser difference: Explorer and Netscape 6 takes x and y as the dimensions of the entire page, while Netscape 4 sees them as the dimensions of the inner window (without toolbars, location bars etc.). The example script below works around this browser incompatibility by subtracting the width and height of the toolbars and stuff (outerHeight - innerHeight) from the desired width and height.
scroll(x,y)Scroll the page to position x,y.
Note that this method is deprecated, you're supposed to use scrollTo. It also works in Netscape 3.
scrollBy(x,y)Scroll the page by x pixels to the left and y pixels down.
scrollTo(x,y)Scroll the page to position x,y.

Example script

The example script does not work in Opera 7, Ice Browser and Omniweb.

You can switch resizing off in Mozilla. This can be very confusing when trying to run the script, as I found out.

Finally an example script that includes the solution to the Netscape 4 resizeTo bug.
Let's suppose that you want the window to resize to exactly one half of the screen width and height and to center the window if this content frame covers more than 50% of the screen. (Why would you want to do this? I have no idea, but this script nicely combines the basics of window manipulation)

When you click this link, this script is executed:

function doIt()
{
	if (self.innerWidth)
	{
		frameWidth = self.innerWidth;
		frameHeight = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientWidth)
	{
		frameWidth = document.documentElement.clientWidth;
		frameHeight = document.documentElement.clientHeight;
	}
	else if (document.body)
	{
		frameWidth = document.body.clientWidth;
		frameHeight = document.body.clientHeight;
	}
	else return;

	if (self.screen.width < frameWidth *2 || self.screen.height < frameHeight *2)
	{
		newWidth = self.screen.width/2;
		newHeight = self.screen.height/2;
		if (document.layers)
		{
			tmp1 = parent.outerWidth - parent.innerWidth;
			tmp2 = parent.outerHeight - parent.innerHeight;
			newWidth -= tmp1;
			newHeight -= tmp2;
		}
		parent.window.resizeTo(newWidth,newHeight);
		parent.window.moveTo(self.screen.width/4,self.screen.height/4);
	}
	else
	{
		alert('No resize necessary');
	}
}

First of all, find the current frame width and height. You need three sets of code, one for Netscape, one for Explorer 6 if you use a DOCTYPE, and one for Explorer in all other cases:

if (self.innerWidth)
{
	frameWidth = self.innerWidth;
	frameHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth)
{
	frameWidth = document.documentElement.clientWidth;
	frameHeight = document.documentElement.clientHeight;
}
else if (document.body)
{
	frameWidth = document.body.clientWidth;
	frameHeight = document.body.clientHeight;
}

Please note that the innerWidth bit must go first, since Netscape 6 also supports document.body, though the information we need is still stored in innerWidth/Height.

Now frameWidth and frameHeight contain the width and height of this frame in all Version 4 browsers. If the browser supports neither self.screen nor document.body it's too old to handle this script, so we end the function here to prevent error messages:

else return;

Find out if width or height are more than half of screen width and height:

if (self.screen.width < frameWidth *2 || self.screen.height < frameHeight *2)
{

If either of them is more than half the window size, calculate the initial new width and height: half the screen width and height.

	newWidth = self.screen.width/2;
	newHeight = self.screen.height/2;

Working around the Netscape 4 resizeTo bug

However, Netscape 4 has a bug in its implementation of resizeTo: it resizes the window so that the actual content window (without the toolbars etc.) gets the required size instead of the entire window, as the other browsers do. Therefore we have to do an extra calculation for Netscape 4.

	if (document.layers)
	{

First we have to find out how much space the toolbars, status bars and other stuff take. Subtract the inner dimensions from the outer dimensions to get this values. Note that I'll have to take the width and height of the parent. I want to use the dimensions of the entire window, not only of this frame.

		tmp1 = parent.outerWidth - parent.innerWidth;
		tmp2 = parent.outerHeight - parent.innerHeight;

Now subtract this difference from the new width and height:

		newWidth -= tmp1;
		newHeight -= tmp2;
	}

Now we can resize the parent (= the frameset) to the new width and height and have the desired result in all browsers:

	parent.window.resizeTo(newWidth,newHeight);

Finally center the parent:

	parent.window.moveTo(self.screen.width/4,self.screen.height/4);
}

I give an alert when resizing isn't necessary, you wouldn't need this if this were a real script.

else
{
	alert('No resize necessary');
}