Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Removing focus without this.blur()?

    Is it possible to remove that "focus" box that IE and NS7 put around links when you click them? Without using this.blur()?
    - Maximus

  • #2
    New Coder
    Join Date
    Aug 2002
    Location
    WA
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I personally have never heard of one, and since this post went all the way to the bottom without receiving any attention at all, my guess is that there is no other way.

    This is just an educated guess though.
    Have a GREAT Ariel day!!
    Mike
    LittleAriel.com

  • #3
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    there are CSS ways, that to my knowledge, aren't currently supported by any browser.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #4
    Regular Coder
    Join Date
    Sep 2002
    Location
    self.location
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tomorrow I'm gonna kick myself for revealing these little snippets, but what the hell...

    IE, as of version 5.5, has a proprietary attribute which hides that ugly focus-ring around *any* HTML element... all you have to do is state it in the relevant tag

    eg:

    <a href="rings_r_us.html" hideFocus>BUY OUR DIAMOND RINGS!</a>

    ...

    As for Netscape 6.x, Mozilla 0.9.x +...

    you can kill the the focus ring any number of ways... But all of them are just resourceful workarounds:

    In these browsers, no rings appear around linked images, so if you add a 1px img somewhere in the link... NO RING!

    ***OR***

    Nest other tags inside the link tag... for instance

    <a href="norings.html"><div>CLICK ME NOW!</div></a>

    (this may also work when embedding <b> or <i> or <font>, etc... experiment)

    ***OR***

    embed some inline javascript within the link tag:

    <a href="norings.html" onMouseover="window.status=' '; return true">STILL NO RINGS!</a>

    I'm not sure this last one works in every instance....

    ...

    And btw, Netscape 4.x and Opera 6.x don't display any rings to begin with, so these browsers are already covered...

    ...

    Just a few tricks off the top of my head.... Cheers!

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you can use onmouseup

    <a href="something.html" onmouseup="this.blur()">

    but it errs in ns4, so you would need to discriminate

    <a href="something.html" onmouseup="if(!document.layers){this.blur()}">

  • #6
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    looks like the most suitible way is <a href="#" hideFocus="hideFocus" onfocus="if(!document.all)this.blur()" onmouseup="if(!document.layers)this.blur()">Link 1</a> but that is probably not XHTML compliant. I also noticed the outline css prop but that doesn't work in any browser. I'm guessing that's what joh6nn was talking about. This way all the main browsers act the same. But... that's a lot of boring code. Anyway, thanks.
    - Maximus

  • #7
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by joh6nn
    there are CSS ways, that to my knowledge, aren't currently supported by any browser.
    CSS3 defines a user-focus property.

    Mozilla implements it as -moz-user-focus until CSS3 UI becomes a Candidate Recommendation. It works in suppressing the outline, but also removes the ability to keyboard-focus it.

    Also, in theory:

    a:active {
    outline: none;
    }

    Should also work...

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's why I recommended using mouseup - that way the elements can still have the focus

  • #9
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I understand your suggestion but if someone presses down the focus is there, I don't want it there at all. But thanks anyway.
    - Maximus

  • #10
    New Coder
    Join Date
    Aug 2002
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just curious but why don't you want to juse use this.blur()?

    The big issue to me is not which way to get rid of the focus box, but whether to do it or not to do it.

    If you remove this, people who have their images turned off in their browsers, won't be able to see the links on your images.


    John

  • #11
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    when i mentioned the CSS that noone supports yet, i had actually been thinking of the outline attribute, and not the focus thing. to the best of my knowledge, trying to control the outline in even Moz does nothing. now, admittedly, i haven't tested this since 0.9.9, and it might have been fixed since then, but i know the lack of support hasn't been fixed in IE6 or Opera, so there's no sense in even trying to use it.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #12
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    outline works fine in Opera 6.

    It is implemented as -moz-outline in Moz until it is identical to the spec's version.

  • #13
    New Coder
    Join Date
    Jul 2002
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes I knew you were talking about outine. Anyway, the reason I wanted some other solution is because IE doesn't do the "Active" color when you use this.blur() but NS6 and Opera 6 does... oh well... its not the biggest deal.
    - Maximus

  • #14
    Regular Coder
    Join Date
    Sep 2002
    Location
    self.location
    Posts
    181
    Thanks
    0
    Thanked 0 Times in 0 Posts
    "because IE doesn't do the "Active" color when you use this.blur() but ..."

    It's true: however if you set a hovercolor, this *will* be observed by IE, even while clicking on the link. So if hover is the same color as active, it might be an acceptable workaround for older (pre 5.5) IE browsers.

    Anyway, that's why I suggested using hidefocus - the actual active color is maintained that way.

    btw, it's simply hideFocus not hideFocus="hideFocus"

  • #15
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No,it is hidefocus="hidefocus" if you are using it in a XHTML page.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •