Mixing
jQuery hide element when clicked anywhere on the page
I would like to know whether this is the correct way of hiding visible elements when clicked anywhere on the page.
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
The element (div, span etc) shouldn't disappear when click event occurs within the boundaries of the element.
jquery events event-bubbling
edited May 6 '16 at 11:16
Ayan
67111129
asked Apr 3 '09 at 15:31
FranekFranek
96531319
add a comment |
I would like to know whether this is the correct way of hiding visible elements when clicked anywhere on the page.
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
The element (div, span etc) shouldn't disappear when click event occurs within the boundaries of the element.
jquery events event-bubbling
edited May 6 '16 at 11:16
Ayan
67111129
asked Apr 3 '09 at 15:31
FranekFranek
96531319
add a comment |
I would like to know whether this is the correct way of hiding visible elements when clicked anywhere on the page.
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
The element (div, span etc) shouldn't disappear when click event occurs within the boundaries of the element.
jquery events event-bubbling
edited May 6 '16 at 11:16
Ayan
67111129
asked Apr 3 '09 at 15:31
FranekFranek
96531319
I would like to know whether this is the correct way of hiding visible elements when clicked anywhere on the page.
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
The element (div, span etc) shouldn't disappear when click event occurs within the boundaries of the element.
jquery events event-bubbling
jquery events event-bubbling
edited May 6 '16 at 11:16
Ayan
67111129
asked Apr 3 '09 at 15:31
FranekFranek
96531319
edited May 6 '16 at 11:16
Ayan
67111129
asked Apr 3 '09 at 15:31
FranekFranek
96531319
edited May 6 '16 at 11:16
Ayan
67111129
edited May 6 '16 at 11:16
Ayan
67111129
edited May 6 '16 at 11:16
Ayan
67111129
67111129
asked Apr 3 '09 at 15:31
FranekFranek
96531319
asked Apr 3 '09 at 15:31
FranekFranek
96531319
asked Apr 3 '09 at 15:31
FranekFranek
96531319
96531319
add a comment |
add a comment |
17 Answers
17
active
oldest
votes
if i understand you want to hide a div when you click anywhere but the div, and if you do click while over the div, then it should NOT close. you can do this:
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
This binds the click to the entire page, but if you click on the div in question it will cancel the click event.
answered Apr 3 '09 at 16:07
Jeremy B.Jeremy B.
7,97334052
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:14
1
no, you were referring to something the OP never even alluded to he made no mention of asp.net, and the wonderful ctl_... id naming philosophy. Other than that, HTML rules stated that ID's do not change, and since we're talking javascript, classes change.
– Jeremy B.
Apr 3 '09 at 16:18
12
I am not trying to be rude, but for people not using asp.net and who are new to html/javascript we don't want to confuse them.
– Jeremy B.
Apr 3 '09 at 16:45
6
(Ab)Usingreturn false;can bite you if you have something that needs to be clicked/submitted inside that div. Usee.stopPropagation();instead. See fuelyourcoding.com/jquery-events-stop-misusing-return-false
– Halil Özgür
Dec 28 '11 at 17:02
1
This works fine.. but When I click over the button which calls the popup, then popup comes and then again vanishes immediately. What to do for that as the document is taking two actions at a time. to call the popup on body click and to fadeOut the popup on bodyClick
– Veer Shrivastav
Jun 29 '13 at 17:43
|
show 6 more comments
Try this
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
I use class name instead of ID, because in asp.net you have to worry about the extra stuff .net attaches to the id
EDIT-
Since you added a another piece, it would work like this:
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
answered Apr 3 '09 at 15:39
TStamperTStamper
26.4k105870
you have it exactly opposite. You can add and remove classes from elements, Id's never change
– Jeremy B.
Apr 3 '09 at 16:02
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:13
read my comment, and read OP's more carefully.
– Jeremy B.
Apr 3 '09 at 16:19
just to make you happy, I changed the wording
– TStamper
Apr 3 '09 at 16:21
1
e.stopPropagation(); seems to be the trick.
– phirschybar
Mar 13 '10 at 10:52
add a comment |
As of jQuery 1.7 there's a new way to handle events. I thought I'd answer here just to demonstrate how I might go about doing this the "new" way. If you haven't, I recommend you read the jQuery docs for the "on" method.
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);
Here we're abusing jQuery's selectors and bubbling of events. Note that I make sure I clean the event handler up afterwards. You can automate this behaviour with $('.container').one (see: docs) but because we need to do conditionals within the handler that isn't applicable here.
answered May 30 '12 at 1:27
Ben TaylorBen Taylor
20123
1
So uh... this worked PERFECTLY for me in case anyone needs clarification. It is also the ONLY solution to have worked for my situation.
– Keyvan Sadralodabai
May 17 '16 at 22:48
Thank you! This works great!
– Susie
Jan 23 at 22:24
add a comment |
This following code example seems to work best for me. While you can use 'return false' that stops all handling of that event for the div or any of it's children. If you want to have controls on the pop-up div (a pop-up login form for example) you need to use event.stopPropogation().
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
add a comment |
Thanks, Thomas. I'm new to JS and I've been looking crazy for a solution to my problem. Yours helped.
I've used jquery to make a Login-box that slides down. For best user experience I desided to make the box disappear when user clicks somewhere but the box. I'm a little bit embarrassed over using about four hours fixing this. But hey, I'm new to JS.
Maybe my code can help someone out:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
answered Apr 21 '10 at 11:09
TommyTommy
6111
add a comment |
What you can also do is:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
If your target is not a div then hide the div by checking its length is equal to zero.
edited Mar 5 '14 at 9:34
agriboz
3,33622541
answered May 11 '13 at 15:06
Sandeep PalSandeep Pal
1,5271112
Rock. This solution just worked as expected for me. Thanks a bunch!
– Bullyen
Aug 15 '14 at 20:56
add a comment |
I did the below. Thought of sharing so someone else could also benefit.
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});
Let me know if I can help someone on this.
edited Nov 19 '15 at 15:27
kero
10k53242
answered May 21 '12 at 15:32
foxybaggafoxybagga
3,63422730
Great code and doesn't execute ifdiv#newButtonDivisn't clicked. I would recommend you remove the second.click()on line 4 (if you do this, remember to remove the closing braces, parenthesis and semi-colon - line 9).
– AUllah1
Jul 21 '16 at 10:13
add a comment |
Another way of hiding the container div when a click happens in a not children element;
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
});
answered Sep 17 '14 at 18:46
Renato GamaRenato Gama
10.6k74375
add a comment |
$(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ( $(e.target).closest('#suggest_input').length ) {
$(".suggest_div").show();
}else if ( ! $(e.target).closest('.suggest_container').length ) {
$('.suggest_div').hide();
}
});
Here #suggest_input in is the name of textbox and .suggest_container is the ul class name and .suggest_div is the main div element for my auto-suggest.
this code is for hiding the div elements by clicking any where in the screen.
Before doing every thing please understand the code and copy it...
answered May 28 '15 at 5:53
Shaikh ArbaazShaikh Arbaaz
1043
add a comment |
Try this:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});
answered Aug 16 '15 at 6:14
Nalan MadheswaranNalan Madheswaran
4,94213123
add a comment |
Try this, it's working perfect for me.
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});
edited Aug 22 '13 at 6:44
Flexo♦
69.8k21146230
answered Aug 11 '13 at 6:45
Hassan SardarHassan Sardar
1,804143877
add a comment |
$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});
but you need to keep in mind these things as well. http://css-tricks.com/dangers-stopping-event-propagation/
answered Feb 3 '15 at 10:49
Muhammad TahirMuhammad Tahir
1,2621518
add a comment |
Here is a working CSS/small JS solution based on the answer of Sandeep Pal:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});
Try it out by clicking the checkbox and then outside of the menu:
https://jsfiddle.net/qo90txr8/
answered Jul 28 '15 at 10:08
BjoergBjoerg
98911024
add a comment |
This doesn't work - it hides the .myDIV when you click inside of it.
$('.openDiv').click(function(e) {
$('.myDiv').show();
e.stopPropagation();
})
$(document).click(function(){
$('.myDiv').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>
answered Apr 3 '09 at 15:58
FranekFranek
96531319
so you want the div to showto show when the link is placed,then take that e.stopPropa.. out of there and follow my option
– TStamper
Apr 3 '09 at 16:16
add a comment |
Just 2 small improvements to the above suggestions:
- unbind the document.click when done
stop propagation on the event that triggered this, assuming its a click
jQuery(thelink).click(function(e){
jQuery(thepop).show();
// bind the hide controls
var jpop=jQuery(thepop);
jQuery(document).bind("click.hidethepop", function() {
jpop.hide();
// unbind the hide controls
jQuery(document).unbind("click.hidethepop");
});
// dont close thepop when you click on thepop
jQuery(thepop).click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
answered Feb 13 '12 at 16:21
commonpikecommonpike
5,35613949
add a comment |
$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>answered Oct 15 '17 at 10:07
Ehsan KHANEhsan KHAN
515
add a comment |
$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});
answered Jan 13 '17 at 15:35
mohammad gitipasandmohammad gitipasand
656
Identical answer was already below. About 2 Yr. late.
– Illdapt
Dec 28 '17 at 18:14
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f714471%2fjquery-hide-element-when-clicked-anywhere-on-the-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
17 Answers
17
active
oldest
votes
17 Answers
17
active
oldest
votes
active
oldest
votes
active
oldest
votes
if i understand you want to hide a div when you click anywhere but the div, and if you do click while over the div, then it should NOT close. you can do this:
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
This binds the click to the entire page, but if you click on the div in question it will cancel the click event.
answered Apr 3 '09 at 16:07
Jeremy B.Jeremy B.
7,97334052
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:14
1
no, you were referring to something the OP never even alluded to he made no mention of asp.net, and the wonderful ctl_... id naming philosophy. Other than that, HTML rules stated that ID's do not change, and since we're talking javascript, classes change.
– Jeremy B.
Apr 3 '09 at 16:18
12
I am not trying to be rude, but for people not using asp.net and who are new to html/javascript we don't want to confuse them.
– Jeremy B.
Apr 3 '09 at 16:45
6
(Ab)Usingreturn false;can bite you if you have something that needs to be clicked/submitted inside that div. Usee.stopPropagation();instead. See fuelyourcoding.com/jquery-events-stop-misusing-return-false
– Halil Özgür
Dec 28 '11 at 17:02
1
This works fine.. but When I click over the button which calls the popup, then popup comes and then again vanishes immediately. What to do for that as the document is taking two actions at a time. to call the popup on body click and to fadeOut the popup on bodyClick
– Veer Shrivastav
Jun 29 '13 at 17:43
|
show 6 more comments
if i understand you want to hide a div when you click anywhere but the div, and if you do click while over the div, then it should NOT close. you can do this:
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
This binds the click to the entire page, but if you click on the div in question it will cancel the click event.
answered Apr 3 '09 at 16:07
Jeremy B.Jeremy B.
7,97334052
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:14
1
no, you were referring to something the OP never even alluded to he made no mention of asp.net, and the wonderful ctl_... id naming philosophy. Other than that, HTML rules stated that ID's do not change, and since we're talking javascript, classes change.
– Jeremy B.
Apr 3 '09 at 16:18
12
I am not trying to be rude, but for people not using asp.net and who are new to html/javascript we don't want to confuse them.
– Jeremy B.
Apr 3 '09 at 16:45
6
(Ab)Usingreturn false;can bite you if you have something that needs to be clicked/submitted inside that div. Usee.stopPropagation();instead. See fuelyourcoding.com/jquery-events-stop-misusing-return-false
– Halil Özgür
Dec 28 '11 at 17:02
1
This works fine.. but When I click over the button which calls the popup, then popup comes and then again vanishes immediately. What to do for that as the document is taking two actions at a time. to call the popup on body click and to fadeOut the popup on bodyClick
– Veer Shrivastav
Jun 29 '13 at 17:43
|
show 6 more comments
if i understand you want to hide a div when you click anywhere but the div, and if you do click while over the div, then it should NOT close. you can do this:
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
This binds the click to the entire page, but if you click on the div in question it will cancel the click event.
answered Apr 3 '09 at 16:07
Jeremy B.Jeremy B.
7,97334052
if i understand you want to hide a div when you click anywhere but the div, and if you do click while over the div, then it should NOT close. you can do this:
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
This binds the click to the entire page, but if you click on the div in question it will cancel the click event.
answered Apr 3 '09 at 16:07
Jeremy B.Jeremy B.
7,97334052
edited Feb 27 '12 at 14:09
answered Apr 3 '09 at 16:07
Jeremy B.Jeremy B.
7,97334052
answered Apr 3 '09 at 16:07
Jeremy B.Jeremy B.
7,97334052
answered Apr 3 '09 at 16:07
Jeremy B.Jeremy B.
7,97334052
7,97334052
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:14
1
no, you were referring to something the OP never even alluded to he made no mention of asp.net, and the wonderful ctl_... id naming philosophy. Other than that, HTML rules stated that ID's do not change, and since we're talking javascript, classes change.
– Jeremy B.
Apr 3 '09 at 16:18
12
I am not trying to be rude, but for people not using asp.net and who are new to html/javascript we don't want to confuse them.
– Jeremy B.
Apr 3 '09 at 16:45
6
(Ab)Usingreturn false;can bite you if you have something that needs to be clicked/submitted inside that div. Usee.stopPropagation();instead. See fuelyourcoding.com/jquery-events-stop-misusing-return-false
– Halil Özgür
Dec 28 '11 at 17:02
1
This works fine.. but When I click over the button which calls the popup, then popup comes and then again vanishes immediately. What to do for that as the document is taking two actions at a time. to call the popup on body click and to fadeOut the popup on bodyClick
– Veer Shrivastav
Jun 29 '13 at 17:43
|
show 6 more comments
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:14
1
no, you were referring to something the OP never even alluded to he made no mention of asp.net, and the wonderful ctl_... id naming philosophy. Other than that, HTML rules stated that ID's do not change, and since we're talking javascript, classes change.
– Jeremy B.
Apr 3 '09 at 16:18
12
I am not trying to be rude, but for people not using asp.net and who are new to html/javascript we don't want to confuse them.
– Jeremy B.
Apr 3 '09 at 16:45
6
(Ab)Usingreturn false;can bite you if you have something that needs to be clicked/submitted inside that div. Usee.stopPropagation();instead. See fuelyourcoding.com/jquery-events-stop-misusing-return-false
– Halil Özgür
Dec 28 '11 at 17:02
1
This works fine.. but When I click over the button which calls the popup, then popup comes and then again vanishes immediately. What to do for that as the document is taking two actions at a time. to call the popup on body click and to fadeOut the popup on bodyClick
– Veer Shrivastav
Jun 29 '13 at 17:43
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:14
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:14
1
1
no, you were referring to something the OP never even alluded to he made no mention of asp.net, and the wonderful ctl_... id naming philosophy. Other than that, HTML rules stated that ID's do not change, and since we're talking javascript, classes change.
– Jeremy B.
Apr 3 '09 at 16:18
no, you were referring to something the OP never even alluded to he made no mention of asp.net, and the wonderful ctl_... id naming philosophy. Other than that, HTML rules stated that ID's do not change, and since we're talking javascript, classes change.
– Jeremy B.
Apr 3 '09 at 16:18
12
12
I am not trying to be rude, but for people not using asp.net and who are new to html/javascript we don't want to confuse them.
– Jeremy B.
Apr 3 '09 at 16:45
I am not trying to be rude, but for people not using asp.net and who are new to html/javascript we don't want to confuse them.
– Jeremy B.
Apr 3 '09 at 16:45
6
6
(Ab)Using
return false; can bite you if you have something that needs to be clicked/submitted inside that div. Use e.stopPropagation(); instead. See fuelyourcoding.com/jquery-events-stop-misusing-return-false– Halil Özgür
Dec 28 '11 at 17:02
(Ab)Using
return false; can bite you if you have something that needs to be clicked/submitted inside that div. Use e.stopPropagation(); instead. See fuelyourcoding.com/jquery-events-stop-misusing-return-false– Halil Özgür
Dec 28 '11 at 17:02
1
1
This works fine.. but When I click over the button which calls the popup, then popup comes and then again vanishes immediately. What to do for that as the document is taking two actions at a time. to call the popup on body click and to fadeOut the popup on bodyClick
– Veer Shrivastav
Jun 29 '13 at 17:43
This works fine.. but When I click over the button which calls the popup, then popup comes and then again vanishes immediately. What to do for that as the document is taking two actions at a time. to call the popup on body click and to fadeOut the popup on bodyClick
– Veer Shrivastav
Jun 29 '13 at 17:43
|
show 6 more comments
Try this
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
I use class name instead of ID, because in asp.net you have to worry about the extra stuff .net attaches to the id
EDIT-
Since you added a another piece, it would work like this:
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
answered Apr 3 '09 at 15:39
TStamperTStamper
26.4k105870
you have it exactly opposite. You can add and remove classes from elements, Id's never change
– Jeremy B.
Apr 3 '09 at 16:02
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:13
read my comment, and read OP's more carefully.
– Jeremy B.
Apr 3 '09 at 16:19
just to make you happy, I changed the wording
– TStamper
Apr 3 '09 at 16:21
1
e.stopPropagation(); seems to be the trick.
– phirschybar
Mar 13 '10 at 10:52
add a comment |
Try this
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
I use class name instead of ID, because in asp.net you have to worry about the extra stuff .net attaches to the id
EDIT-
Since you added a another piece, it would work like this:
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
answered Apr 3 '09 at 15:39
TStamperTStamper
26.4k105870
you have it exactly opposite. You can add and remove classes from elements, Id's never change
– Jeremy B.
Apr 3 '09 at 16:02
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:13
read my comment, and read OP's more carefully.
– Jeremy B.
Apr 3 '09 at 16:19
just to make you happy, I changed the wording
– TStamper
Apr 3 '09 at 16:21
1
e.stopPropagation(); seems to be the trick.
– phirschybar
Mar 13 '10 at 10:52
add a comment |
Try this
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
I use class name instead of ID, because in asp.net you have to worry about the extra stuff .net attaches to the id
EDIT-
Since you added a another piece, it would work like this:
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
answered Apr 3 '09 at 15:39
TStamperTStamper
26.4k105870
Try this
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
I use class name instead of ID, because in asp.net you have to worry about the extra stuff .net attaches to the id
EDIT-
Since you added a another piece, it would work like this:
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
answered Apr 3 '09 at 15:39
TStamperTStamper
26.4k105870
edited Apr 3 '09 at 16:18
answered Apr 3 '09 at 15:39
TStamperTStamper
26.4k105870
answered Apr 3 '09 at 15:39
TStamperTStamper
26.4k105870
answered Apr 3 '09 at 15:39
TStamperTStamper
26.4k105870
26.4k105870
you have it exactly opposite. You can add and remove classes from elements, Id's never change
– Jeremy B.
Apr 3 '09 at 16:02
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:13
read my comment, and read OP's more carefully.
– Jeremy B.
Apr 3 '09 at 16:19
just to make you happy, I changed the wording
– TStamper
Apr 3 '09 at 16:21
1
e.stopPropagation(); seems to be the trick.
– phirschybar
Mar 13 '10 at 10:52
add a comment |
you have it exactly opposite. You can add and remove classes from elements, Id's never change
– Jeremy B.
Apr 3 '09 at 16:02
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:13
read my comment, and read OP's more carefully.
– Jeremy B.
Apr 3 '09 at 16:19
just to make you happy, I changed the wording
– TStamper
Apr 3 '09 at 16:21
1
e.stopPropagation(); seems to be the trick.
– phirschybar
Mar 13 '10 at 10:52
you have it exactly opposite. You can add and remove classes from elements, Id's never change
– Jeremy B.
Apr 3 '09 at 16:02
you have it exactly opposite. You can add and remove classes from elements, Id's never change
– Jeremy B.
Apr 3 '09 at 16:02
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:13
no, you have it opposite, I was referring to when using asp.net server controls.. the ids change you use the runat=server attribute
– TStamper
Apr 3 '09 at 16:13
read my comment, and read OP's more carefully.
– Jeremy B.
Apr 3 '09 at 16:19
read my comment, and read OP's more carefully.
– Jeremy B.
Apr 3 '09 at 16:19
just to make you happy, I changed the wording
– TStamper
Apr 3 '09 at 16:21
just to make you happy, I changed the wording
– TStamper
Apr 3 '09 at 16:21
1
1
e.stopPropagation(); seems to be the trick.
– phirschybar
Mar 13 '10 at 10:52
e.stopPropagation(); seems to be the trick.
– phirschybar
Mar 13 '10 at 10:52
add a comment |
As of jQuery 1.7 there's a new way to handle events. I thought I'd answer here just to demonstrate how I might go about doing this the "new" way. If you haven't, I recommend you read the jQuery docs for the "on" method.
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);
Here we're abusing jQuery's selectors and bubbling of events. Note that I make sure I clean the event handler up afterwards. You can automate this behaviour with $('.container').one (see: docs) but because we need to do conditionals within the handler that isn't applicable here.
answered May 30 '12 at 1:27
Ben TaylorBen Taylor
20123
1
So uh... this worked PERFECTLY for me in case anyone needs clarification. It is also the ONLY solution to have worked for my situation.
– Keyvan Sadralodabai
May 17 '16 at 22:48
Thank you! This works great!
– Susie
Jan 23 at 22:24
add a comment |
As of jQuery 1.7 there's a new way to handle events. I thought I'd answer here just to demonstrate how I might go about doing this the "new" way. If you haven't, I recommend you read the jQuery docs for the "on" method.
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);
Here we're abusing jQuery's selectors and bubbling of events. Note that I make sure I clean the event handler up afterwards. You can automate this behaviour with $('.container').one (see: docs) but because we need to do conditionals within the handler that isn't applicable here.
answered May 30 '12 at 1:27
Ben TaylorBen Taylor
20123
1
So uh... this worked PERFECTLY for me in case anyone needs clarification. It is also the ONLY solution to have worked for my situation.
– Keyvan Sadralodabai
May 17 '16 at 22:48
Thank you! This works great!
– Susie
Jan 23 at 22:24
add a comment |
As of jQuery 1.7 there's a new way to handle events. I thought I'd answer here just to demonstrate how I might go about doing this the "new" way. If you haven't, I recommend you read the jQuery docs for the "on" method.
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);
Here we're abusing jQuery's selectors and bubbling of events. Note that I make sure I clean the event handler up afterwards. You can automate this behaviour with $('.container').one (see: docs) but because we need to do conditionals within the handler that isn't applicable here.
answered May 30 '12 at 1:27
Ben TaylorBen Taylor
20123
As of jQuery 1.7 there's a new way to handle events. I thought I'd answer here just to demonstrate how I might go about doing this the "new" way. If you haven't, I recommend you read the jQuery docs for the "on" method.
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);
Here we're abusing jQuery's selectors and bubbling of events. Note that I make sure I clean the event handler up afterwards. You can automate this behaviour with $('.container').one (see: docs) but because we need to do conditionals within the handler that isn't applicable here.
answered May 30 '12 at 1:27
Ben TaylorBen Taylor
20123
answered May 30 '12 at 1:27
Ben TaylorBen Taylor
20123
answered May 30 '12 at 1:27
Ben TaylorBen Taylor
20123
answered May 30 '12 at 1:27
Ben TaylorBen Taylor
20123
20123
1
So uh... this worked PERFECTLY for me in case anyone needs clarification. It is also the ONLY solution to have worked for my situation.
– Keyvan Sadralodabai
May 17 '16 at 22:48
Thank you! This works great!
– Susie
Jan 23 at 22:24
add a comment |
1
So uh... this worked PERFECTLY for me in case anyone needs clarification. It is also the ONLY solution to have worked for my situation.
– Keyvan Sadralodabai
May 17 '16 at 22:48
Thank you! This works great!
– Susie
Jan 23 at 22:24
1
1
So uh... this worked PERFECTLY for me in case anyone needs clarification. It is also the ONLY solution to have worked for my situation.
– Keyvan Sadralodabai
May 17 '16 at 22:48
So uh... this worked PERFECTLY for me in case anyone needs clarification. It is also the ONLY solution to have worked for my situation.
– Keyvan Sadralodabai
May 17 '16 at 22:48
Thank you! This works great!
– Susie
Jan 23 at 22:24
Thank you! This works great!
– Susie
Jan 23 at 22:24
add a comment |
This following code example seems to work best for me. While you can use 'return false' that stops all handling of that event for the div or any of it's children. If you want to have controls on the pop-up div (a pop-up login form for example) you need to use event.stopPropogation().
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
add a comment |
This following code example seems to work best for me. While you can use 'return false' that stops all handling of that event for the div or any of it's children. If you want to have controls on the pop-up div (a pop-up login form for example) you need to use event.stopPropogation().
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
add a comment |
This following code example seems to work best for me. While you can use 'return false' that stops all handling of that event for the div or any of it's children. If you want to have controls on the pop-up div (a pop-up login form for example) you need to use event.stopPropogation().
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
This following code example seems to work best for me. While you can use 'return false' that stops all handling of that event for the div or any of it's children. If you want to have controls on the pop-up div (a pop-up login form for example) you need to use event.stopPropogation().
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
answered Jul 17 '09 at 16:02
Thomas
add a comment |
add a comment |
Thanks, Thomas. I'm new to JS and I've been looking crazy for a solution to my problem. Yours helped.
I've used jquery to make a Login-box that slides down. For best user experience I desided to make the box disappear when user clicks somewhere but the box. I'm a little bit embarrassed over using about four hours fixing this. But hey, I'm new to JS.
Maybe my code can help someone out:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
answered Apr 21 '10 at 11:09
TommyTommy
6111
add a comment |
Thanks, Thomas. I'm new to JS and I've been looking crazy for a solution to my problem. Yours helped.
I've used jquery to make a Login-box that slides down. For best user experience I desided to make the box disappear when user clicks somewhere but the box. I'm a little bit embarrassed over using about four hours fixing this. But hey, I'm new to JS.
Maybe my code can help someone out:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
answered Apr 21 '10 at 11:09
TommyTommy
6111
add a comment |
Thanks, Thomas. I'm new to JS and I've been looking crazy for a solution to my problem. Yours helped.
I've used jquery to make a Login-box that slides down. For best user experience I desided to make the box disappear when user clicks somewhere but the box. I'm a little bit embarrassed over using about four hours fixing this. But hey, I'm new to JS.
Maybe my code can help someone out:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
answered Apr 21 '10 at 11:09
TommyTommy
6111
Thanks, Thomas. I'm new to JS and I've been looking crazy for a solution to my problem. Yours helped.
I've used jquery to make a Login-box that slides down. For best user experience I desided to make the box disappear when user clicks somewhere but the box. I'm a little bit embarrassed over using about four hours fixing this. But hey, I'm new to JS.
Maybe my code can help someone out:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
answered Apr 21 '10 at 11:09
TommyTommy
6111
answered Apr 21 '10 at 11:09
TommyTommy
6111
answered Apr 21 '10 at 11:09
TommyTommy
6111
answered Apr 21 '10 at 11:09
TommyTommy
6111
6111
add a comment |
add a comment |
What you can also do is:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
If your target is not a div then hide the div by checking its length is equal to zero.
edited Mar 5 '14 at 9:34
agriboz
3,33622541
answered May 11 '13 at 15:06
Sandeep PalSandeep Pal
1,5271112
Rock. This solution just worked as expected for me. Thanks a bunch!
– Bullyen
Aug 15 '14 at 20:56
add a comment |
What you can also do is:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
If your target is not a div then hide the div by checking its length is equal to zero.
edited Mar 5 '14 at 9:34
agriboz
3,33622541
answered May 11 '13 at 15:06
Sandeep PalSandeep Pal
1,5271112
Rock. This solution just worked as expected for me. Thanks a bunch!
– Bullyen
Aug 15 '14 at 20:56
add a comment |
What you can also do is:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
If your target is not a div then hide the div by checking its length is equal to zero.
edited Mar 5 '14 at 9:34
agriboz
3,33622541
answered May 11 '13 at 15:06
Sandeep PalSandeep Pal
1,5271112
What you can also do is:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
If your target is not a div then hide the div by checking its length is equal to zero.
edited Mar 5 '14 at 9:34
agriboz
3,33622541
answered May 11 '13 at 15:06
Sandeep PalSandeep Pal
1,5271112
edited Mar 5 '14 at 9:34
agriboz
3,33622541
edited Mar 5 '14 at 9:34
agriboz
3,33622541
edited Mar 5 '14 at 9:34
agriboz
3,33622541
3,33622541
answered May 11 '13 at 15:06
Sandeep PalSandeep Pal
1,5271112
answered May 11 '13 at 15:06
Sandeep PalSandeep Pal
1,5271112
answered May 11 '13 at 15:06
Sandeep PalSandeep Pal
1,5271112
1,5271112
Rock. This solution just worked as expected for me. Thanks a bunch!
– Bullyen
Aug 15 '14 at 20:56
add a comment |
Rock. This solution just worked as expected for me. Thanks a bunch!
– Bullyen
Aug 15 '14 at 20:56
Rock. This solution just worked as expected for me. Thanks a bunch!
– Bullyen
Aug 15 '14 at 20:56
Rock. This solution just worked as expected for me. Thanks a bunch!
– Bullyen
Aug 15 '14 at 20:56
add a comment |
I did the below. Thought of sharing so someone else could also benefit.
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});
Let me know if I can help someone on this.
edited Nov 19 '15 at 15:27
kero
10k53242
answered May 21 '12 at 15:32
foxybaggafoxybagga
3,63422730
Great code and doesn't execute ifdiv#newButtonDivisn't clicked. I would recommend you remove the second.click()on line 4 (if you do this, remember to remove the closing braces, parenthesis and semi-colon - line 9).
– AUllah1
Jul 21 '16 at 10:13
add a comment |
I did the below. Thought of sharing so someone else could also benefit.
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});
Let me know if I can help someone on this.
edited Nov 19 '15 at 15:27
kero
10k53242
answered May 21 '12 at 15:32
foxybaggafoxybagga
3,63422730
Great code and doesn't execute ifdiv#newButtonDivisn't clicked. I would recommend you remove the second.click()on line 4 (if you do this, remember to remove the closing braces, parenthesis and semi-colon - line 9).
– AUllah1
Jul 21 '16 at 10:13
add a comment |
I did the below. Thought of sharing so someone else could also benefit.
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});
Let me know if I can help someone on this.
edited Nov 19 '15 at 15:27
kero
10k53242
answered May 21 '12 at 15:32
foxybaggafoxybagga
3,63422730
I did the below. Thought of sharing so someone else could also benefit.
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});
Let me know if I can help someone on this.
edited Nov 19 '15 at 15:27
kero
10k53242
answered May 21 '12 at 15:32
foxybaggafoxybagga
3,63422730
edited Nov 19 '15 at 15:27
kero
10k53242
edited Nov 19 '15 at 15:27
kero
10k53242
edited Nov 19 '15 at 15:27
kero
10k53242
10k53242
answered May 21 '12 at 15:32
foxybaggafoxybagga
3,63422730
answered May 21 '12 at 15:32
foxybaggafoxybagga
3,63422730
answered May 21 '12 at 15:32
foxybaggafoxybagga
3,63422730
3,63422730
Great code and doesn't execute ifdiv#newButtonDivisn't clicked. I would recommend you remove the second.click()on line 4 (if you do this, remember to remove the closing braces, parenthesis and semi-colon - line 9).
– AUllah1
Jul 21 '16 at 10:13
add a comment |
Great code and doesn't execute ifdiv#newButtonDivisn't clicked. I would recommend you remove the second.click()on line 4 (if you do this, remember to remove the closing braces, parenthesis and semi-colon - line 9).
– AUllah1
Jul 21 '16 at 10:13
Great code and doesn't execute if
div#newButtonDiv isn't clicked. I would recommend you remove the second .click() on line 4 (if you do this, remember to remove the closing braces, parenthesis and semi-colon - line 9).– AUllah1
Jul 21 '16 at 10:13
Great code and doesn't execute if
div#newButtonDiv isn't clicked. I would recommend you remove the second .click() on line 4 (if you do this, remember to remove the closing braces, parenthesis and semi-colon - line 9).– AUllah1
Jul 21 '16 at 10:13
add a comment |
Another way of hiding the container div when a click happens in a not children element;
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
});
answered Sep 17 '14 at 18:46
Renato GamaRenato Gama
10.6k74375
add a comment |
Another way of hiding the container div when a click happens in a not children element;
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
});
answered Sep 17 '14 at 18:46
Renato GamaRenato Gama
10.6k74375
add a comment |
Another way of hiding the container div when a click happens in a not children element;
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
});
answered Sep 17 '14 at 18:46
Renato GamaRenato Gama
10.6k74375
Another way of hiding the container div when a click happens in a not children element;
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
});
answered Sep 17 '14 at 18:46
Renato GamaRenato Gama
10.6k74375
answered Sep 17 '14 at 18:46
Renato GamaRenato Gama
10.6k74375
answered Sep 17 '14 at 18:46
Renato GamaRenato Gama
10.6k74375
answered Sep 17 '14 at 18:46
Renato GamaRenato Gama
10.6k74375
10.6k74375
add a comment |
add a comment |
$(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ( $(e.target).closest('#suggest_input').length ) {
$(".suggest_div").show();
}else if ( ! $(e.target).closest('.suggest_container').length ) {
$('.suggest_div').hide();
}
});
Here #suggest_input in is the name of textbox and .suggest_container is the ul class name and .suggest_div is the main div element for my auto-suggest.
this code is for hiding the div elements by clicking any where in the screen.
Before doing every thing please understand the code and copy it...
answered May 28 '15 at 5:53
Shaikh ArbaazShaikh Arbaaz
1043
add a comment |
$(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ( $(e.target).closest('#suggest_input').length ) {
$(".suggest_div").show();
}else if ( ! $(e.target).closest('.suggest_container').length ) {
$('.suggest_div').hide();
}
});
Here #suggest_input in is the name of textbox and .suggest_container is the ul class name and .suggest_div is the main div element for my auto-suggest.
this code is for hiding the div elements by clicking any where in the screen.
Before doing every thing please understand the code and copy it...
answered May 28 '15 at 5:53
Shaikh ArbaazShaikh Arbaaz
1043
add a comment |
$(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ( $(e.target).closest('#suggest_input').length ) {
$(".suggest_div").show();
}else if ( ! $(e.target).closest('.suggest_container').length ) {
$('.suggest_div').hide();
}
});
Here #suggest_input in is the name of textbox and .suggest_container is the ul class name and .suggest_div is the main div element for my auto-suggest.
this code is for hiding the div elements by clicking any where in the screen.
Before doing every thing please understand the code and copy it...
answered May 28 '15 at 5:53
Shaikh ArbaazShaikh Arbaaz
1043
$(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ( $(e.target).closest('#suggest_input').length ) {
$(".suggest_div").show();
}else if ( ! $(e.target).closest('.suggest_container').length ) {
$('.suggest_div').hide();
}
});
Here #suggest_input in is the name of textbox and .suggest_container is the ul class name and .suggest_div is the main div element for my auto-suggest.
this code is for hiding the div elements by clicking any where in the screen.
Before doing every thing please understand the code and copy it...
answered May 28 '15 at 5:53
Shaikh ArbaazShaikh Arbaaz
1043
answered May 28 '15 at 5:53
Shaikh ArbaazShaikh Arbaaz
1043
answered May 28 '15 at 5:53
Shaikh ArbaazShaikh Arbaaz
1043
answered May 28 '15 at 5:53
Shaikh ArbaazShaikh Arbaaz
1043
1043
add a comment |
add a comment |
Try this:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});
answered Aug 16 '15 at 6:14
Nalan MadheswaranNalan Madheswaran
4,94213123
add a comment |
Try this:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});
answered Aug 16 '15 at 6:14
Nalan MadheswaranNalan Madheswaran
4,94213123
add a comment |
Try this:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});
answered Aug 16 '15 at 6:14
Nalan MadheswaranNalan Madheswaran
4,94213123
Try this:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});
answered Aug 16 '15 at 6:14
Nalan MadheswaranNalan Madheswaran
4,94213123
edited Feb 1 at 2:49
answered Aug 16 '15 at 6:14
Nalan MadheswaranNalan Madheswaran
4,94213123
answered Aug 16 '15 at 6:14
Nalan MadheswaranNalan Madheswaran
4,94213123
answered Aug 16 '15 at 6:14
Nalan MadheswaranNalan Madheswaran
4,94213123
4,94213123
add a comment |
add a comment |
Try this, it's working perfect for me.
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});
edited Aug 22 '13 at 6:44
Flexo♦
69.8k21146230
answered Aug 11 '13 at 6:45
Hassan SardarHassan Sardar
1,804143877
add a comment |
Try this, it's working perfect for me.
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});
edited Aug 22 '13 at 6:44
Flexo♦
69.8k21146230
answered Aug 11 '13 at 6:45
Hassan SardarHassan Sardar
1,804143877
add a comment |
Try this, it's working perfect for me.
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});
edited Aug 22 '13 at 6:44
Flexo♦
69.8k21146230
answered Aug 11 '13 at 6:45
Hassan SardarHassan Sardar
1,804143877
Try this, it's working perfect for me.
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn't the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});
edited Aug 22 '13 at 6:44
Flexo♦
69.8k21146230
answered Aug 11 '13 at 6:45
Hassan SardarHassan Sardar
1,804143877
edited Aug 22 '13 at 6:44
Flexo♦
69.8k21146230
edited Aug 22 '13 at 6:44
Flexo♦
69.8k21146230
edited Aug 22 '13 at 6:44
Flexo♦
69.8k21146230
69.8k21146230
answered Aug 11 '13 at 6:45
Hassan SardarHassan Sardar
1,804143877
answered Aug 11 '13 at 6:45
Hassan SardarHassan Sardar
1,804143877
answered Aug 11 '13 at 6:45
Hassan SardarHassan Sardar
1,804143877
1,804143877
add a comment |
add a comment |
$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});
but you need to keep in mind these things as well. http://css-tricks.com/dangers-stopping-event-propagation/
answered Feb 3 '15 at 10:49
Muhammad TahirMuhammad Tahir
1,2621518
add a comment |
$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});
but you need to keep in mind these things as well. http://css-tricks.com/dangers-stopping-event-propagation/
answered Feb 3 '15 at 10:49
Muhammad TahirMuhammad Tahir
1,2621518
add a comment |
$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});
but you need to keep in mind these things as well. http://css-tricks.com/dangers-stopping-event-propagation/
answered Feb 3 '15 at 10:49
Muhammad TahirMuhammad Tahir
1,2621518
$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});
but you need to keep in mind these things as well. http://css-tricks.com/dangers-stopping-event-propagation/
answered Feb 3 '15 at 10:49
Muhammad TahirMuhammad Tahir
1,2621518
answered Feb 3 '15 at 10:49
Muhammad TahirMuhammad Tahir
1,2621518
answered Feb 3 '15 at 10:49
Muhammad TahirMuhammad Tahir
1,2621518
answered Feb 3 '15 at 10:49
Muhammad TahirMuhammad Tahir
1,2621518
1,2621518
add a comment |
add a comment |
Here is a working CSS/small JS solution based on the answer of Sandeep Pal:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});
Try it out by clicking the checkbox and then outside of the menu:
https://jsfiddle.net/qo90txr8/
answered Jul 28 '15 at 10:08
BjoergBjoerg
98911024
add a comment |
Here is a working CSS/small JS solution based on the answer of Sandeep Pal:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});
Try it out by clicking the checkbox and then outside of the menu:
https://jsfiddle.net/qo90txr8/
answered Jul 28 '15 at 10:08
BjoergBjoerg
98911024
add a comment |
Here is a working CSS/small JS solution based on the answer of Sandeep Pal:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});
Try it out by clicking the checkbox and then outside of the menu:
https://jsfiddle.net/qo90txr8/
answered Jul 28 '15 at 10:08
BjoergBjoerg
98911024
Here is a working CSS/small JS solution based on the answer of Sandeep Pal:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});
Try it out by clicking the checkbox and then outside of the menu:
https://jsfiddle.net/qo90txr8/
answered Jul 28 '15 at 10:08
BjoergBjoerg
98911024
answered Jul 28 '15 at 10:08
BjoergBjoerg
98911024
answered Jul 28 '15 at 10:08
BjoergBjoerg
98911024
answered Jul 28 '15 at 10:08
BjoergBjoerg
98911024
98911024
add a comment |
add a comment |
This doesn't work - it hides the .myDIV when you click inside of it.
$('.openDiv').click(function(e) {
$('.myDiv').show();
e.stopPropagation();
})
$(document).click(function(){
$('.myDiv').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>
answered Apr 3 '09 at 15:58
FranekFranek
96531319
so you want the div to showto show when the link is placed,then take that e.stopPropa.. out of there and follow my option
– TStamper
Apr 3 '09 at 16:16
add a comment |
This doesn't work - it hides the .myDIV when you click inside of it.
$('.openDiv').click(function(e) {
$('.myDiv').show();
e.stopPropagation();
})
$(document).click(function(){
$('.myDiv').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>
answered Apr 3 '09 at 15:58
FranekFranek
96531319
so you want the div to showto show when the link is placed,then take that e.stopPropa.. out of there and follow my option
– TStamper
Apr 3 '09 at 16:16
add a comment |
This doesn't work - it hides the .myDIV when you click inside of it.
$('.openDiv').click(function(e) {
$('.myDiv').show();
e.stopPropagation();
})
$(document).click(function(){
$('.myDiv').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>
answered Apr 3 '09 at 15:58
FranekFranek
96531319
This doesn't work - it hides the .myDIV when you click inside of it.
$('.openDiv').click(function(e) {
$('.myDiv').show();
e.stopPropagation();
})
$(document).click(function(){
$('.myDiv').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>
answered Apr 3 '09 at 15:58
FranekFranek
96531319
answered Apr 3 '09 at 15:58
FranekFranek
96531319
answered Apr 3 '09 at 15:58
FranekFranek
96531319
answered Apr 3 '09 at 15:58
FranekFranek
96531319
96531319
so you want the div to showto show when the link is placed,then take that e.stopPropa.. out of there and follow my option
– TStamper
Apr 3 '09 at 16:16
add a comment |
so you want the div to showto show when the link is placed,then take that e.stopPropa.. out of there and follow my option
– TStamper
Apr 3 '09 at 16:16
so you want the div to showto show when the link is placed,then take that e.stopPropa.. out of there and follow my option
– TStamper
Apr 3 '09 at 16:16
so you want the div to showto show when the link is placed,then take that e.stopPropa.. out of there and follow my option
– TStamper
Apr 3 '09 at 16:16
add a comment |
Just 2 small improvements to the above suggestions:
- unbind the document.click when done
stop propagation on the event that triggered this, assuming its a click
jQuery(thelink).click(function(e){
jQuery(thepop).show();
// bind the hide controls
var jpop=jQuery(thepop);
jQuery(document).bind("click.hidethepop", function() {
jpop.hide();
// unbind the hide controls
jQuery(document).unbind("click.hidethepop");
});
// dont close thepop when you click on thepop
jQuery(thepop).click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
answered Feb 13 '12 at 16:21
commonpikecommonpike
5,35613949
add a comment |
Just 2 small improvements to the above suggestions:
- unbind the document.click when done
stop propagation on the event that triggered this, assuming its a click
jQuery(thelink).click(function(e){
jQuery(thepop).show();
// bind the hide controls
var jpop=jQuery(thepop);
jQuery(document).bind("click.hidethepop", function() {
jpop.hide();
// unbind the hide controls
jQuery(document).unbind("click.hidethepop");
});
// dont close thepop when you click on thepop
jQuery(thepop).click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
answered Feb 13 '12 at 16:21
commonpikecommonpike
5,35613949
add a comment |
Just 2 small improvements to the above suggestions:
- unbind the document.click when done
stop propagation on the event that triggered this, assuming its a click
jQuery(thelink).click(function(e){
jQuery(thepop).show();
// bind the hide controls
var jpop=jQuery(thepop);
jQuery(document).bind("click.hidethepop", function() {
jpop.hide();
// unbind the hide controls
jQuery(document).unbind("click.hidethepop");
});
// dont close thepop when you click on thepop
jQuery(thepop).click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
answered Feb 13 '12 at 16:21
commonpikecommonpike
5,35613949
Just 2 small improvements to the above suggestions:
- unbind the document.click when done
stop propagation on the event that triggered this, assuming its a click
jQuery(thelink).click(function(e){
jQuery(thepop).show();
// bind the hide controls
var jpop=jQuery(thepop);
jQuery(document).bind("click.hidethepop", function() {
jpop.hide();
// unbind the hide controls
jQuery(document).unbind("click.hidethepop");
});
// dont close thepop when you click on thepop
jQuery(thepop).click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
answered Feb 13 '12 at 16:21
commonpikecommonpike
5,35613949
answered Feb 13 '12 at 16:21
commonpikecommonpike
5,35613949
answered Feb 13 '12 at 16:21
commonpikecommonpike
5,35613949
answered Feb 13 '12 at 16:21
commonpikecommonpike
5,35613949
5,35613949
add a comment |
add a comment |
$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>answered Oct 15 '17 at 10:07
Ehsan KHANEhsan KHAN
515
add a comment |
$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>answered Oct 15 '17 at 10:07
Ehsan KHANEhsan KHAN
515
add a comment |
$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>answered Oct 15 '17 at 10:07
Ehsan KHANEhsan KHAN
515
$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>answered Oct 15 '17 at 10:07
Ehsan KHANEhsan KHAN
515
edited Oct 16 '17 at 7:51
answered Oct 15 '17 at 10:07
Ehsan KHANEhsan KHAN
515
answered Oct 15 '17 at 10:07
Ehsan KHANEhsan KHAN
515
answered Oct 15 '17 at 10:07
Ehsan KHANEhsan KHAN
515
515
add a comment |
add a comment |
$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});
answered Jan 13 '17 at 15:35
mohammad gitipasandmohammad gitipasand
656
Identical answer was already below. About 2 Yr. late.
– Illdapt
Dec 28 '17 at 18:14
add a comment |
$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});
answered Jan 13 '17 at 15:35
mohammad gitipasandmohammad gitipasand
656
Identical answer was already below. About 2 Yr. late.
– Illdapt
Dec 28 '17 at 18:14
add a comment |
$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});
answered Jan 13 '17 at 15:35
mohammad gitipasandmohammad gitipasand
656
$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});
answered Jan 13 '17 at 15:35
mohammad gitipasandmohammad gitipasand
656
answered Jan 13 '17 at 15:35
mohammad gitipasandmohammad gitipasand
656
answered Jan 13 '17 at 15:35
mohammad gitipasandmohammad gitipasand
656
answered Jan 13 '17 at 15:35
mohammad gitipasandmohammad gitipasand
656
656
Identical answer was already below. About 2 Yr. late.
– Illdapt
Dec 28 '17 at 18:14
add a comment |
Identical answer was already below. About 2 Yr. late.
– Illdapt
Dec 28 '17 at 18:14
Identical answer was already below. About 2 Yr. late.
– Illdapt
Dec 28 '17 at 18:14
Identical answer was already below. About 2 Yr. late.
– Illdapt
Dec 28 '17 at 18:14
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f714471%2fjquery-hide-element-when-clicked-anywhere-on-the-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
