Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

jQuery to the Rescue: Changing style and target for all external links on my site

Pete Brown - 04 March 2010

The editor (or some other code) in umbraco does a few things I strongly dislike. One of them is removing the target="_blank" from url's I add. I like all external urls to open in a new window so the visitor doesn't forget about my site. I'd add it back into the html and the editor would strip it back out again. Annoying.

I've never written a line of jQuery before, but tonight, with some research and the help from folks on twitter, ( Encosia, DanWahlin and especially DeclanK) I was able to come up with a single line of jQuery that changes the style of external links and resets the target to "_blank".

You can't simply select everything that begins with "http" as some internal links start with "http". I've also got a bunch of legacy urls pointing to community.irritatedvowel.com

The thing that had me stumped was escaping the //. On the jQuery site, it says I must escape that with \\, but what actually works is \. Not sure if that's a version difference or what, but I got the same results using jquery-latest.js from code.jquery.com and the minified jquery from Microsoft.com

So, anyway, here's the single line of jQuery (broken into multiple lines for this post) that I'll use to change the style of all external links on this site.

$("a[href^='http']")
    .not(":has(img)")
    .not("a[href^='http:\/\/10rem']")
    .not("a[href^='http:\/\/community.irritatedvowel']")
        .addClass("external")
        .attr({target: "_blank"});

I first select all anchor tags with a url that starts with http. I then filter that to remove all that contain an image (the style looks dumb on an image) Then I remove all that have urls that start with http://10rem and http://community.irritatedvowel . I then take that list and add the css class "external" and also set the target property to "_blank".

I designed the icon myself in MS Paint. Feel free to snag it if you would like.

This was a fun little exercise and taught me something new. I hope it's useful to someone else as well.

End result:

image

         
posted by Pete Brown on Thursday, March 4, 2010
filed under:          

4 comments for “jQuery to the Rescue: Changing style and target for all external links on my site”

  1. Gravatar of Scott KoonReply
    Scott Koonsays:
    Thursday, March 4, 2010 at 2:08:08 AM
    Hey Pete,

    You might be able to combine the selectors in the not. The reason you might want to do this is with each succesive .not(), jQuery loops over the current collection of elements that have matched the previous selectors. With a single not containing multiple selectors, I believe it compares each selector to each element before pushing it into the new collection. I think you can change the initial selector to only select the https that do not have an image as a child using the :not() selector combined with the jQuery :image selector.

    $("a[href^='http'] > :not(:image)")
    .not("a[href^='http:\/\/10rem'], a[href^='http:\/\/community.irritatedvowel']")
    .addClass("external")
    .attr({target: "_blank"});

    These might be micro-optimizations and may not make much of a difference if you don't have a large DOM. I'm also not entirely sure if the child :not() syntax will work.
  3. Gravatar of TimReply
    Timsays:
    Thursday, March 4, 2010 at 12:41:02 PM
    I implemented jQuery code similar to this (for a leaving-site disclaimer) that didn't require hardcoding the current site's host. I ran into trouble when comparing host names, though. The host, hostname, and port properties of anchor tags vary between browsers:

    Internet Explorer
    http://localhost/ - host: "localhost:80", hostname: "localhost", port: "80"
    http://localhost:123/ - host: "localhost:123", hostname: "localhost", port: "123"

    Firefox
    http://localhost/ - host: "localhost", hostname: "localhost", port: ""
    http://localhost:123/ - host: "localhost:123", hostname: "localhost", port: "123"

    Opera
    http://localhost/ - host: "localhost", hostname: "localhost", port: "80"
    http://localhost:123/ - host: "localhost", hostname: "localhost:123", port: "123"

Comment on this Post

Remember me