Monday, June 29, 2009

jQuery to the rescue!

I had a thought today as I was posting - I like to link out from my blog, but it's really inconvenient for my readers to click on those links and have it open that link over top of the post they're reading. And I don't want to have to go back to my previous posts to update the links manually. Blogger should just handle it for me.

A quick Google search brought me to these posts, but that isn't quite what I wanted. That would change every single link on the page. There are some links that hop between other pages or actions on my blog, and opening those in a new window would be annoying. So, jQuery to the rescue. I just added the following snippet to my blogger template:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

// Make external links open in a new window
$("a[href^='http:']").not("[href*='blogspot.com']").click(function(){
this.target = "_blank";
});

});
</script>

What this says (in semi-cryptic jQuery-ese) is that when the page has finished rendering (document.ready()), then associate my click() function with all anchor tags that href to an external website. So, with this simple modification to my blogger template, I can now make blogger handle all the links to external sites in all my posts for all time by opening them in a new window with no additional actions on my part. Ever. Nice...

3 comments:

truist said...

Hm - I think popular convention these days is to provide some sort of "outgoing link" icon next to such links - for those of us who expect links to just behave the way they always do. I admit that I usually wait until the end of an article to go back and follow the links, or I ctrl-click the links anyway, but the icon also helps me - once I am aware that the links do something special, I am able to make more appropriate choices about how to read the page.

mattmc3 said...

I've seen that, but am not thrilled with that convention. When blogging a string of links, it makes the text very hard to read with those annoying icons in between. And since a blog's purpose is, after all, to provide for an interesting reading experience, I think that I'd rather take measures that guard that experience.

But you do bring up an interesting point in that a user may want to know what is going to happen with the links they click. I think that that ought to be the browser's responsibility to provide a reasonable clue to the user, rather than leave it to each different web designer to do their own thing.

However, from a technical standpoint, jQuery is perfectly capable of doing what you suggest. See this post here.

mattmc3 said...

I've seen that, but am not thrilled with that convention. When blogging a string of links, it makes the text very hard to read with those annoying icons in between. And since a blog's purpose is, after all, to provide for an interesting reading experience, I think that I'd rather take measures that guard that experience.

But you do bring up an interesting point in that a user may want to know what is going to happen with the links they click. I think that that ought to be the browser's responsibility to provide a reasonable clue to the user, rather than leave it to each different web designer to do their own thing.

However, from a technical standpoint, jQuery is perfectly capable of doing what you suggest. See this post here.