CODEWITHSUNDEEP
javascriptjquery
user1011713
user1011713

Reputation: 279

Hiding a div on Mouse click out OR escape keyword press

I have the following code that hides my div (live search results) when mouse is clicked outside the div but I can't incorporate an OR function that does the same thing (hides div) when the escape key is pressed. Any help is much, much appreciated. Also, original code on mouse click out is from a different thread I got here on Stackoverflow. The or function is giving me a hard time.

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if $('#display').hide();
    });
});

Upvotes: 3

Views: 7885

Answers (4)

Jeremy D
Jeremy D

Reputation: 4855

Here is the jsfiddle hiding a div on mouseout and ESC key press : http://jsfiddle.net/jrm2k6/q2kNX/

Of course there is probably some stuff to do in the way to adapt it as your own source code..

Upvotes: 0

adeneo
adeneo

Reputation: 318182

$(document).ready(function() {
    $(document).on('mouseup keyup', function(e){ 
        var e = e || event,
         code = (e.keyCode ? e.keyCode : e.which),
       target = e.srcElement || e.target;

        if (target.className != 'form_content' || code==27) {
            $('#display').hide();
        }
    });
});

Upvotes: 0

Drahkar
Drahkar

Reputation: 1671

Basically you need to monitor for the KeyCode and act based off it:

$(document).keyup(function(e) {
  if (e.keyCode == 27) { $('#display').hide() }   // esc
});

Upvotes: 1

Fabian
Fabian

Reputation: 3495

This hides #display on pressing escape:

$(document).keyup(function(event) {
    if(event.which === 27) {
        $('#display').hide();
    }
});

Example: http://jsfiddle.net/nsufH/

You could also try to use window instead of document:

$(window).keyup(function(event) {
    if(event.which === 27) {
        $('#display').hide();
    }
});

Or try to use live:

$(document).live('keyup', function(event){
    if(event.which === 27) {
        $('#display').hide();
    }
});

Upvotes: 5

Related Questions