My Portal Project

Many applications we use every day us the F1 key to access the online help for that application. Many applications provide methods to override the default help prompt with your own, including browsers. So whay not provide our users with online help in a consistent method? Here is a (so far) cross browser javascript that will override the default F1 keypress, to display your own online help.

It took some tweaking to get it to work in IE6, IE7, and Firefox 1.5, but the results work well, and can be applied anywhere you need to provide hotkeys to your users. Just a few notes:

The following function is required for Internet Explorer since it prevents the help window from appearing. If you do not include this, whatever function you call when the user presses F1, will happen at the same time that the Help window pops up.

document.onhelp=function(){
     return false;
}

The following is the meat of the function and catches all the possible key event combinations to make it all happen.

document.onkeydown = function( evt ){
        if ( evt == null ){
            evt = event;
        }
        if ( testKeyCode( evt, 112 ) ) { // F1 key
            toggleHelp();
        }
        if(testKeyCode(evt,27)){ // ESC key
            sampleFunction();
        }
        if(testKeyCode(evt,117)){ // F6 key
            anotherSampleFunction();
        }    
        return false;	
    }
    function testKeyCode( evt, intKeyCode ){
        if ( evt.keyCode ){
            return evt.keyCode == intKeyCode;
        }else{
        	alert(evt.which);
            return evt.which == intKeyCode;
        }
    }</script>

There is a sample page here, which uses a YAHOO YUI animation effect to display the help, but you can use any method you so desire. As usual, let me know which browsers/OS this does not work on.

Leave a Reply