Comments on: Quick Tip – Blur Links With jQuery

By: Ext3h

Ext3h — Wed, 04 Jan 2012 15:20:33 +0000

Allthough you should NEVER remove all markup for “blurred” links as this markup is essential for keyboard navigation.

Take this website for example, try to navigate over the page using the “tabulator”-key.
Guess what, it won’t work because someone decided to make all links look the same, weither they are active or not. It doesn’t matter how “smooth” the designer thought it would look, it simply breaks usability.

The original JS solution was much better, as it removes the focus (and therby the markup) ONLY once the link has been clicked and should only be used for “links” which cause an action in javascript and only on action by the user.

David Sandbergs “solution” is the worst by far, if you manually remove the focus from the link on focusing, you won’t be even able to see the URL of the link in the browser window when navigating by keyboard or just hovering over the link. This makes an “F” for usability.

By: David Sandeberg

David Sandeberg — Fri, 09 Sep 2011 03:05:19 +0000

This also works
$(‘a’).focus(function () {
this.blur();
});

By: Animate Curtains Opening with jQuery | xtra web solutions

Animate Curtains Opening with jQuery | xtra web solutions — Sun, 03 Jul 2011 10:38:21 +0000

[...] false; to make sure the link does not direct the user elsewhere. For those curious, we have written an article about blurring links, so get versed in [...]

By: Share Feedback with Twitter and the Bit.ly API | BestWebMagazine

Share Feedback with Twitter and the Bit.ly API | BestWebMagazine — Mon, 22 Feb 2010 14:49:49 +0000

[...] Quick Tip – Blur Links With jQuery This quick tip covers a quick usability upgrade for links… [...]

By: Blur Links With jQuery | jQuery Wisdom

Blur Links With jQuery | jQuery Wisdom — Tue, 01 Dec 2009 18:29:52 +0000

[...] functionality. Give your links some love now and make the appearance smoother for the user later! Web Site Demo Share and [...]

By: Tutoriales de la web para tu web » Blog Archive » Blur Enlaces Con jQuery

Mon, 03 Aug 2009 16:55:18 +0000

[...] Enlace:http://buildinternet.com/2008/12/quick-tip-blur-links-with-jquery/ [...]

By: Quick Tip - Blur Links With jQuery - Tutorial Collection

Quick Tip - Blur Links With jQuery - Tutorial Collection — Sun, 07 Jun 2009 22:52:27 +0000

[...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Monday, June 8th, 2009 at 4:22 am and is filed under Javascript Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

By: Sam Dunn

Sam Dunn — Fri, 03 Apr 2009 16:41:00 +0000

@Joel Dow
The CSS only method is not compatible with all browsers, which is why this bit of code matters. If this doesn’t matter to you then your method is certainly functional.

By: Joel Dow

Joel Dow — Fri, 03 Apr 2009 16:35:41 +0000

This is not worth the extra js code. Just use a{outline:none;} in your css.

By: Thiago Souza

Thiago Souza — Sat, 14 Feb 2009 00:02:56 +0000

It works. Nice.