Journal

I came across many different scripts and techniques for opening a pop up window in those rare cases when we so need to open it.

The main problem is to eliminate all unnecessary mark up, make it degrade gracefully (opening the link as normal if JavaScript is not available) and at the same typ make it as customisable as possible.

I started reading a great book DOM Scripting by Jeremy Keith who describes a great and simple method of using links to pop ups that does most of the stuff I needed but the window was restricted to one size set in Javascript.

I needed more than one size and optional additional options - changing size for a particular link, option to use/hide scroll bars, add/remove status bar, make it resizable or locked. Even create a new window with toolbars and address bar.

/* Pop Up function with custom attributes (rel="Name Width Height Resizeable Scrollbars Status newWindow") 
Tyom v. 0.5 */

function popUp(linkURL,name,attributes) {
    window.open(linkURL,name,attributes);
}

window.onload = function() {
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (i=0; i < links.length; i++) {
    link = links[ i]
    if (link.className.indexOf("popup") > -1) {
        link.onclick = function() {
        var width = 780;
        var height = 590;
        var name = "popup";
        var resizable = 1;
        var scrollbars = 1;
        var status = 1;
        var newWin = 1;
        if (this.getAttribute("rel")) {
            var rels = this.getAttribute("rel");
            var relSplit = rels.split(" ");
            name = relSplit[0] ? relSplit[0] : name;
            width =  relSplit[1] ? relSplit[1] : width;
            height = relSplit[2] ? relSplit[2] : height;
            resizable = relSplit[3] ? relSplit[3] : resizable;
            scrollbars = relSplit[4] ? relSplit[4] : scrollbars;
            status = relSplit[5] ? relSplit[5] : status;
            newWin = relSplit[6] ? relSplit[6] : newWin;
        }
        attributes = "width="+width+",height="+height+", resizable="+resizable+", scrollbars="+scrollbars+", status="+status+", location="+newWin+",toolbar="+newWin;
        popUp(this.getAttribute("href"),name,attributes);
        return false;
        }
    }
}
}