3

I have a div tag which includes input controls. This div is opened when the user clicks on a menu item. I want to hide this tag when the click is outside that div area.

Currently I am able to hide the div when clicking outside it, but my div hides when I click any of the input controls that are in the div. How can I solve this?

My code is:

$(document).click(function (e) {
  var elem = $(e.target).attr('id');
  console.log(e.target);

  if (elem !== 'btnLogin') {
    // if (elem != 'TxtUserName' && elem != 'TxtPassword')
    HideLoginDetails();
  }

  if (elem !== 'hpUseFul') {
    // if(elem !== 'y')
  }
});
Danil Speransky
  • 29,891
  • 5
  • 68
  • 79
deacons
  • 303
  • 1
  • 4
  • 9
  • I don't want to use hover.I want to mange this by click Only – deacons Sep 19 '12 at 05:10
  • why not use the event `focus`? and use its counter-part `blur` when you dont have the cursor on your elements? look into how jQuery use uses a `delegate` to focus on elements. – voigtan Sep 19 '12 at 05:15

3 Answers3

1
jQuery(document).ready(function()
{
    $('the div you want').hover(function(){ 
        mouse_inside=true; 
    }, function(){ 
        mouse_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_inside) $('the div you want').hide();
    });
});

Also check "Use jQuery to hide a DIV when the user clicks outside of it".

Community
  • 1
  • 1
NullPoiиteя
  • 56,591
  • 22
  • 125
  • 143
1

Demo: http://jsfiddle.net/3fbpA/

var aboveDiv = false;

$('#yourDiv').click(function () { 
  aboveDiv = true;
});

$(document).click(function () { 
  if (!aboveDiv) $('#yourDiv').hide();
  aboveDiv = false;
});
Danil Speransky
  • 29,891
  • 5
  • 68
  • 79
  • my div is open when click on menu link.So when I click on that link document.click is called and my div is not visible its always in hide state. – deacons Sep 19 '12 at 05:27
  • I don't know how to do bubling – deacons Sep 19 '12 at 05:35
  • my div clicked event not called and needToHide remains true so my div hide – deacons Sep 19 '12 at 05:49
  • I have used div in asp.net update panel Control and that div have two input text box control.So for this reason div Click is not called? – deacons Sep 19 '12 at 06:13
0

I have done complete bins for above issue. you can check demo link here...

Demo http://codebins.com/bin/4ldqp71

HTML

<div id="loginDialog">
  <div class="field">
    <label>
      User Name: 
    </label>

    <span class="input">
      <input type="text" value="" id="txtuser" size="15"/>

    </span>
  </div>
  <div class="field">
    <label>
      Password: 
    </label>

    <span class="input">
      <input type="password" value="" id="txtpassword" size="15"/>

    </span>
  </div>
  <div class="field">
    <input type="button" id="btn_ok" value="Login" />
  </div>
</div>
<div>
  <a href="javascript:void(0);" id="btnLogin">
    Login
  </a>
  <a href="javascript:void(0);" id="btnMenu1">
    Menu1
  </a>
  <a href="javascript:void(0);" id="btnMenu2">
    Menu2
  </a>
</div>

JQuery

$(function() {
    $("#btnLogin").click(function() {
        $("#loginDialog").show(500);
    });
    $(document).click(function(e) {
        e.preventDefault();
        var elem = $(e.target).attr('id');
        if ($(e.target).parents("#loginDialog").length) {
            $("#loginDialog").show();
        } else {
            if ($(e.target).attr('id') !== "btnLogin") {
                $("#loginDialog").hide(300);
            }
        }
    });
});

CSS

#loginDialog{
  border:1px solid #333;
  padding:4px;
  background:#2A2A2A;
  width:250px;
  color:#dfdfdf;
  display:none;
}
#loginDialog input{
  border:1px solid #efefef;
}
#loginDialog input[type=button]{
  background:#ababab;
}
#loginDialog input[type=button]:hover{
  background:#cfcfcf;
}
#loginDialog .field{
  text-align:center;
  margin-bottom:5px;
}
#loginDialog label{
  display:inline-block;
  width:100px;
}
a{
  display:inline-block;
  margin-left:8px;
}

Demo http://codebins.com/bin/4ldqp71

gaurang171
  • 9,032
  • 4
  • 28
  • 30