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.

I'm not sure how to denote the ctrl+m key combination in the event handler.
I'm getting a couple of errors on the code checker that I'm not sure how to fix myself.
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/

jsbin is a bit broken this month, try with jsFiddle – Roko C. Buljan Jul 31 '13 at 16:41 — Roko C. Buljan, Jul 31 '13 at 16:41
@RokoC.Buljan Thanks! I've edited the body accordingly. – ghmjohnson Jul 31 '13 at 17:19 — ghmjohnson, Jul 31 '13 at 17:19

score 1 · Accepted Answer · answered Jul 31 '13 at 16:53

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.

answered Jul 31 '13 at 16:53

Jason P

26,984
3
31
45

http://jsfiddle.net/s3mdJ/ I tried to get it to work in here, to no avail. I was wondering if maybe it needed a .show(); implemented before the .fadeIn();. Any ideas? – ghmjohnson Jul 31 '13 at 17:46
You had a syntax error and didn't have jquery included. I fixed those issues, and found something odd... Pressing "m" is causing `e.which` to be set to 109, and shift + m is 77. But.. here's a working fiddle: http://jsfiddle.net/js26s/ – Jason P Jul 31 '13 at 19:52

score 0 · Answer 2 · edited May 23 '17 at 10:25

Firstly the use of keypress is not a good idea - web is something that is on an unknowable amount of browsers and devices and plugins and you don't know what shortcuts are bound to especially ones using modifiers with a single key (in this case cmd+m or ctrl+m is an OS shortcut to minimise the window on many OSes. ctrl exists as cmd in os x and not at all on phones.)

To detect multiple key presses check here: Can jQuery .keypress() detect more than one key at the same time?

Next you can detect mouse movements and store them in a variable for use anywhere: How to get mouse position in jQuery without mouse-events?

Your menu should then be at the bottom of the DOM with only body as it's parent:

<nav>
  <p>My Menu</p>
<nav>
</body>

Your nav should have whatever styling it needs in the css, as well as:

nav {
  position: absolute;
  display: none;
  /*z-index: 700; nav is at bottom of dom so it will go above anything without a z-index but you may want it to go over other things */
}

When you have detected your key-presses you should do:

$('nav').css({top: mouseYCoord, left: mouseYCoord}).show();

Obviously give your menu a more useful name and don't select upon all 'nav' tags.

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

2 Answers2