VisualKeys a visual approach to keyboard shortcuts

It's a jQuery plugin that give users an alternative way to control web applications without (necessarily) using the mouse.

No need to remember every key to every shortcut. Visually displays a menu of shortcuts and a description.

Demo

Hit ctrl+space. A menu will appear at the bottom of this page.
Hit v to execute the "view source code" shortcut and see the code bellow.
That's it! You can configure any action to any key.
You can also alt+shift+v as a faster shortcut.
Try more shortcuts by pressing ctrl+space again.

+view source code for this demo

$.visualkeys({
    86 : {
        text : '<i>v</i><b>View source</b> code from demo',
        exec : function(){$('#example').slideToggle();}
    },
    83 : {
        text : '<i>s</i><b>Save</b> your current work',
        exec : function(){},
        hide : !$('#save').length
    },
    39 : {
        text : '<i>→</i>Align all text to the <b>right</b>',
        exec : function(){$('body').css('text-align','right')}
    },
    66 : {
        text : '<i>b</i>Change <b>background to black</b>',
        exec : function(){$('body').css('background','black')}
    },
    71 : {
        text : '<i>g</i><b>Go to Disney Land</b>',
        exec : function(k, i){ location.href='http://disney.com/'}
    },
    68 : {
        text : '<i>d</i><b>Download</b> VisualKeys',
        exec : function(){location.href=$('#download-link').attr('href')}
    }
});

Install

Add VisualKeys style and script to the <head> of your application. +view code

<link rel="jquery.visualkeys-1.0.css" />
<script src="jquery-1.4.2.min.js"></script>
<script src="jquery.visualkeys-1.0.min.js></script>

Create a VisualKeys configuration based on the actions you want to let your users execute using shortcuts. +view configuration parameters

$.visualkeys({
    // keycode of the letter user will press to activate the shortcut
    86 : { 
	
        // Text to display on menu. 
        // <i> for the shortcut letter and <b> for the fade out text
        text : '<i>v</i><b>View source</b> code from demo',
		
        // JavaScript code to be executed for this shortcut
        exec : function(){$('#example').slideToggle();},
		
        // Hide shortcuts based on context. Read "More..." section for details
        hide : !$('#example').length // this property is optional
    }
});

Add your VisualKeys configuration script to your application.

Download

Package: jquery.visualkeys-v.0.9.zip
Quick look at the source: jquery.visualkeys.js

More...

Change the appearance of the menu by editing visualkeys.css
Bind esc to a exec:function(). It'll be executed right away, not showing the menu.
The hide:value can be used to turn a shortcut visible/hidden based on a context. +How?

You can have your shortcuts menu list to show only shortcuts that can be executed on certain pages, and be hidden on others using the "hide : [true|false]" propertie.

If you pass an expression returning true to the hide property this shortcut will be hidden.

Example: hide : !$('#save').length

This shortcut will not be displayed on your shortcuts menu if an element with id="#save" is not present on this page. This can be useful if you have dynamic shortcuts that should be visible/hidden based on other elements on your page.
Open the menu and mouse click a shortcut. It'll be executed.
As an alternative to ctrl+space you can use f9 or shift+space to open the menu.
Unbind and remove VisualKeys: $.visualkeys('remove').

About

Author: Fernando M.A.d.S. <>

License: VisualKeys is distributed under the LGPL