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 websites/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 tiny script that uses the Fetch API 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:
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. You can also install it via npm:
npm install question-mark-jsAs long as the markup is consistent with the example markup already included, you should have no problems. Although it is responsive, there is currently no way that I know of to trigger the modal on a touch device. I suppose you could add a separate button that displays on certain devices or screen sizes to trigger it.
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.
Thank’s a Lot,
I got too much information about use of CSS from tour website.
Regards,
Bhuhsan Purushe.
(bhushanpurushe@gmail.com)
Pretty nice plugin! Thanks for that!
Sadly it doesn’t work, if your keyboard isn’t set to US.