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.html, question.mark.css, and 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 -->
Within each <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 attachevent.js before question.mark.js – these can be found inside the ‘js’ folder in the downloaded archive file.