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