Registration for jQuery Conference 2008 is closed.

Quick Tip - Blurring Links

With all the fun new things you can do using jQuery and other JavaScript libraries, people are using links ("a" tags) for much more than sending users to a different page. One little annoyance I've found when using links for these events, though, is the little dotted outline that appears around the linked words upon clicking them and making them "active."
dotted link outline
It makes sense to see the outline when clicking, but I don't want it to stay there.

In Firefox 1.5 and up, it's easy to get rid of the outline with a little CSS:

PLAIN TEXT
CSS:
  1. a:focus, a:active {
  2.   outline: none;
  3. }

Unfortunately, that doesn't work in Internet Explorer 6 and below (is anyone surprised?).

Wouldn't it be nice to get rid of the outline in every browser (as long as JavaScript is enabled, of course)?

jQuery to the Rescue

The trick is to take the focus off the link once it has been clicked, and jQuery makes that simple. In the jQuery Discussion List, Klaus Hartl offered this snippet, which works perfectly:

PLAIN TEXT
JavaScript:
  1. $('a').click(function() {
  2.   this.blur();
  3. });

Or, if you wanted to apply the blur only to links inside a DIV with an ID of "magic," for example, you could replace $('a') with $('#magic a'). If the blur should apply only to links with a class of "fun," the selector would change to $('a.fun'). See how easy? Give it a try:

click me and I won't show the ugly dotted outline

For this little demo, I gave the link a class of "fun" and put the above jQuery code inside $(document).ready() (For more on $(document).ready(), see Introducing $(document).ready() ). I also added return false; because I didn't want the link to take you anywhere.

25 Responses to “Quick Tip - Blurring Links”

  1. Anonymous Says:
    October 17th, 2006 at 1:16 am

    Get rid of the dotted lines around active links with 2 lines of css -or- javascript...

    ...

  2. trovster Says:
    October 17th, 2006 at 4:35 am

    The topic of removing the focus halo has been discussed, and is a bad idea due to usability issues, re: http://sonspring.com/journal/removing-dotted-links#c001193

    Removing the blur via JavaScript is what I've always done since learning JavaScript but had a hard time getting the same effect (just learning jQuery) because blur() is a function. In the end someone in the IRC channel helped me and I found that the following worked well: $(this).get(0).blur();

  3. Klaus Hartl Says:
    October 31st, 2006 at 8:49 pm

    Hi there,

    instead of $(this).get(0).blur() just use this.blur(). It makes no sense to first wrap a jQuery object around this and then immediatly get the node back out again via get(0).

  4. Joey White Says:
    November 17th, 2006 at 8:22 pm

    Doesn't work on my Firefox 1.5.0.8 or IE 6.. at all.

  5. Karl Says:
    November 17th, 2006 at 8:36 pm

    Joey, that's really strange, because I just double-checked it in IE6 and Firefox 1.5.0.7 for Windows and Firefox 2.0 for Mac, and it worked just fine. I see the outline while I click the link, but as soon as I release the mouse button the outline goes away, as desired.

    When you click on the link, does it take you to the top of the page? If so, you might have JavaScript turned off. Also, it won't work if you're testing it within most feed readers, as the feeds don't grab the javascript files.

  6. Tim McCormack Says:
    February 7th, 2007 at 2:19 pm

    Failing in Firefox 2.0.0.1 on Windows XP. Outline is there, link does nothing.

  7. Karl Says:
    February 7th, 2007 at 2:39 pm

    Hi Tim,

    I just tried it in Firefox 2.0.0.1 on Windows XP here, and it is working fine. The link should no nothing. The outline should go away.

    That said, I noticed that if I click and drag on the link, the outline stays. But a clean click—even a series of quickly repeating clean clicks—results in no outline.

    Could the failure be due to an inadvertent moving of your mouse?

  8. Tim McCormack Says:
    February 8th, 2007 at 1:53 pm

    Just tried in a clean profile (DOM Inspector and Talkback), still doesn't work. Interestingly, if I tab to the link, the outline disappears when I hit Enter. No errors or warnings in the JS console.

    Wait -- my bad. The outline does go away, it's just there during mouseDown. I think I misread the intent of this technique. OK, it's all good!

  9. Karl Says:
    February 8th, 2007 at 2:07 pm

    Phew! You had me scratching my head for a while there. Thanks for clearing that up. :)

  10. Tim McCormack Says:
    February 9th, 2007 at 2:40 pm

    And thank you for the technique! The day after I found this article, I found a place to apply what I had learned.

  11. Alex Says:
    February 20th, 2007 at 1:10 am

    This was exactly the proposed solution to the minor annoyance I was hoping to solve forever, and yet somehow Mac Firefox still places the dotted lines around the link when I click on it...

    the code is:


    a:hover, a:active, a:focus {
    color: #6699FF;
    outline:none;
    text-decoration:none;
    }

    #fulltext a, a:hover, a:visited, a:active, a:focus {
    color: #000000;
    outline:none;
    text-decoration:none;
    }

    So as you can see, I'm trying to create a link of out a text that stays looking as text, without really even showing that it is a link. The calm of the layout is thus ripped apart with those dotted lines...

    Help appreciated!

  12. Alex Says:
    February 20th, 2007 at 2:06 am

    Solution. What I had done was ignore the use of any tags to denote the element (for which I wanted no outline) as text, so no or around the text. Odd though that this wasn't enough of an issue to prohibit the text-decoration:none from also not working... thanks again for the tip. -A

  13. H. Roberts Says:
    February 23rd, 2007 at 8:28 am

    For a completely validate and cross browser proof work-around go to my blog here

  14. H. Roberts Says:
    February 23rd, 2007 at 8:33 am

    Sorry, that was a dead link, try here

  15. (bs.) Says:
    March 22nd, 2007 at 9:28 pm

    Here's a clue - it wasn't working for me at first, either, then I remembered that I had to change my settings in NoScript. I have an add-on for Firefox called NoScript basically because I want to control the scripts I run - once I allowed scripts to be ran from your domain, the outline went away and the click event didn't return me to the top of the page.

    Works nicely. Well done.

    Thanks, this is about as useful as the <meta http-equiv="imagetoolbar" content="no"> tag in the header to get rid of IE's nasty, stupid image toolbar thingy that looks nasty when hovering over images on a page.

    Peace of Christ,
    (bs.)

  16. Derek Says:
    April 18th, 2007 at 8:17 am

    new to this.

    what's the full code to implement this...?

  17. Karl Says:
    April 18th, 2007 at 8:54 am

    Hi Derek,
    Somewhere in the <head> of your HTML file, you'll need to include a reference to the jquery.js file and your custom script file. For example:

    <script src="/scripts/jquery.js" type="text/javascript"></script>
<script src="/scripts/myscripts.js" type="text/javascript"></script>

    Then, in your custom script file, you can drop this in: 

    //load the script when the DOM is ready
$(document).ready(function() {
  // for any 'a' element with class="fun",
  // take focus off of the link when it's clicked
     $('a.fun').click(function() {
       this.blur();
        // do something else here
        // then stop the click from executing the default action
       return false;
     });
});

    Of course, you don't need the comment lines (the ones with //. I just put them in there to give you an idea of what is going on.

    Hope that helps!

  18. Derek Says:
    April 18th, 2007 at 9:30 am

    got it!

    MUCH thanks!

    --DVO

  19. Mike Says:
    October 30th, 2007 at 9:33 am

    Nice one! But how to get rid of outlines that appear when clicking on buttons (inputs)? Anyone has a clue?

  20. .KX Says:
    November 14th, 2007 at 4:28 am

    If you don't want to see the focus outline, period - use this instead:


    $('a').focus(function() {
    this.blur();
    });

  21. Thai Property Says:
    January 16th, 2008 at 10:01 am

    Hi Admin,

    Have any demo ? i will see your code , cuz it hard to understand jQuery Code for me

    Thanks

  22. Karl Says:
    January 16th, 2008 at 3:33 pm

    Hi Thai, look above for a link that says "click me and I won't show the ugly dotted outline." Click on it. That's the demo.

  23. Jake Says:
    July 16th, 2008 at 6:12 pm

    At post #2

    The accesibility thing is rubbish, tab through until you get the link and IT'LL show the dotted outline ¬.¬

  24. iDevGeek Says:
    August 14th, 2008 at 3:27 pm

    I use the link blurring on DHTML elements which shouldn't have the nasty box around due to their use as controls on various dynamic components.

    Example as jQ plugin:

    $.fn.nb = function() {
    return this.focus(function(){
    this.blur()
    });
    }

    Use:

    $('a.noblur').nb();

  25. asdasd Says:
    August 21st, 2008 at 10:55 am

    alert('hello')Hello

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <pre> <em> <i> <li> <ol> <strike> <strong> <ul>

IMPORTANT: If you wish to post code examples, please wrap them in <code> tags. Multi-line code should be wrapped in <pre><code> </code></pre> Also, use &lt; instead of < and &gt; instead of > in the examples themselves. Otherwise, you could lose part of the comment when it's submitted.