FadeIn Div at Mouse Cursor on Keypress [Javascript/JQuery]

Question

I'm trying to make a dynamic javascript menu (contained in a div) appear at a visitor's mouse coordinates when they press ctrl+m on their keyboard (m signifying menu, and ctrl+m not being bound in most browsers as far as I'm aware). This way, wherever they are on my site and wherever their mouse is, they can pull up the menu by just pressing that combination and return to wherever they wish to go. At the same time, having the menu not shown until they press the key allows me to control the design experience completely without having to worry about a nav menu.

I've pulled together two different pieces of code I found on here in an attempt to do this myself, but I'm running into an unexpected issue.

1. I'm not sure how to denote the ctrl+m key combination in the event handler.
2. I'm getting a couple of errors on the code checker that I'm not sure how to fix myself.
3. I'm not sure how to make it so that the menu appears on ctrl+m, and stays there until ctrl+m is pressed again (a toggle switch).

I'm still learning how Javascript works.

Here's the link to the progress I've made so far: http://jsfiddle.net/nrz4Z/

Answer 1

In your example, you're binding the mousemove handler inside the keypress handler. You need to do them separately:

var mouseX;
var mouseY;
$(document).ready(function () {

    $(document).mousemove(function (e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
    });

    $(document).keypress(function (event) {
        if (event.which == 109) {
            $('#examples').css({
                'top': mouseY,
                'left': mouseX
            }).fadeIn('slow');
        };
    });
});

That should allow you to get the position at which to show the menu.