Question

I have a div section, which is full of <a href=””> tags, on a event on the page I shrink the div section BUT if the user tabs into the div section, it moves so that the highlighted <a href></a> has focus, is there any way to lock a div section that it’s contents don’t move ?

So for example the code (psuedo not real) I have the following

<div>
  <h4>Heading</hv>
  <a href = "1">Link 1</a>
  <a href = "2">Link 2</a>
  <a href = "3">Link 3</a>
</div>

I shrink the div section so that only the h4 is displayed {overflow:hidden}, however the user can then tab to the elements and this scroll so that they are displayed in the the div “window” which is not what I want, so in effect I get <div><a href = "1">Link 1</a><div> where what I want to remain is <div><h4>heading</h4></div> in effect I want to stop the contents of the div sectio scrolling so that the selected element is displayed. I know that if they press return the selected link will be follow, but I’m not worried about this, just what is displayed

I hope thats cleared, you can see my problem if you go to link text click on the training section on the left and then back tab (shift tab) , the article section above changes.

Thanks

Answer 1

is there any way to lock a div section that it’s contents don’t move?

Not really*, but you don’t really want that anyway. Even if you locked it in place, the invisible links would still accept focus, resulting in a confusing tab behaviour.

(*: short of something horrendous like changing the scrollTop of the overflowing element from JavaScript onfocus. Ugh.)

What you should probably do is put a div around the links, and set its display style to ‘none’ when the links are elided. That way they won’t participate in the tabbing order.