So here’s an annoying one – I wanted to resize my browser window automatically, after the page had loaded (in a dynamic pop-up), to meet certain size requirements (namely to match a background image). The problem that I had was that all the different browsers support different methods and properties in relation to the ‘viewport’ (visible area of the browser), so I was having trouble finding a reliable way to do this.

I found a great breakdown over at quirksmode.org, but it didn’t actually work in Safari (2.0.2), so I found that out pretty quickly, because that’s what I’m working in. After a little playing around, I came up with the following modifications, which calculates the amount of chrome visible in the currrent window, and then takes that into account when resizing the entire window size.

I haven’t tested this on too much other than Safari and Firefox on a Mac, but I think it should be reasonably compatible with others.

// Viewable size you want once resized
x = 600;
y = 400;

// Now set the window size for different browser types
// all except Explorer
if (self.innerHeight) {
	// Figure out the measurements
	iX = self.innerWidth;
	iY = self.innerHeight;
	oX = self.outerWidth;
	oY = self.outerHeight;

	// And resize to match the desired target
	gX = oX - iX;
	gY = oY - iY;
	window.resizeTo(x + gX, y + gY)
}
// Explorer 6 Strict Mode
else if (document.documentElement && document.documentElement.clientHeight) {
	document.documentElement.clientWidth = x;
	document.documentElement.clientHeight = y;
}
// other Explorers
else if (document.body) {
	document.body.clientWidth = x;
	document.body.clientHeight = y;
}