Working with New Windows

Example

  
  Pop Goes the Weasel
  
    Half a pound of tuppenny rice,
    Half a pound of treacle.
    That’s the way the money goes,
    Pop goes the weasel.

    Up and down the City road,
    In and out  the Eagle,
    That’s the way the money goes,
    Pop goes the weasel.

The XHTML

The markup for the new window is ultra simple and seems future-proof to me. As you might have guessed, popup window dimensions can be set by changing the values within the REL ('popup|height|width').

The JavaScript

/* Simon Willison's addLoadEvent function allows you to stack up 'window.onload' events 
without them stepping on each other's toes. 
It's explained here - http://www.sitepoint.com/blog-post-view.php?id=171578 */

/* This is our current popup function - parts of the site still use it, so I need to keep it */

function acpopup(strURL,strType,strHeight,strWidth) {
var strOptions="";
if (strType=="console") strOptions="resizable,height="+strHeight+",width="+strWidth;
window.open(strURL, '', strOptions);
}

/* new accessible, unobtrusive popup code */

function windowLinks() {                      // create a new function called windowLink(); 
    if(!document.getElementsByTagName) {      // Only run the function on browsers that
         return;                              // understand 'getElementsByTagName' - new browsers
    }
	
    var anchors = document.getElementsByTagName("a"); // grab all links and pop them in an array called 'anchors'
    for (var i = 0; i < anchors.length; i++) {        // start a loop to work our way through 
         var anchor = anchors[i];                     // grab the next link & copy it to 'anchor' for working
         var relIndex = anchor.rel;                   // get the value of it's 'REL' attribute
		 if (relIndex){                               // does it have a value for REL?...
		 var relSplit = relIndex.split("|");          
		 /* if it does, look for '|' to use to split the value into an 
		 array - relSplit[0], relSplit[1], relSplit[2], etc . If it doesn't 
		 find any '|', the whole value gets transferred to relSplit[0] */
		 
/* XHTML compliant target attribute */

if (relSplit[0] == "external") {       // If the relSplit[0] is 'external'...
            anchor.target = "_blank";           // then set it's 'target' attribute to '_blank'
			anchor.className = "external";      // then attach a CSS class to it 
			anchor.title = "Load in new window: "+ anchor.href;  
			// And give it a new title attribute to warn users a new window is launching
			
/* Elegantly degrading window code */

} else if (relSplit[0] == "popup") {      // else if relSplit[0] is 'popup'...
			anchor.className = "popup";               // attach a CSS class to it 
			anchor.title = "Loads in a Popup Window"; // Give it a helpful title attribute
			anchor.popupWidth = relSplit[1];          // set the popup's width
			anchor.popupHeight = relSplit[2];          // set the popup's height
	        anchor.onclick = function() {acpopup(this.href,'console',this.popupWidth,this.popupHeight);return false;};
			// plug all this information into our origainl window launch function (acpopup) 
			}
		}
	  }
}

addLoadEvent(function() {
	windowLinks();	// run our new function as soon as the page loads. 
	//otherFunctions();
	//goHere();
});

The CSS

CSS classes are appended to each link to allow us to style them differently to standard links. Feel free to customize their look and feel, but keep in mind that they are designed to sit inline with the content, so they'll work best if you take a minimialist approach. They really shouldn't have any more 'visual weight' than a capital letter of the paragraph they inhabit.

'REL'-ativity: