Unobtrusive pop up

In my last post, the Javascript Renaissance I eluded to unobtrusive javascript and some of its benefits.

Whilst I was thinking about the subject some time ago, I was looking over some javascript pop up code and decided to experiment with making the pop up unobtrusive whilst using prototype library to do some of the hard work.

Up to that point, I’d previously used the code outlined by Youngpup to allow some sort of accessibility when using javascript pop ups. However I thought that essentially by making the pop up unobtrusive it would seperate the display and presentation logic slightly. Maybe a moot point!?!

The script has done the rounds amongst a number of developers, so I thought it would be worthwhile releasing it for general consumption, and feedback.

With hindsight looking back over the code one thing I think is a slight drawback is the reliance on loading the class name, which Dustin Diaz covers nicely here

The method

To apply a pop up we simply apply a class to a link along with the dimensions of the pop up we wish to apply as seperate classes. When the javascript matches the links, it splits it done in to an array and then uses the dimensions to populate the window.open command.

 function popUp() { //Return all tags matching a
var linkList = document.getElementsByClassName('popup');
var nodes = $A(linkList);
nodes.each(function(node){
//Split the classes
var classes = node.className.split(" ");
//Check class length
if(classes.length > 0) {
var width = classes[1];
var height = classes[2];
//Get the link
var href = node.href;
//Assign an onclick event
node.onclick = function () { openPopUp(href, width, height); return false }
}
});
};

//Open a pop up
function openPopUp(href, width, height) {
window.open(href,’popup’,'width=’ + width +’, height=’ + height + ‘, scrollbars=yes, resizable=yes’);
}

//Add an onload event addLoadEvent(popUp);