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