Two post ago, I showed you what we developed to achieve a flexible popup window. This time, I will show you how we did it..

First I will show you the code, necessary to create the popup, nothing fancy here. Just something I came up with after reading a bit of domscripting.

* 	popup script
* after a great example by jeremy keith
* find any a tag with a class popup
* build a nodelist of these.
* do something on click
* - get var width and height
* - give these variables together with the value
*    of the href tag to the function popUp.

Here it is folks, the code in plain english. As you can learn from his presentation at sxsw 2006.

Now let me go and show you the code, I wrote as a results of that text. I more or less stuck to the script in the script, so don’t expect anything out of the ordinary or fancy. I am not a great coder, matter of fact is that I only recently started coding myself. Luckily for me, is that I have spent the last couple of years helping developers, develop some common sense. So the thought process is not enterily alien to me…

Enough babbling, let’s go and look at some code

function popLink (){
// get all the a elements with a class popup
// see getElementsByClassName in tools.js
//(snook and nyman)
var aP = getElementsByClassName(document, "a", "popup");
// build a nodelist (thanks to ppk who is making
// me understand js with his book).
for (var i=0; i<aP.length; i++) {
// on click do something.
aP[i].onclick = function () {
// get the width and height var with another help function
// see tools.js for GetElementValueFromClassName (thnx to Tino Loos)
var width = GetElementValueFromClassName(this.className, "w");
var height = GetElementValueFromClassName(this.className, "h");
// go to the function popup and take the href, width and heigth as attributes.
popUp((this.getAttribute("href")), width, height);
// ignore the default action of the link.
return false;

This will do something, if we have the function popUp, so here it is…

function popUp(winURL, width, height ) {
// if there is no width or height is set,
// take the default values...
if (width == "") {
width = 640;
}     if (height == "") {
height = 480;     },"popup","width=" + width--
+ ",height=" + height); }

This stuff will be available onload, thanx to martins events js.

Events.attach(window, "load", function() { popLink(); });

The can be called upon from html with a class like this…

class="popup w:900 h:700"

Join me next time, I will go in to the helper classes. Both the ones I used and the ones I created…

The next post will be: Return of the helper classes