Skip to content

Instantly share code, notes, and snippets.

@craigmdennis
Created June 14, 2011 16:28
Show Gist options
  • Save craigmdennis/1025269 to your computer and use it in GitHub Desktop.
Save craigmdennis/1025269 to your computer and use it in GitHub Desktop.
Keyboard Navigation Widget
#key-tip {
background:#EEE;
position:absolute;
top:50%;
left:50%;
margin-top:-62.5px;
margin-left:-119px;
height:125px;
width:138px;
}
#key-tip .close {
background:url("../images/close.png") no-repeat center center #D1D3D4;
display:block;
position:absolute;
right:0;
top:0;
height:17px;
padding:0;
text-indent:-9999px;
width:17px;
}
#key-tip a:hover,
#key-tip a:focus {
background-color:#FFF;
}
#key-tip .key {
background:#FFF;
color:#1E1E1E;
display:block;
height:25px;
line-height:24px;
margin:0;
padding:0;
position:absolute;
text-align:center;
text-decoration:none;
width:25px;
}
#key-tip span.key {
text-indent:-9999px;
}
#key-tip a:hover {
background:#FF5800;
color:#FFF;
text-decoration:none;
}
#key-tip .u {
top:20px;
left:50%;
margin-left:-12.5px;
}
#key-tip .d {
top:47px;
left:50%;
margin-left:-12.5px;
}
#key-tip .r {
top:47px;
right:0;
margin-right:29px;
}
#key-tip .l {
top:47px;
left:0;
margin-left:30px;
}
#key-tip h3 {
bottom:10px;
color:#1E1E1E;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
font-weight:normal;
left:10px;
letter-spacing:normal;
position:absolute;
text-align:center;
text-transform:uppercase;
width:118px;
}
<script type="text/javascript" src="keyboard.js"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
<div id="key-tip">
<a href="#" title="Close" class="close">Close</a>
<span class="key u"><strong>&uarr;</strong></span>
<a href="#" class="key r"><strong>&rarr;</strong></a>
<span class="key d"><strong>&darr;</strong></span>
<a href="#" class="key l"><strong>&larr;</strong></a>
<h3>Use yor <strong>L</strong> & <strong>R</strong> keyboard arrows</h3>
</div>
$('.close').click( function(){
$(this).parent().fadeOut();
});
$(document).keydown( function(e){
console.log('Key Pressed: '+e.keyCode);
if (e.keyCode == 39) {
$('#key-tip').find('.r').css({
'color' : '#FFF',
backgroundColor : '#FF5800'
});
// function r
}
if (e.keyCode == 37) {
$('#key-tip').find('.l').css({
'color' : '#FFF',
backgroundColor : '#FF5800'
});
// function l
}
if (e.keyCode == 38) {
$('#key-tip').find('.u').css({
'color' : '#FFF',
backgroundColor : '#FF5800'
});
// function u
}
if (e.keyCode == 40) {
$('#key-tip').find('.d').css({
'color' : '#FFF',
backgroundColor : '#FF5800'
});
// function d
}
});
$(document).keyup(function(e) {
$('#key-tip span').attr('style','');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment