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.
