Jquery: How to hide a div when user clicks on anything BUT that div. No overlay

Question

I'm thinking .one would be of use in this situation? but i'm not sure how to do this...

I have a search box that appears when I click the search link. I want the user to be able to click on anything in that div without it closing, but when the user clicks on anything outside of that div, the div fades out.

score 6 · Accepted Answer · answered Apr 05 '11 at 06:27

6

Erm, here's an example that works on a div.

It uses a global var so I'm not proud, but it's fast to implement.

EDIT Updated my code, no global var now, it's still fast to implement.

answered Apr 05 '11 at 06:27

Khez

10,172
2
31
51

score 0 · Answer 2 · answered Apr 05 '11 at 06:25

Perhaps use the blur event on the search box's input for that task?

$('div.search').find('input').blur(function() {
    $('div.search').hide();
    $('a#search').show();
});

$('a#search').click(function() {
   var $a = $(this);
   $a.hide();
   $('div.search').show();
});

Something like this.

score 0 · Answer 3 · edited Apr 05 '11 at 09:16

You should bind the click event on the document/body:

var thediv = $("#thediv.youwant");

// sluit resultaten met document click - niet wanneer op sayt-container wordt geklikt
$(document).click(function(e){
  if(e.target.id != thediv.attr("id") && $(e.target).parents(thediv.selector).length == 0) 
  {
    thediv.hide();
  }
});

You'd have to tweak the $(e.target).parents(thediv.selector).length == 0) part a bit, it's still pretty specific for my case.

This piece of code checks (document onclick) if the target that is not is the div and not is an element within that div. And hides it.

but doesn't it run that check every single time the user clicks on the document? — android.nick, Apr 05 '11 at 13:03

score 0 · Answer 4 · answered Apr 05 '11 at 07:00

Use document as your click away. We also use stopPropagation() on mydiv so anything clicked that is not mydiv will make it fadeout.

$('button, .mydiv').click(function(e) {
    e.stopPropagation();
    $('.mydiv').slideDown();
})

$(document).click(function() {
    $('.mydiv').fadeOut();
})

See full example at http://jsfiddle.net/FWLF3/1/

score 0 · Answer 5 · answered Apr 05 '11 at 07:12

I think this is your desired solution:

<div id="hi" style="height:100px; width:100px;border:1px solid #ddd"></div>

$('*',document.body).click(function(e){
e.stopPropagation();
var dom = $(this).get(0);
if($.trim(dom.id) != 'hi')
    $('#hi').hide();})

thanks.

score 0 · Answer 6 · answered Apr 05 '11 at 08:46

Full answer demo is at: http://jsfiddle.net/leonxki/kSarp/

But here is a the jquery code snippet that mimics your requirements:

(function toggleSearchField() {
var $searchBoxDiv = $('#searchBoxContainer');

$(document).bind('click', function(evnt) {
    var $target = $(evnt.target);

    if ($target.is('#toggleSearchOn')) {
        $searchBoxDiv.fadeIn();
        return;
    } else if ($target.is('#searchBoxContainer') || $searchBoxDiv.has(evnt.target).length) {
        return;
    }

    $searchBoxDiv.hide();
});})();

I tried to make the code as descriptive as possible to avoid commenting it, but let me know if you need annotation.

Jquery: How to hide a div when user clicks on anything BUT that div. No overlay

6 Answers6

See full example at http://jsfiddle.net/FWLF3/1/

Linked