Quick Tip – Blur Links With jQuery
This quick tip covers a quick usability upgrade for links on AJAX pages. By most browser’s default a dotted line stays around the link after it has been clicked. This becomes a problem with AJAX because the pages are often not reloaded.
Turning it off is simple with jQuery without any impact to the functionality. Give your links some love now and make the appearance smoother for the user later!
The Goal
We are aiming to prevent the following from happening:
The jQuery Code
With jQuery loaded in the document, add the following jQuery:
$(document).ready(function(){
$('.blur').click(function(){
$(this).blur();
return false;
});
});The Explanation
This snippet of jQuery selects all anchor tags with the class “blur” and monitors for a click event. When a link is clicked the outline is removed (“blurred”).
The return false is optional, it simply prevents a link from loading the target in it’s href attribute. This way the link will only fire the click function. This keeps it from activating a null anchor link of “#” which can make the page jump.
See the results on the live demonstration.
Discussion
December 21st, 2008 at 10:17 PM
Hi Zach. This post reminds me of one I wrote a couple years ago: Quick Tip: Blurring Links. ;)
December 21st, 2008 at 11:59 PM
@Karl
I just read over your article and you’re right, they are strikingly similar 8O . In an effort to go over the basics it appears I’ve covered ground you’ve already done quite well. I assure you this was an unintentional coincidence! At the very least I’ve found a new blog to follow!
Best,
Zach
December 23rd, 2008 at 3:00 PM
Hey Zach, I need no convincing. It’s a common enough issue and an elegant solution, so it’s no surprise at all that more than one person would blog about it. Seems we’ve both found a new blog to follow. Cheers.
January 19th, 2009 at 3:30 PM
If it’s about removing the outline of hyperlinks, i suggest you just use CSS and place a{outline:none} in you css file! So if it’s about removing the dotted line, that would be enough!!! Otherwise I have to read this article and the article of Karl again to see what it’s all about ;)
January 24th, 2009 at 11:01 AM
The link in the demo doesn’t blur for me on Firefox 3.0.5 (on Ubuntu)?
January 24th, 2009 at 12:21 PM
@Mick I’m not sure what would be causing that. Does it work for you in other browsers?
February 7th, 2009 at 7:11 PM
I think Mick may be expecting an aesthetic ‘blur’. Not the one discussed here.
February 13th, 2009 at 7:02 PM
It works. Nice.
April 3rd, 2009 at 12:35 PM
This is not worth the extra js code. Just use a{outline:none;} in your css.
April 3rd, 2009 at 12:41 PM
@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.
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.