target=”_blank” vs. jQuery

[aoeui]

hi,

this is not a question of UX or why to use or not links in new tabs
need it this time

question is

would you use better jQuery to do it or HTML5 + target blank?

[aoeui]

this

vs.
jQuery + rel

$(document).ready(function(){

$('a[rel="external"]')

.click( function() {

window.open( $(this).attr('href') );

return false;

});

});

[standuncan]

I wouldn’t worry about it not passing validation, if you’re using 1.0 Strict. Remember validation is not the be all final best solution, it is (at least in my opinion) to help guide you, not the final word necessarily.

[aoeui]

for me it feels like the less .JS / jQuery denpendant the better
no script = faster

[aoeui]

I guess it solves basic problems
I will try look for what

rel="external"

can be used for in combination with jQuery

[Mottie]

I’ve seen people use

rel="external"

or

class="external"

to add an icon to the link indicating that the link will take you off-site. A good example I can think of is the tablesorter documents.

a.external {

background: url("../img/external.png") right center no-repeat;

padding-right: 12px;

}

jQuery

which can just as easily be targeted using

a[rel=external] {}

The only reason I would use jQuery would be because I don’t want to waste time looking for links to add classes to:

$('a').each(function(){

if ( this.href && !/mysite.com/.test(this.href) ) {

$(this).addClass('external').attr('target','_blank');

}

});

* the code should work… I haven’t tested it explicitly. And of course, you’ll need to replace the “mysite.com” with a unique portion of your site url and escape the period using a back-slash.

[aoeui]

@Mottie
thanks for super post :]

I am using in .css

a[href^="http"]:after {

content: url(img/icon/small/http.png);

padding-left:5px;

}

but as :after is not working in all browsers might switch to jQuery to rely on

[mbilalawan]

Hi Guys,

I have written a small jQuery plugin for the same have a look if it works for you.

http://www.uipress.com/extlink-a-jquery-plugin-to-add-target_blank-to-external-and-file-links/

[BoringCode]

I have no idea why you wouldn’t use target=”_blank” JS isn’t the best solution in this case.

[kreaninw]

The problem about CSS target=”_blank” is, it doesn’t work on Webkit iOS and Android. I will try jQuery method and will update my post again if it’s work or not.

[joshuanhibbert]

@kreaninw This is most odd, as I have found the exact opposite.

[kreaninw]

@joshuanhibbert I’m not sure about iOS(I don’t have one but I remember test this with friends.), but target=”_blank” is 100% not working on Android, as I test this myself and here is the answer.

[Senff]

I agree with @andy_unleash that there’s nothing wrong with using HTML over jQuery or Javascript, though I don’t think there’s a significant amount of users out there who are not using Javascript.

Besides, anyone who doesn’t have Javascript turned on and then assumes a site is broken? I don’t think so. They’d think the whole Internet is broken! ;)

[Author]

Posts