4

I have a button, when it's clicked, shows a div with images(like an emoticon panel of a chat) if I click it again the div hides, but what I want to do is: If the div is already showed up and then I click any other thing of the page, I want to hide it. I tried this:

$("myBtn").click(function(){
    // show div
});

$(document).click(function(){
// hide div
});

When "myBtn" is clicked, the div shows up and hide automatically. How could I fix it ?

Thank you for your time.

Mollo
  • 723
  • 3
  • 7
  • 24
  • I tried catching the click events like this: $("div").click(function(){//} but it executes the code inside for every div element in the webpage. So it shows and hide the div – Mollo Mar 05 '13 at 22:00

5 Answers5

18

You could try the following:

$(document).on('click', function(evt) {
    if(!$(evt.target).is('#my-id')) {
        //Hide
    }
});

UPDATE

Just so you can have a full working set:

$('#mybutton').on('click', function(evt) {
    $('#mydiv').show();
    return false;//Returning false prevents the event from continuing up the chain
});
Kyle
  • 4,421
  • 22
  • 32
  • @chad and @Mathletics Thank you. `.on` should be used for all events. :) – Kyle Mar 05 '13 at 22:02
  • 1
    Out of curiosity, what is the difference between .on('click', ...) and .click(...) ? Is one preferred over the other? – Katie Kilian Mar 05 '13 at 22:09
  • 3
    @CharlieKilian `click` has always been sugar for `bind("click")`; on obviates all of them and includes the new simple delegation syntax of `.on(event, childSelector, callback)` – Evan Davis Mar 05 '13 at 22:13
  • +1 to @Mathletics for that explanation. For more information, here is the link to the jQuery site: http://api.jquery.com/on/ – Kyle Mar 05 '13 at 22:40
  • Useful explanation. Return false made my day ... Thank you. – Mollo Mar 06 '13 at 18:20
2

At the same time you show your original <div>, add a new <div> to your page that has a style/css set like this:

.ui-widget-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
}

Make sure the original <div> -- the one you want to be able to click on without closing it -- has a higher z-index, but everything else on the page has a lower z-index.

When you add the new div to your page, give it the .ui-widget-overlay class, and add a click handler to intercept clicks on that <div>. Adding the overlay div with the click handler looks like this:

$('<div class="ui-widget-overlay">')
    .click(function() {
        $('.ui-widget-overlay').remove();
        $('selector-for-original-div').hide();
    })
    .appendTo('body');

The upshot of all this: You have two divs. The first is what you want to display and allow users to click in without closing it, the second is an invisible div underneath the first taking up the entire browser window so that if the user clicks anywhere but the upper div, it intercepts the click event. Inside that click event, you remove the hidden div and hide the original.

Katie Kilian
  • 6,815
  • 5
  • 41
  • 64
1

updated

Assuming that you have a class 'active' to the element when it shows, it would be:

$('html').click(function(e){

  if(!$(e.target).attr("id") == "my-id") { 

  }

});
Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Bertrand
  • 388
  • 4
  • 13
  • Close, but really ugly when it doesn't need to be. – Chad Mar 05 '13 at 22:01
  • @Chad, thank you for your comment. How will you do it ? I will be happy to improve my code. – Bertrand Mar 05 '13 at 23:00
  • You cleaned up most of it, but you are binding to `'html'` which isn't "wrong" but convention is to bind to `document`. – Chad Mar 06 '13 at 12:39
  • Thank you, I learn 2 things the 'on' and the use of 'document' in this situation. Will fix my code. Cheers. B. – Bertrand Mar 06 '13 at 14:56
0
<script type="text/javascript">
  $('body').click(function() {
   if($("div").is(':visible')){
    $("div").hide();
   }
  });
</script>

the $("div") selector here should be your div that is either has id or class for example: if the <div class="class" id="id"> then $("div") will be changed to $("div.class") or $("div#id")

  • 1
    you may want to be more specific than `"div"` in the selector, especially as a generic example which OP is likely to use explicitly. – Evan Davis Mar 05 '13 at 21:59
  • Thanks @Mathletics I added explanation. –  Mar 05 '13 at 22:02
  • 1
    Don't ever use `$('div#id')` since that is over specifying and will actually make Sizzle unable to use `getElementById()` optimizations. – Chad Mar 05 '13 at 22:04
-1
<div class="slControlWrapper">
    <div class="slControlLabel">
        <asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
    </div>
    <div class="slControlSeparator">

    </div>
    <div class="slControlDropDown">

    </div>
     <div id="wndSL">
        This is the hidden content of my DIV Window
    </div>
    <div id="test">
    I am for test click on me
    </div>
</div>


 $('.slControlLabel, .slControlDropDown').bind('click',function(event){

   $('#wndSL').show(); 
 event.stopPropagation();
 });


$('html').click(function() {
   $('#wndSL').hide(); 
});


    #wndSL {

display:none;     background-color: blue;    height:500px;    width:590px;
}

Have a gander here:

http://jsfiddle.net/nCZmz/26/

Head
  • 548
  • 7
  • 26