Skip to content

Instantly share code, notes, and snippets.

@kerin
Created November 21, 2012 11:33
Show Gist options
  • Save kerin/4124447 to your computer and use it in GitHub Desktop.
Save kerin/4124447 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<table id="keypad">
<tr>
<td><button id="key-1">1</button></td>
<td><button id="key-2">2</button></td>
<td><button id="key-3">3</button></td>
</tr>
<tr>
<td><button id="key-4">4</button></td>
<td><button id="key-5">5</button></td>
<td><button id="key-6">6</button></td>
</tr>
<tr>
<td><button id="key-7">7</button></td>
<td><button id="key-8">8</button></td>
<td><button id="key-9">9</button></td>
</tr>
<tr>
<td><button id="key-asterisk">*</button></td>
<td><button id="key-0">0</button></td>
<td><button id="key-hash">#</button></td>
</tr>
</table>
<script>
var navmap = {
'#key-1': {
'right': '#key-2',
'down': '#key-4'
},
'#key-2': {
'left': '#key-1',
'right': '#key-3',
'down': '#key-5'
},
'#key-3': {
'left': '#key-2',
'right': '#key-4',
'down': '#key-6'
},
'#key-4': {
'left': '#key-3',
'right': '#key-5',
'up': '#key-1',
'down': '#key-7'
},
'#key-5': {
'left': '#key-4',
'right': '#key-6',
'up': '#key-2',
'down': '#key-8'
},
'#key-6': {
'left': '#key-5',
'right': '#key-7',
'up': '#key-3',
'down': '#key-9'
},
'#key-7': {
'left': '#key-6',
'right': '#key-8',
'up': '#key-4',
'down': '#key-asterisk'
},
'#key-8': {
'left': '#key-7',
'right': '#key-9',
'up': '#key-5',
'down': '#key-0'
},
'#key-9': {
'left': '#key-8',
'right': '#key-asterisk',
'up': '#key-6',
'down': '#key-hash'
},
'#key-asterisk': {
'left': '#key-9',
'right': '#key-0',
'up': '#key-7'
},
'#key-0': {
'left': '#key-asterisk',
'right': '#key-hash',
'up': '#key-8'
},
'#key-hash': {
'left': '#key-0',
'up': '#key-9'
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment