Display Overlay of Keyboard Shortcuts in your Site like Gmail
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.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.