QuestionMark.js — Shortcut Keys Displayed with a Shortcut Key

QuestionMark.jsA couple of months ago I saw a Google+ post by Robert Nyman referring to the menu of shortcut keys that appears when you hit the ? key on the keyboard in certain web apps.

Try it: Go to Twitter.com, GitHub.com, or Gmail, and you’ll see each of those apps will trigger a modal window of shortcut key definitions when you hit the question mark key.

I think this should be the standard way for all websits/apps. A modal window of keyboard shortcuts is just one way to do that.

So over the past 3 or 4 days I hacked together QuestionMark.js. It’s a small script that uses Ajax to display a multi-column layout of shortcut key definitions in a modal window.

All the code, info, and demos you’ll need are at the links below:

You’ll also find a version on CodePen, but that one doesn’t use Ajax; the modal content is in the HTML panel. I have no idea if CodePen can do Ajax, so that’s the best I have for fiddling, if anyone wants to improve it in any way. As seen in the comments, Chris Coyier has forked my version and provided instructions to make it work with Ajax. I’ve done the same with my version, so you can fiddle with it in CodePen with the Ajax feature working.

QuestionMark.js

To make it work, just customize the question.mark.html page to match your app’s shortcut keys, and include the script and CSS file. As long as the markup is consistent with the example markup already included, you should have no problems. Athough it is (mostly) responsive, there is currently no way that I know of to trigger the modal on a touch device. That could be a future addition.

If you have any suggestions for improvements or notice any bugs, file an issue or comment here.

6 Responses

  1. Chris Coyier says:

    Hey Louis,

    Pretty rad plugin!

    Just to clear up how you might to Ajax on CodePen, I forked up your demo and made it work.

    Alterations:

    1) Removed the inline div with all the popup HTML in it
    2) Replaced JS with exactly the QuestionMark.js file from your repo
    3) Took the HTML from question.mark.html and made a Pen from it, then appended .html to the URL which gives you direct access to that HTML http://codepen.io/chriscoyier/pen/difoC.html
    4) Changed the Ajax open request to be a GET instead of POST
    5) Changed the Ajax open request to use the .html URL from #4
    6) Yay

  2. Thank’s a Lot,
    I got too much information about use of CSS from tour website.

    Regards,
    Bhuhsan Purushe.
    (bhushanpurushe@gmail.com)

  3. Frank says:

    Pretty nice plugin! Thanks for that!

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).