Analog Point Solutions [Weblog]

There are still a few folks out there with old 800 x 600 pixel monitors, and if you want to take that into account when designing your website, you can use this handy trick to quickly see what any site looks like at different resolutions. Simply copy and paste the following Javascript into the Location bar of your browser and hit enter while viewing the site in question. The following bit will resize your browser to 800 pixels wide and 600 pixels high. You can change the width and height to any other resolution you’d like to test as well.

javascript: self.resizeTo(800, 600);


I’ve also created a quick bookmarklet. Take this link: 800×600, and drag it to your bookmarks/links toolbar and then click it to resize your window to 800 x 600 pixels.

There are many dollar sign functions out there, especially in the Javascript packages such as Prototype or MooFX. Peter-Paul Koch over at Quirksmode offers a cross-browser version of document.getElementById. Let’s combine all the goodness from each of these to make a souped-up $() dollar sign function that works in most browsers, and is not dependant on the DOM implementation of just one. It’s actually 2 functions, the $() and then a helper function.

function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == 'string')
			element = getElementByIdCompat(element);
		if (arguments.length == 1)
			return element;
		elements.push(element);
	}
	return elements;
}
function getElementByIdCompat(name) {
	if (document.getElementById) {
		return document.getElementById(name);
	} else if (document.all) {
		return document.all[name];
	} else if (document.layers) {
		var theobj = {};
		theobj = document.layers[name];
		theobj.style = document.layers[name];
		return theobj;
	}
}

There are lots of reasons to need the currently selected text on a page in Javascript to do some manipulation. Unfortunately, there are about as many ways to get it as there are browsers.

I initially looked at the document.selection object, but it only works in Internet Explorer. After a bunch of heartache and searching, I came across the quirksmode site, which BTW, I highly recommend for anyone interested in Javascript/DOM.

The author offers a function that gives you some nice cross browser functionality. I’ve modified it to simply return the selected text as a string, instead of output it to the page.

function getSel() {
	if (window.getSelection) {
		return window.getSelection();
	} else if (document.getSelection) {
		return document.getSelection();
	} else if (document.selection) {
		return document.selection.createRange().text;
	}
	return;
}

Could it get any simpler?

I thought it would be easy, I found the hasFocus() function, but apparently it only works for the document object. I had to hack this one, so I simply set a global variable to store the focus state of the input field I wanted to monitor, and set the onfocus and onblur handlers for the input field that set the global variable true or false. It’s not clean, but it works like a charm.

In the document’s head:

<script type="text/javascript">
var boxFocusState = false;
</script>


The text box:

<input type="text" id="search" onfocus="boxFocusState=true;" onblur="boxFocusState=false;" />

That’s all it took!