QuestionMark.js — Shortcut Keys Displayed with a Shortcut Key

on | 4 Comments

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.

Advertise Here

4 Responses

  1. 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

    • That’s awesome! I had a feeling there was a way to do Ajax on there, and I was going to ask you. Thanks so much for outlining the steps, that will come in handy for many I’m sure.

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

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

  3. 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. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.