0

I have a problem when focusing on invisible elements. Markup:

<div id="outer">
    <div id="inner" style="top: 0;">
        <div class="group" style="background: red;"><a href="#">X</a></div>
        <div class="group" style="background: blue;"><a href="#">Y</a></div>
        <div class="group" style="background: green;"><a href="#">Z</a></div>
    </div>
</div>

<button onclick="document.getElementById('inner').style.top = '-182px';">Down</button>

And css:

#outer {
    width: 300px;
    height: 182px;
    overflow: hidden;
    background: black;
}
#inner { position: relative; }
.group { width: 300px; height: 182px; background: red;}

When I press 'down' button inner's style become 'top: -182px', which functionally just shows another group of items. And component basically works as a vertical group slider. Everything works perfectly until I'm using 'Tab'. Just before slider show next group browser automatically shifts inner div without changing any attributes on it.

Is there any change to get offset made by browser from DOM or anywhere else? I know that scrolling on focus is default browser functionality so I am not going to fight with browsers and I am pretty sure I can't disable such scrolling.

I've figured out that browser scrolls before any js code executes. Is there any way to intercept focus event and scroll before browser?

ruruskyi
  • 2,018
  • 2
  • 26
  • 37
  • 1
    Can you please provide [jsfiddle](http://jsfiddle.net/) for the it. – Bongs Aug 31 '12 at 12:31
  • just press 'Tab' first then press 'down' button – ruruskyi Aug 31 '12 at 12:45
  • why dont you disable the tab in your code :-) – supersaiyan Aug 31 '12 at 13:01
  • 1
    because my website is full accessible from keyboard, why should I disable one of the most important components? (-1 for @SACHIN). This answer reminds me autocomplete styling issues where everybody recommend to disable autocomplete. I need 'Tab'! – ruruskyi Aug 31 '12 at 13:08
  • @ruruskyi: You might try some of the tricks to remove elements from the tabindex order (eg http://stackoverflow.com/questions/5192859/html-remove-element-from-tab-index ). This of course will mean that they aren't tabbable when visible either without some scripting to change them about... Here's a quick fiddle to save you doing it yourself: http://jsfiddle.net/chrisvenus/D7vHm/ – Chris Aug 31 '12 at 14:32
  • @Chris, that sounds like a complete hack. I can imagine `Tab` will jump over hidden elements to the next visible focusable element (outside of slider), then browser will scroll to that element, let's say, then I can reset tabindex for hidden elements and focus on desired element, and browser will scroll again to show it. Thanks for idea, but I'll wait a bit for better solution, if any, because this approach requires a lot of coding and is too complex, in fact. I don't want to bring so much complexity to the website ( – ruruskyi Aug 31 '12 at 14:56
  • Yeah. If I'd thought it was a good solution I'd have put it as an answer. ;-) I'll certainly agree it has a lot of potential for headaches down the road. – Chris Aug 31 '12 at 15:42

2 Answers2

0

Why not use a bit more JS? I've forked your JSfiddle to use raw JS, though I would use jQuery to make it much cleaner.

http://jsfiddle.net/bldoron/wMXpt/4/

Basically I would traverse the elements and hide the irrelevant ones explicitly instead of implicitly with css rules.

You need to check if we passed the last node, but you get the picture.

bldoron
  • 1,050
  • 4
  • 20
  • 37
  • interestingly, but `Tab` doesn't work when element has `display: none`. You can try next test: click on X link, then press `Tab`, and.. it goes to the button instead of Y link. So the main thing doesn't work, oops... anyway, thanks a lot – ruruskyi Aug 31 '12 at 15:20
  • So sorry, I thought you wanted to avoid Tab altogether for this element. My Bad. Though, if I may donate my two cents here, I as a user would never have thought that a hidden element can be reached with tab, it's very unintuitive. – bldoron Aug 31 '12 at 16:53
  • Ah, now I see... Your suggestion make me thinking about using another controls, for ex., `<-` and `->` buttons, which make more sense to me now than `Tab`. Thanks for your help! – ruruskyi Aug 31 '12 at 19:33
0

Take a look at this: http://jsfiddle.net/byTLg/8/. It works! Fiddle will explain much more than me )

ruruskyi
  • 2,018
  • 2
  • 26
  • 37