SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keyboard focus outline, browser Back button, onmouseup and blur

    This is a really basic question: what does blur mean, or what does it do when used in links as described below?

    I've tested it on Firefox 3.6 and Opera 11 and it behaves as I hope except for one thing. During testing if I use both keyboard and mouse to navigate within the same session, the browser history for the 'other' method is wiped out; it won't go backwards beyond the most recently used method.
    Is this not a surprise when you know what blur really means?

    I want the following (assuming Javascript is enabled):
    a) Keyboard users to see a focus outline on navigation links.
    b) Keyboard users to see the outline still there if they use the browser Back button, and continue tabbing from that link onwards.
    c) Mouse users to NOT see an outline if they use the browser Back button.

    I don't know JavaScript and the following is simple for me to implement.

    html (for the top and side nav):
    Code:
    <div id="topnav"><div class="nav">
    <em title="Current section">Introduction</em>
    <a href="../foldername/filename.html" onmouseup="this.blur();">Section name</a>
    ...etc </div></div>
    
    <div id="sidenav"><div class="nav">
    <em title="Current page">Intro page name</em>
    <a href="filename2.html" onmouseup="this.blur();">Intro section page 2 name</a>
    ...etc </div></div>
    css (concentrating on just the outline, the navigation background colour is a very light grey):
    Code:
    div.nav a {text-decoration: none; outline: 0; color: #321; background: transparent;  }
    div.nav a:link, div.nav a:visited, div.nav a:active { outline:0}
    div.nav a:focus { outline: 2px dotted #005; }
    div.nav a:hover { color: #ffe; background: #005; outline:0 }
    
    div.nav em { font-style: normal; color: #f40; background: #ffe; }
    Thank you for any help.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by MaggieTwo View Post
    This is a really basic question: what does blur mean, or what does it do when used in links as described below?
    The blur event originally started with form fields. When you click (or navigate) to a field, the focus event triggered for that field. When you left the field the blur event for that field would trigger. So you gain focus when the field is active, and the blur event is when the field loses focus.

    So blur is a play-on-words, to provide a meaningful focus/blur event pair.

    With links, a similar story applies. An active link currently has the focus. The blur event causes that link to lose focus.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul for taking the time to reply - blur means what I thought.

    I've read that in-line code is 'old hat' and should not be used. I wondered if it might be reason the browser history is lost when using a mixture of keyboard and mouse for link navigation.

    I shouldn't implement something I don't fully understand, so that's my next decision!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by MaggieTwo View Post
    I've read that in-line code is 'old hat' and should not be used.
    It's not just old-hat, it's wasteful and confusing too.

    Do you remember the bad-old-days of this sort of code?

    Code html4strict:
    <div style="width: 800px; margin: 1em auto; font: bold 1em/1.2 Verdana, Arial, Helvetica, sans-serif">
        <div style="float: left; width: 400px; padding: 1em 2em; font-size: 0.9em">
            <span id="get-stuff" onclick="callSomeFunction()">News</span>
        </div>
    </div>

    Problems include:
    • the html page is much larger
    • no caching
    • horrible accessibility
    • need to edit every page that contains the code


    We learned out lesson early on with CSS and moved the inline styles out to a separate file. That allowed the CSS file to be cached, and removed from HTML page results in the HTML page being lighter, and the presentation is easier to manage due to only needing to edit the external CSS file.

    The same issues exist with scripting too.[/QUOTE]
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    It's not just old-hat, it's wasteful and confusing too.

    <snip>

    The same issues exist with scripting too.
    I did try to cobble together a 'proper' solution using an external js file, but obviously it was way beyond me.

    A focus outline for mouse users is not a big issue in the scheme of things. I might get the courage to ask for a code review in another thread for something I would like to implement... we'll see.


Bookmarks

Posting Permissions

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