We're creating a slideshow in HTML/CSS/JS but it isn't working in Firefox for some reason. It works in Webkit browsers without a problem..

The code is this:

    keyPress : function() {
      $( document.body ).keydown(function(e) {
         if ( e.keyCode === 37 || e.keyCode === 39 || e.which == 37 || e.which === 39) {
            e.preventDefault();
            ( e.keyCode === 39 || e.which === 39 ) ? Slides.next() : Slides.prev();
         }
      });
   },

If I use just $( document ) instead of ( document.body ) it does change my colours, but the slides don't change..

For some reason, Firefox (7.0.1, OSX Lion) doesn't pick up the keypresses.. It works in Safari/Chrome without a problem.

The site we're testing this on is : #took link out

We're creating a slideshow in HTML/CSS/JS but it isn't working in Firefox for some reason. It works in Webkit browsers without a problem..

The code is this:

    keyPress : function() {
      $( document.body ).keydown(function(e) {
         if ( e.keyCode === 37 || e.keyCode === 39 || e.which == 37 || e.which === 39) {
            e.preventDefault();
            ( e.keyCode === 39 || e.which === 39 ) ? Slides.next() : Slides.prev();
         }
      });
   },

If I use just $( document ) instead of ( document.body ) it does change my colours, but the slides don't change..

For some reason, Firefox (7.0.1, OSX Lion) doesn't pick up the keypresses.. It works in Safari/Chrome without a problem.

The site we're testing this on is : #took link out

• javascript
• jquery
• firefox
• keypress

• May I respectfully suggest that you provide a way to click through the slides, as well as arrow-keying through them? – Blazemonger Commented Oct 5, 2011 at 13:34
• Yes, it's on the todo list; but I want it to work in Firefox :( – Joris Ooms Commented Oct 5, 2011 at 13:36
• Use Firebug to inspect the e object to find out what methods and properties it supports. – Spudley Commented Oct 5, 2011 at 13:40

3 Answers 3

UPDATE: I think your problem lies in the use of the "document.body" selector. This works for me in Chrome but not in Firefox ( http://jsfiddle/Jncrh/2/ ) Try just selecting "document" instead and see if it behaves. ( http://jsfiddle/Jncrh/5/ )

$(document).bind('keydown',function(e){
    if (e.which==37 || e.which==39) {
        e.preventDefault();
        if (e.which==37) {
            alert("going back");
        } else {
            alert("going forward");
        }
    }
}); 

Firefox can pick up the keypresses in the above sample, so I suspect the problem lies elsewhere in your code.

PREVIOUS: A quick Google search reveals that Firefox uses event.charCode instead of event.keyCode. Try this:

key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
if (key===37 || key===39) {...

However, jQuery should be able to pick up all of those with its own event.which, so I don't understand why that isn't working as-is for you.

In the keydown and keyup events, all major browsers support the keyCode property of the corresponding event, so there's no need for the which property. Also, to catch key events on the whole document, you need to attach the listener to the document rather than the body.

Here's the definitive page on JavaScript key events: http://unixpapa./js/key.html

And here's a revised version of your code:

$(document).keydown(function(e) {
    var leftArrow = (e.keyCode == 37), rightArrow = (e.keyCode == 39);
    if (leftArrow || rightArrow) {
        e.preventDefault();
        rightArrow ? Slides.next() : Slides.prev();
    }
});

    if ($.browser.mozilla) {     
        $(document).keypress (keyType); 
    } 
    else{
       $(document).keydown (keyType);
    }

    function keyType(e){
    if (e.keyCode==37 || e.keyCode==39) { 
        e.preventDefault();         
        if (e.which==37) {             
           //handle left
        } 
        else { 
          //handle right      
        }       
    } 
}