jQuery: Catch Keyboard Events

18th June

Lot of jQuery projects relies on keyboard/mouse event like pressing “p” for previous and “n” for next also using the arrows.

Because this is important, I have managed a code to get the keyboard character on 3 events:
– Keypress
– Keyup
– Keydown

I have created a function to return the key as below:

function getKey(key){
if ( key == null ) {
keycode = event.keyCode; // To Mozilla
} else {
keycode = key.keyCode;
}
// Return the key in lower case form
return String.fromCharCode(keycode).toLowerCase();
}

Now let’s use the events:

/*Keypress*/
$(document).keypress(function (eh){
alert(“Keypress: The key is: “+getKey(eh));
});

/*Keyup*/
$(document).keyup(function (eh){
alert(“Keyup: The key is: “+getKey(eh));
});

/*keydown*/
$(document).keydown(function (eh){
alert(“Keydown: The key is: “+getKey(eh));
});

To see an exaple of this code, please check the … Read More »


jQuery Image Map

Posted by Alaa Badran in Uncategorized. 10 comments

3rd June

Hi reader,
Today i have experienced something new with images.
I created HTML page contains image. This image was mapped by using <MAP tag.

Actually,
You can’t find these areas when are browsing this page.. Because these areas (dimensions) are hidden and have nothing to be identified.

So, I was looking for way to identify these areas with something till i had an idea of adding borders or creating a floating DIV with 0.3 opacity to tell the visitor that you are pointing to this area.