views:

532

answers:

3

Hi All,

I'm building a menu with topics and items.Each topic can be expanded and collapsed by clicking on it.My task is to make it possible to move through menu topics and items with the up and down arrow keys.I've done this already, but the problem is that when the page is bigger than the window, the page is scrolling when pressing the arrow keys.I've tried using

document.body.style.overflow = "hidden";

to stop the page from scrolling.Thus when I clcik on 'Topic2' for example I can continue using the arrow keys to go to next topic/item.After that if I click anywhere else on the screen I set the overflow back to auto and the page can be scrolled again. This works in IE, but not in FF.In FF the scrollbars are being removed and the mousewheel doesn't scroll the page, but the arrow keys still DO . So my question is how to fix that. Or better, how not to scroll the page when the focus is on any menu element? Thus I won't use the overflow property.

Thank you,

+2  A: 

You have to bind a keydown event to the document, and if the event keycode matches any of the arrow keys (37 through 40), return false. That way the arrow press won't go any further.

document.onkeydown = function(e) {
    var k = e.keyCode;
    if(k >= 37 && k <= 40) {
        return false;
    }
}

You can easily expand on that to work only when your menu is active, but without seeing some of it's code, it's impossible to give you an example.

Tatu Ulmanen
Hi Tatu,Thank you for your answer ! It worked !At first sight I thought it will block the arrow keys at all(even for my menu), but I use the onkeyup event for the menu.So everything is ok now...I only have to adjust it for IE too :)Thanks to Pekka too !All the best.ps: I can't believe how much time I spent to find the solution and finally it was so simple :)
Chavdar
@Chavdar, don't forget to mark the answer accepted so others don't have to bother anymore. And you know, you could combine the event in your menu with this to make things a bit simpler (do your stuff in menu, then return false if the key was an arrow etc, but this requires to be bound on the onkeydown event).
Tatu Ulmanen
Thanks Tatu, answer is marked now.
Chavdar
A: 

The only way I can see is intercepting the keydown event and doing the blurring/focusing yourself.

There seem to be some gotchas with catching those keys, see this question for a number of (JQuery based) examples that look quite promising.

Pekka
A: 

I think we can call this resolved.

Thank you Tatu and Pekka !

Chavdar
You're welcome. Don't forget to mark Tatu's answer as the solution using the little check mark next to it.
Pekka
Ok, I marked it.I've posted a question for first time and didn't know I have to check it, but I know now :)
Chavdar