Comments on: Quick Tip: Dynamically add an icon for external links

By: Top jQuery tips & tricks for jQuery programmers – Part IV : Marketing

Top jQuery tips & tricks for jQuery programmers – Part IV : Marketing — Fri, 09 Sep 2011 16:53:01 +0000

[...] This trick is pretty simple and good for usability. If links are linking to external website, an image will be displayed next to the link. Dynamically add an icon for external links [...]

By: Bart's notes » Blog Archive » Easily track outgoing links with jQuery and Google Analytics

Thu, 19 May 2011 09:17:04 +0000

[...] problem, you can do like me and borrow this trick from Karl Swedberg: $('a').filter(function() { return this.hostname && this.hostname [...]

By: Emmanuel K

Emmanuel K — Wed, 08 Dec 2010 15:42:13 +0000

Works as expected, thanks a lot!!

By: Karl Swedberg

Karl Swedberg — Wed, 08 Dec 2010 13:49:21 +0000

Hi there, You could write a little function that strips the subdomain before comparing. The function could look something like this:

function stripSub(str) {
  var parts = str.split('.');
  if (parts.length === 3) {
    parts.shift();
  }
  return parts.join('.');
}

Then your return statement would look like this:

return this.hostname &&
   stripSub(this.hostname) !== stripSub(location.hostname);

By: Emmanuel K

Emmanuel K — Wed, 08 Dec 2010 12:33:17 +0000

Hi Karl, another great post from you! keep up with the good work.. I have a question regarding this post, lets say I have a subdomain of help.whatever.com and I don’t want the external link icon to appear on links of my main domain which could be http://www.whatever.com I want them both to be consider as one domain.. How can I do that? Any recommendation?

Cheers,
E.K

By: David Lockie

David Lockie — Fri, 26 Feb 2010 16:21:26 +0000

@Karl – thanks for the non-image-containing-link selector. Tried every syntax EXCEPT that one ;)

By: david

david — Mon, 15 Feb 2010 16:25:57 +0000

Late reply, I know, but you could include

white-space: nowrap;

with your a.external style, with the caveat that long links could break your design somewhere.

By: Karl Swedberg

Karl Swedberg — Wed, 20 Jan 2010 18:38:01 +0000

My recommendation is to take the advice from the people on that forum: ignore those Firefox warnings. They’re meaningless within the context of JavaScript.

By: Jean-Frederic

Jean-Frederic — Wed, 20 Jan 2010 18:30:11 +0000

this is the error message i got.

Warning: Unknown pseudo-class or pseudo-element ‘has’. Malformed simple selector as negation pseudo-class argument ‘has’.

On some forum, peoples are saying this :
it’s not an error, it’s just a warning.
And this particular warning tells us that Firefox is not aware of
jQuery selectors, at least not of the :gt() selector, but, as long as
you know that it is a valid selector (and it works), you should just
ignore the warning….

Is there something we can do for this ? or just wait for the jQuery 1.5 to solve that issue ? or maybe next version of FireFox…

Thanks

By: Jean-Frederic

Jean-Frederic — Wed, 20 Jan 2010 15:57:32 +0000

$(document).ready(function() {  $('a:not(.nojqueryanchor):not(:has(img))').filter(function() { return this.hostname && this.hostname !== location.hostname;  }).after(' ').attr('target', '_blank');});

This is my latest code. Unfortunatly, im getting an error about "has" that is malformed, in the Firefox's console. Do i need to add something ? like.... :not(":has(img)")... or :not(":has("img")") Thanks