JQuery - Deselect/ Click Off an attribute

Question

I'm having a problem. In chrome this works absolutely perfect. However, in browsers such as Firefox and internet explorer it does not. When clicked onto the game, it is then 'Selected' onto that attribute, and does not listen to my key listeners. Here is a example of my site and what it does -> Please view it first on chrome then on firefox, but make sure you have clicked onto the game attribute. When you press 'T' on the keyboard, it should overlay the item with text. http://imdoingwork.com/games/ageofwar.php . Here is a JS fiddle of some of the code I am using -> http://jsfiddle.net/4fZCR/ .

I think I need a way to 'Unselect or click off' the game window in order for the key listener to work, however I have no idea how to do that. If you have any ideas, or a better approach to the one I am taking please let me know. If this was unclear, I apologize as I am new to JQuery. Thanks for any suggestions! Toby.

Answer 1

You are looking for the .blur() function. This will deselect an element after it was selected(by clicking or by using the TAB key).

As you want to prevent that clicking on the game selects it, you can add a handler that triggers when the game is clicked:

$('embed').click(function(){
  $(this).blur();
});

Answer 2

html

<div class="red">
     <embed id="fitvid777405" type="application/x-shockwave-flash" src="http://imdoingwork.com/games/ageofwarupdate1MzYx.swf"></embed>
</div>
<div class="blue hidden">
     <h1>WELCOME!</h1>
</div>

css

body
{
    margin: 0;
}
div.blue
{
    background: blue;
}

div
{
    position: absolute;
}

jquery

$(document).ready(function(){
$('body').keypress(function (e){  
    var key = e.keyCode;
    if((key==116||key==84) && ($('.red:visible').length))
    {
        $('.red').css('display', "none");
        $('.blue').css('display', "block");
    }
    else{
        $('.red').css('display', "block");
        $('.blue').css('display', "none");
        }
});  
});