hiding div when clicked outside the div

Question

Please look at the code here : http://jsbin.com/esokic/10/edit#source

When I click on customer support a div is shown

What I want is when someone clicks out of the div, the div should hide, I tried a couple of things, but they don't seem to work..

$(document.body).one("click", function() {$(".cust-support-outer").hide();
});

Also:

$("body").click(function(e){
    if(e.target.className !== "csupport-drop")
    {
      $(".cust-support-outer").hide();
    }       
});

Would appreciate any help...

--Arnab

Answer 1

Try:

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.cust-support-outer').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.cust-support-outer').hide();
    });
});

Answer 2

Bind this to body

$("body").click(function() {
    if ($(this).attr("class") == "cust-support-outer") {
        // inside
    } else {
        // not inside
    }
});

Answer 3

Arnab I did this change in your js and worked

try this, use this js code

  $(function(){
    $(".csupport-drop").click(function(){
    $(".csupport-drop").addClass("active-drop-tab");
    $(".cust-support-outer").show();
      return false
    });

  $(document).bind("click", function(e) {  
    if(!$(e.target).hasClass("get-daily-alerts-outer")){
      $(".get-daily-alerts-outer").hide()
    }
  });

  $(".close").click(function(){$(".get-daily-alerts-outer").hide();
   return false
  });
  $(".get-deal-alerts").click(function(){$(".get-daily-alerts-outer").show();
   return false
  });
});

I just changed how you bind the "click" event to the document and pass the Event object to the function so you can check over what element the click event was fire.