If you use Gmail or Twitter, or any web application that supports keyboard shortcuts, you should be able to see a menu of shortcut keys when you hit the ? (question mark) key on the keyboard. If you’d like such a functionality on your site or app, QuestionMark.js is your answer.
QuestionMark.js is a small script (2KB minified and gzip’d) that uses AJAX to display a multi-column layout of shortcut key definitions in a modal window. The modal is removed when the ESC key is pressed or the user clicks behind the modal.
How to Use
To make it work, download and upload
question.mark.js files to a directory on your server. Then link the CSS file in the <head> and run the script on page load (at the bottom’s good too!).
To customize, edit the
question.mark.html file to include your own keyboard shortcuts. A new column is created for each
<ul> included with a class of
help-list. If you want a single column, use a single
<ul>. If you have only one column of keyboard shortcuts, then you should remove the
onwindowresize section of code.
<ul class="help-list"> <li class="help-key-unit"> <kbd class="help-key"><span>space</span></kbd> <span class="help-key-def">Page down</span> </li> <li class="help-key-unit"> <kbd class="help-key"><span>p</span></kbd> <span class="help-key-def">Print</span> </li> </ul><!-- .help-list -->
<ul> a single key/definition combo should be there in
<li>, within which there is more markup. Edit the text to customize for your own shortcut key needs.
This script works in all modern browsers and IE8+. No IE6/7 support. If you want IE8 support, include
question.mark.js – these can be found inside the ‘js’ folder in the downloaded archive file.