New preference to open external links in a new window. PS: jQuery rocks

Somehow my blog posts always turn out to be small novels. So if you only care about enabling this new preference, and not the who/what/why etc, go to your site preferences, click "edit site", then check the checkbox "Open external links in a new window". Then all links in your Clicky stats that point to external sites (your own content/downloads, and incoming/outgoing links) will open in a new window instead of the same window. If you want some more background and to hear my rambling about how awesome jQuery is, read on...

There hasn't been huge demand for it but some people like external links to open in a new window. I didn't want to make this the default because for you (the users) there's no way to disable/change this behavior. Whereas if links default to the same window, you CAN change that behavior by middle-clicking a link with a multi-button mouse, or shift/control-clicking a link, both of which open any link in a new tab or a new window, depending on the browser you're using.

The only reasonable action was to add a preference to do this, but implementing the logic in our actual codebase to make links open in a new window based on a user preference was going to be irritating. But I finally needed to get around to this because we have a number of white label customers who are implementing our stats system into their own site with an iframe. The problem with this is that when you click an external link in an iframe, the entire iframe goes to the new site, and since iframes don't have a "back" button, there was no way to get back to Clicky without reloading the entire page again. This is obviously undesirable behavior.

Rather than having to add in logic to the 5-10 places in our code that output these links as clickable, which certainly isn't hard, but is mundane, repetitive and annoying (and adds bloat too), I thought jQuery could probably make this a lot easier, and of course it did (it always does). The entire thing took less than 10 minutes. I only had to add logic to ONE place in our codebase to check whether or not we're in "iframe" mode, and if so, it outputs the following javascript:

$("a[@href^='http']").attr('target','_blank');

That's it! Now of course this is wrapped in a function so I can call it easily in a few different places without having to write it out every time (it needs to be re-called everytime a dashboard tab is clicked for example, to update the new links in that module), but that code is ALL it takes to make all external links on Clicky (or any web site) open in a new window.

I also added a preference for each site so that people could turn this on if they want it, rather than only having it available for iframed pages. This took a bit longer since I had to add a field to the database to store this preference and what not, but it was still a very quick process. If you want to enable this feature for your site, go to your site preference and click the "edit site" sub-tab, and it is a new checkbox on that page. It defaults to "off".

I can't stress enough how amazing jQuery is. If you're stuck on Prototype, drop it like the disease that it is and learn jQuery - it will change your life. It is the best thing to happen to web development in a LONG time, perhaps ever. All the magic of the Clicky interface (dashboard, spy, etc) is thanks to this library, and we would be nothing without it. Take a peak at our interface code and spy code and you'll see that the vast majority of it is all in jQuery-speak.
8 comments |   Apr 10 2008 10:52am





Copyright © 2017, Roxr Software Ltd     Blog home   |   Clicky home   |   RSS