target _blank – Open a new window using jQuery/CSS

One of the reasons why people are looking at a scripted solution is that the target=”_blank” attribute isn’t valid in all doctypes (for example XHTML Strict).

This is a simple little trick really. There are a couple of ways of doing this but a method that I’ve personally liked is one I started using some time ago that combines jQuery and CSS together, which is a good and valid approach.

The jQuery:

$(function() {
     $(".external-link").attr("target","_blank");
});

Then we can garnish it with a bit of visual sweetness, the CSS:

.external-link {
  background: url(img/icon_external_link.png) center right no-repeat; padding-right: 14px;
}

Finally, here is the HTML that the CSS and jQuery hook onto;

LINK NAME

Assumptions:

  • That web user know that this site best works with JavaScript ENABLED.
  • The image folder is a CHILD of the CSS PARENT folder.
  • The image is a PNG and is called “icon_external_link”.

What you end up with is an anchor tag being caught by the scripted function via a class which you can use globally across your site. The CSS is there just to provide some visual garnish telling the web user that the link will open up a new page.  This is good IA practice too.

This is only an example that you can use and build upon so use as you see fit.

2 Comments

  1. jordan 12 rising sun says:

    Normally I don’t learn post on blogs, however I wish to say that this write-up very pressured me to take a look at and do it! Your writing taste has been surprised me. Thank you, very great post.

  2. Georgiana says:

    I’m a bandwagon but what Ever truth is

Leave a Reply

Your email address will not be published. Required fields are marked *