1 Pixel Out

Back in April 2005, I wrote about a JavaScript system to regain control of an orphaned popup window. A couple of days ago, Robert Emmery left a comment stating that he had a simpler solution that didn’t require the somewhat clumsy notifier mechanism. Of course, at first, I didn’t believe him. Surely, nobody can solve a problem that I thought was insolvable!

Anyway, I challenged Rob to produce an example that reproduced exactly what mine did and he did so I declare my solution officially obsolete. Here’s Rob’s solution:

In the main window:

var popupWin = null;

function openPopup() {
	var url = "popup.htm";
	popupWin = open( "", "popupWin", "width=500,height=400" );
	if( !popupWin || popupWin.closed || !popupWin.doSomething ) {
		popupWin = window.open( url, "popupWin", "width=500,height=400" );
	} else popupWin.focus();
}

function doSomething() {
	 openPopup();
	 popupWin.doSomething();
}

In the popup:

self.focus();

function doSomething() {
	alert("I'm doing something");
}

As you can see it’s much cleaner. Thanks Rob!

Rob is the founder of SpaceCatch Inc, a social networking service that will launch some time in January.

You can read about the original solution and it’s problem here.

Download an example

Maybe this is isn’t new for most people but it certainly confused the hell out of me.

I am working on a dynamic script loader. The basic concept is this:

1. Get all script tags in the document
2. Loop over them and find the one with the string “?load=” in its src attribute
3. Extract a list of scripts to include from the src attribute
4. Insert new script tags in the DOM

Here’s a rough outline of the code:

scriptTags = document.getElementsByTagName("script");

for(i=0;i<scriptTags.length;i++) {
	if(scriptTags[i].src) {
		if(scriptTags[i].src.indexOf("?load=") != -1) {

			// extract list of script files from src attribute

			for(j=0;j<scriptFiles.length;j++) {
				// add new script tag to the DOM
			}
		}
	}
}

This worked very well but I noticed that the code was looping more times than expected. I realised that the length of the scriptTags array was increasing when new script tags were added to the DOM. OK, this sounds sort of logical but I was under the impression that getElementsByTagName returned a snapshot of the DOM rather than a reference to a dynamic array of elements.

I googled getElementsByTagName and the Mozilla DOM documentation says this:

elements = element.getElementsByTagName(tagName)

elements is a live NodeList of found elements in the order they appear in the tree.

The next step is to check how mootools handles this. Its advanced DOM selectors definitely use getElementsByTagName but also apply ID and class filters so my guess is that the result is probably a snapshot rather than a live NodeList.

Anyway, it’s time for lunch… I’ll write an update when I know more.

I have just released version 1.2.3 of my Audio Player plugin. This is a very minor update to offer a fix for users who are experiencing problems in Firefox. Prior to this version, the Flash player was embedded as a transparent movie. With certain WordPress themes, the player would be inert (the buttons would not work). This version adds a new option to the admin panel for setting the background colour of the Flash object. By default, it is set to transparent. If the player doesn’t work in Firefox, set the background color to the actual colour of you blog pages.

Ben Forta posted a link to an interview with Dave Spurr today. I know Dave quite well and even linked to some excellent work of his a few months ago. The reason I’m blogging about this is that I’m quite impressed that his name showed up on Forta’s blog but also to point out that the post on WebWire doesn’t include a link to his excellent blog.

This is one tool to bookmark if you’re thinking of building an image cropper into one of your apps. It’s built with the Prototype and script.aculo.us frameworks (which I strongly recommend by the way), it has plenty of configuration options and it feels very slick. I love how the UI is an exact implementation of what you get in Photoshop or any other commercial graphics package. Check the demo at Dave Spurr’s blog or read more about it on his doc page.