CodeinWP CodeinWP

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 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:

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. You can also install it via npm:

npm install question-mark-js

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

5 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

    • 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. Frank says:

    Pretty nice plugin! Thanks for that!

  4. Sebastian says:

    Sadly it doesn’t work, if your keyboard isn’t set to US.

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