JQuery Keyboard
For some reason I got it into my head that I would like to create an on screen keyboard that mimicked my actions. It was also a good chance to get stuck into some more JQuery. There were three main parts to this code.
HMLT
1<div id="kbd"[>
2 <div>
3 <a class="96" href="#">`</a>
4 <a class="49" href="#">1</a>
5 <a class="50" href="#">2</a>
6 <a class="51" href="#">3</a>
7 <a class="52" href="#">4</a>
8 <a class="53" href="#">5</a>
9 <a class="54" href="#">6</a>
10 <a class="55" href="#">7</a>
11 <a class="56" href="#">8</a>
12 <a class="57" href="#">9</a>
13 <a class="48" href="#">0</a>
14 <a class="45" href="#">-</a>
15 <a class="61" href="#">=</a>
16 <a class="35" href="#">#</a>
17 <a class="8" href="#">←</a>
18 </div>
19 <div>
20 <a class="9" href="#" style="width:3.5em">TAB</a>
21 <a class="113 81" href="#">Q</a>
22 <a class="119 87" href="#">W</a>
23 <a class="101 69" href="#">E</a>
24 <a class="114 82" href="#">R</a>
25 <a class="116 84" href="#">T</a>
26 <a class="121 89" href="#">Y</a>
27 <a class="117 85" href="#">U</a>
28 <a class="105 73" href="#">I</a>
29 <a class="111 79" href="#">O</a>
30 <a class="112" href="#">P</a>
31 <a class="91 80" href="#">[</a>
32 <a class="93" href="#">]</a>
33 </div>
34 <div>
35 <a class="20" href="#" style="width:5em">CAPS</a>
36 <a class="65 97" href="#">A</a>
37 <a class="83 115" href="#">S</a>
38 <a class="68 100" href="#">D</a>
39 <a class="70 102" href="#">F</a>
40 <a class="71 103" href="#">G</a>
41 <a class="72 104" href="#">H</a>
42 <a class="74 106" href="#">J</a>
43 <a class="75 107" href="#">K</a>
44 <a class="76 108" href="#">L</a>
45 <a class="59" href="#">;</a>
46 <a class="39" href="#">'</a>
47 <a href="#" class="e 13">ENTER<span></span></a>
48 </div>
49 <div>
50 <a href="#" class="s"> </a>
51 <a class="92" href="#">\</a>
52 <a class="90 112" href="#">Z</a>
53 <a class="88 120" href="#">X</a>
54 <a class="67 99" href="#">C</a>
55 <a class="86 118" href="#">V</a>
56 <a class="66 98" href="#">B</a>
57 <a class="78 110" href="#">N</a>
58 <a class="77 109" href="#">M</a>
59 <a class="44" href="#">,</a>
60 <a class="46" href="#">.</a>
61 <a class="47" href="#">/</a>
62 <a href="#" class="s"> </a>
63 </div>
64 <div id="b">
65 <a class="" href="#"> </a>
66 <a class="" href="#"> </a>
67 <a class="" href="#"> </a>
68 <a class="32" href="#" style="width:16.3em">SPACE</a>
69 <a class="" href="#"> </a>
70 <a class="" href="#"> </a>
71 <a class="" href="#"> </a>
72 </div>
73 </div>
CSS
2 <div>
3 <a class="96" href="#">`</a>
4 <a class="49" href="#">1</a>
5 <a class="50" href="#">2</a>
6 <a class="51" href="#">3</a>
7 <a class="52" href="#">4</a>
8 <a class="53" href="#">5</a>
9 <a class="54" href="#">6</a>
10 <a class="55" href="#">7</a>
11 <a class="56" href="#">8</a>
12 <a class="57" href="#">9</a>
13 <a class="48" href="#">0</a>
14 <a class="45" href="#">-</a>
15 <a class="61" href="#">=</a>
16 <a class="35" href="#">#</a>
17 <a class="8" href="#">←</a>
18 </div>
19 <div>
20 <a class="9" href="#" style="width:3.5em">TAB</a>
21 <a class="113 81" href="#">Q</a>
22 <a class="119 87" href="#">W</a>
23 <a class="101 69" href="#">E</a>
24 <a class="114 82" href="#">R</a>
25 <a class="116 84" href="#">T</a>
26 <a class="121 89" href="#">Y</a>
27 <a class="117 85" href="#">U</a>
28 <a class="105 73" href="#">I</a>
29 <a class="111 79" href="#">O</a>
30 <a class="112" href="#">P</a>
31 <a class="91 80" href="#">[</a>
32 <a class="93" href="#">]</a>
33 </div>
34 <div>
35 <a class="20" href="#" style="width:5em">CAPS</a>
36 <a class="65 97" href="#">A</a>
37 <a class="83 115" href="#">S</a>
38 <a class="68 100" href="#">D</a>
39 <a class="70 102" href="#">F</a>
40 <a class="71 103" href="#">G</a>
41 <a class="72 104" href="#">H</a>
42 <a class="74 106" href="#">J</a>
43 <a class="75 107" href="#">K</a>
44 <a class="76 108" href="#">L</a>
45 <a class="59" href="#">;</a>
46 <a class="39" href="#">'</a>
47 <a href="#" class="e 13">ENTER<span></span></a>
48 </div>
49 <div>
50 <a href="#" class="s"> </a>
51 <a class="92" href="#">\</a>
52 <a class="90 112" href="#">Z</a>
53 <a class="88 120" href="#">X</a>
54 <a class="67 99" href="#">C</a>
55 <a class="86 118" href="#">V</a>
56 <a class="66 98" href="#">B</a>
57 <a class="78 110" href="#">N</a>
58 <a class="77 109" href="#">M</a>
59 <a class="44" href="#">,</a>
60 <a class="46" href="#">.</a>
61 <a class="47" href="#">/</a>
62 <a href="#" class="s"> </a>
63 </div>
64 <div id="b">
65 <a class="" href="#"> </a>
66 <a class="" href="#"> </a>
67 <a class="" href="#"> </a>
68 <a class="32" href="#" style="width:16.3em">SPACE</a>
69 <a class="" href="#"> </a>
70 <a class="" href="#"> </a>
71 <a class="" href="#"> </a>
72 </div>
73 </div>
1<style type="text/css" media="screen" title="default">
2 body {font:75% verdana,arial,helvetica,sans-serif}
3 #kbd,a,span {background:#f4efe3;border-style:solid;border-color:#fff #000;border-width:0.1em 0.2em 0.4em;padding:1em}
4 #kbd,a {float:left}
5 a {display:block;text-align:center;margin:0.25em;width:2em;padding:0.2em;text-decoration:none;color:#000}
6 a:hover {border-width:0.3em 0.2em 0.2em}
7 a.hoverMe {border-width:0.3em 0.2em 0.2em}
8 div {clear:both}
9 #b a {width:4em}
10 .s {width:5.2em}
11 a.b {border:0;width:1.3em}
12 .e {position:relative;width:5.4em}
13 .e span {position:absolute;border-bottom:0;width:1.9em;height:0.65em; right:-0.2em;top:-2.7em;_top:-3.6em;_height:1.5em}
14 </style>
2 body {font:75% verdana,arial,helvetica,sans-serif}
3 #kbd,a,span {background:#f4efe3;border-style:solid;border-color:#fff #000;border-width:0.1em 0.2em 0.4em;padding:1em}
4 #kbd,a {float:left}
5 a {display:block;text-align:center;margin:0.25em;width:2em;padding:0.2em;text-decoration:none;color:#000}
6 a:hover {border-width:0.3em 0.2em 0.2em}
7 a.hoverMe {border-width:0.3em 0.2em 0.2em}
8 div {clear:both}
9 #b a {width:4em}
10 .s {width:5.2em}
11 a.b {border:0;width:1.3em}
12 .e {position:relative;width:5.4em}
13 .e span {position:absolute;border-bottom:0;width:1.9em;height:0.65em; right:-0.2em;top:-2.7em;_top:-3.6em;_height:1.5em}
14 </style>
JQuery
1$(document).ready(function(){
2 $(document).keypress(function(e){
3 var key = e.charCode || e.keyCode || 0;
4 if ($('a').hasClass(key))
5 $('a.'+key).addClass('hoverMe').animate({opacity: 1.0}, 200, function() {
6 $('a.'+key).removeClass('hoverMe');
7 });
8 });
9 });
First I set a keypress function on the document. This fires whenever a key is pressed. I then set the variable 'key' as the charCode character of the pressed key. Each key on the keyboard has their charCode character has a class so from here it's easy to add the 'hoverMe' class to the required link and then remove it shortly after giving us the keyPress effect. You can view the demo here The final effect works quite well I think although i'm sure I'll never get to use it anywhere.
2 $(document).keypress(function(e){
3 var key = e.charCode || e.keyCode || 0;
4 if ($('a').hasClass(key))
5 $('a.'+key).addClass('hoverMe').animate({opacity: 1.0}, 200, function() {
6 $('a.'+key).removeClass('hoverMe');
7 });
8 });
9 });
TweetBacks
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]