#javascript

Resizing Browser Windows With JavaScript

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

Google Maps Bookmarklet

I’m sick of Cmd-T, maps.google.com, Enter, ‘address’ + ‘, sf, ca’ so I made this quick little bookmarklet to speed up the process a little.

Drag it to your bookmark toolbar, then click it, enter a street address (eg. ‘2000 Bush St’) and hit ‘Ok’ to get an instant Google Map to that location in San Francisco (my current hometown).

map

Obviously editing this to work for different cities in the US would be trivial – knock yourselves out.

Useful JavaScript Snippet

One of the coolest things in the PHP programming language is its excellent handling of arrays. The same, sadly, cannot be said for JavaScript 🙂

This small JavaScript function implements one of the cool functions available in PHP, making it easier to store things in an array, and then check to see if they’re in there later.

// Returns true or false based on whether the specified string is found
// in the array. This is based on the PHP function of the same name.
// Written by Beau Lebens
function in_array(stringToSearch, arrayToSearch) {
	for (s = 0; s < arrayToSearch.length; s++) {
		thisEntry = arrayToSearch[s].toString();
		if (thisEntry == stringToSearch) {
			return true;
		}
	}
	return false;
}