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;
}
