Converting links to popups using javascript

Morten Bock — Mon, 07 Jan 2008 22:30:25 +0100

I was asked today how I would go about looping through an html page and attach an onclick event for all links with a certain class. So I decided to make an example and post it here.

What I am going to do is mark all links that should function as a popup window with the class "popup", and then I am going to intercept the click event on those links by using unobtrusive javascript.

Here it goes. The html markup we will use looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="addpopuplinks.js"></script>
</head>
<body>
<p>This is a text with a few links in it.
<a href="http://www.google.com/">This is a regular link</a> which just goes to a new webpage.
<a class="popup" href="http://www.umbraco.org/">This is marked with a class "popup"</a> and will recieve a javascript onclick event when the document is loaded.</p>
</body>
</html>

And the javascript looks like this:

//Add multiple functions to the window.onload event.
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        };
    }
}
//Add the onclick event to link of a certain class
function makePopupLinks() {
    //Check that browser supports the used methods
    if (!document.getElementsByTagName) { return false; }
    //Get all links in document
    var links = document.getElementsByTagName("a");
    //Loop through links
    for (i = 0; i < links.length; i++) {
        //Check for the right classname
        if (links[i].className == "popup") {
            //Add the onclick event to the object/element
            links[i].onclick = function() {
                window.open(this.getAttribute("href"), "popupwindow", "width=400,height=400");
                //Return false so that the link is not followed in the main window
                return false;
            }
        }
    }
}
addLoadEvent(makePopupLinks);

The comments in the code should be more or less self explanatory but if you have any questions, feel free to post a comment :-)

Tracking all outgoing links with Google Analytics

Morten Bock — Sun, 15 Apr 2007 23:00:10 +0100

I wanted to try and find a way to track all of the outgoing links on my blog, without haven to modify the html of the link. What I found was that using javascript listeners would probably be the best solution. Actually this technique can be used for a lot of stuff, but this is what I did:

<script type="text/javascript">
// Cross-browser implementation of element.addEventListener()
function addListener(element, type, expression, bubbling) {
    bubbling = bubbling || false;

    if (window.addEventListener) { // Standard
        element.addEventListener(type, expression, bubbling);
        return true;
    } else if (window.attachEvent) { // IE
        element.attachEvent('on' + type, expression);
        return true;
    } else return false;
}

//This is what i want to do whenever someone clicks on the page
function itHappened(evt) {

    //Get the clicket element
    var tg = (window.event) ? evt.srcElement : evt.target;
    //If it is an A element
    if (tg.nodeName == 'A') {
        //And it is not an internal link
        if (tg.href.indexOf(location.host) == -1) {
            //Replace all odd characters, so that it works with Analytics Niavgation analysis
            var url = tg.href.replace(/[^a-z|A-Z]/g, "_");

            var txt = tg.innerHTML.replace(/[^a-z|A-Z]/g, "_");
            var str = '/outgoinglink/-' + txt + '-' + url;
            try {
                //Track it
                urchinTracker(str);
            }
            catch (err) {
                //alert('error: ' + err);
            }
        }
    }
}
//Add the click listener to the document
addListener(document, 'click', itHappened);</script>

I hope you can use it. Any comments or advice is very welcome :-)