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:
Unblurred Link

The jQuery Code

With jQuery loaded in the document, add the following jQuery:

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.

Posted Sunday, December 21st, 2008 · Back to Top

SPONSOR

Add Comment

13 Comments 5 Mentions

  1. Karl Swedberg Author Editor

    Hi Zach. This post reminds me of one I wrote a couple years ago: Quick Tip: Blurring Links. ;)

    ·

  2. Zach Dunn Author Editor

    @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

    ·

  3. Karl Swedberg Author Editor

    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.

    ·

  4. STVProductions Author Editor

    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 ;)

    ·

  5. Mick T. Author Editor

    The link in the demo doesn’t blur for me on Firefox 3.0.5 (on Ubuntu)?

    ·

    • Zach Dunn Author Editor

      @Mick I’m not sure what would be causing that. Does it work for you in other browsers?

      ·

  6. Aaron Belafonte Author Editor

    I think Mick may be expecting an aesthetic ‘blur’. Not the one discussed here.

    ·

  7. Thiago Souza Author Editor

    It works. Nice.

    ·

  8. Joel Dow Author Editor

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

    ·

  9. Sam Dunn Author Editor

    @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.

    ·

  10. David Sandeberg Author Editor

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

    ·

  11. Ext3h Author Editor

    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.

    ·

  12. Santosh Kumar Author Editor

    Not working for me.. on Chrome 21.0.1180.89 on Ubuntu 11.10

    ·

 

Build Internet by One Mighty Roar. Since 2008.