Question

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

Answer 1

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.net/Jncrh/2/ ) Try just selecting “document” instead and see if it behaves. ( http://jsfiddle.net/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.