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

Random Hex

I needed some PHP code to randomly generate me a hex value for use as a color in a webpage. Here’s what I came up with (WARNING: Some colors are UGLY!)

function random_hex() {
	$color = '';
	for ($c = 0; $c < 6; $c++) {
		$i = rand(0, 15);
		switch ($i) {
			case 10 :
				$i = 'A';
				break;
			case 11 :
				$i = 'B';
				break;
			case 12 :
				$i = 'C';
				break;
			case 13 :
				$i = 'D';
				break;
			case 14 :
				$i = 'E';
				break;
			case 15 :
				$i = 'F';
				break;
			default :
				$i = $i;
				break;
		}
		$color .= $i;
	}
	$color = '#' . $color;
	return $color;
}

File Append Function

Here’s a useful function that I wrote for PHP – it just opens a specified file and appends a string to it. It’s very good for logging things.

<?php
/**
 * @return boolean
 * @param $file FileNameToWriteTo
 * @param $string StringToWriteToFile
 * @desc Writes specified string to the end of the file with a linefeed attached
 */
function file_append($file, $string) {
	if (is_file($file) && is_writable($file)) {
		$fh = fopen($file, 'a');
		if ($fh) {
			fwrite($fh, $string . "\n");
			fclose($fh);
			return true;
		} else {
			return false;
		}
	} else {
		return false;
	}
}
?>

You might want to consider making the fopen() flags ‘ab’ for binary-safe (now reccommended on php.net) and also changing the ‘\n’ part to the appropriate line-endings for your operating system (\n = *NIX, \r\n = Windows, \r = Mac).