1

I've coded the following functions to switch the content for divs using keypresses. Basically I display 2 images, which are being changed to another onkeydown. If onkeyup, the image will be restored.

It works beautifully, as long as only one key is being pressed. If I make The keypress shortcut [224+86] (Meta+V), the key released last "stays" onkeydown (no onkeyup is generated for some reason).

//CMD
$(document).keydown(function (e) {
    if (e.keyCode == 224)
        document.getElementById("loading").innerHTML = '<div style="position: absolute; left: -30px; top: 8px; width: 600px; height:600px; padding: 0px; border: 0px; z-index:200; padding:158px;"><img src="img/mac/1_b.png" /></div>';    
});

$(document).keyup(function (e) {
    if (e.keyCode != 224)
        document.getElementById("loading").innerHTML = '<div style="position: absolute; left: -30px; top: 8px; width: 600px; height:600px; padding: 0px; border: 0px; z-index:200; padding:158px;"><img src="img/mac/1.png" /></div>';
});

//V
$(document).keydown(function (e) {
    if (e.keyCode == 86)
        document.getElementById("loading2").innerHTML = '<div style="position: absolute; left: 95px; top: 9px; width: 600px; height:600px; padding: 0px; border: 0px; z-index:200; padding:158px;"><img src="img/mac/2_b.png" /></div>';    
});

$(document).keyup(function (e) {
    if (e.keyCode == 86)
        document.getElementById("loading2").innerHTML = '<div style="position: absolute; left: 95px; top: 9px; width: 600px; height:600px; padding: 0px; border: 0px; z-index:200; padding:158px;"><img src="img/mac/2.png" /></div>';    
});

Can anyone please point me in the right direction? Thanks so much for any hint!

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
DonCroce
  • 475
  • 3
  • 8
  • 17
  • Could you put a reproducible test case at [jsbin.com](http://jsbin.com/) or something like it? – Brian Donovan Dec 30 '10 at 19:48
  • I think you can't test it, because you have to have a mac. – DonCroce Dec 30 '10 at 20:00
  • I think [this .ctrl function](http://www.gmarwaha.com/blog/2009/06/16/ctrl-key-combination-simple-jquery-plugin/) may be helpful to you. Basically allows you to specify the "Control+__" value. If nothing else it will give you insight as to how to detect two buttons. **EDIT** Also see [this other question](http://stackoverflow.com/questions/3834175/jquery-key-code-for-command-key) regarding Mac's control key. – Brad Christie Dec 30 '10 at 20:16
  • What's the point on using jQuery and going back to basic javascript? – metrobalderas Dec 30 '10 at 21:05

1 Answers1

1

I think the problem is that you are separating these out too much. You should combine them all into the same event handler and see what happens. You should combine the logic too.

Instead of doing this many times:

$(document).keydown(function (e) {
    if (e.keyCode == 224)
        document.getElementById("loading").innerHTML = '....';    
});

Try combining the logic into one callback event:

$(document).keydown(function (e) {
    if (e.keyCode == 224)
        document.getElementById("loading").innerHTML = '....'; 
    if (e.keyCode == 86)
        document.getElementById("loading2").innerHTML = '....';   
});

Also - are you sure you have the correct key for the CMD key? I think it is a little more difficult to detect than what you are doing as per here - http://www.quirksmode.org/js/keys.html. Take a look here: jQuery key code for command key for some suggestions on how to use the CMD key.

Community
  • 1
  • 1
zsalzbank
  • 9,685
  • 1
  • 26
  • 39
  • I basically copy-pasted this from the jquery script library, because i don't know much js stuff :( – DonCroce Dec 30 '10 at 20:10
  • Can you please explain your thoughts a bit further? Thanks ;) – DonCroce Dec 30 '10 at 20:11
  • I'm sure to have the correct key - otherwise it won't trigger anything. I've tried it with your suggestion, but there's still the problem of that a multi-key-press will cause problems. I thought of adding a script for avoiding this working like this: setinterval(If(keydown==Keycode) change back to normal image, 100); But i don't know how to do it... :( – DonCroce Dec 30 '10 at 20:44