Geek Answers Handbook

Hide DIV on click

I have a form system that is dynamically generated.

Below is the code that invokes the calendar.

<input id="btn1_0" type="button" value="☵" class="rsform-calendar-box btnCal rsform-calendar-button btn btn-default" onclick="RSFormPro.YUICalendar.showHideCalendar('cal1_0Container');">

Here is the div that appears when the button above is clicked. The button toggles the display:none style when clicked inside a div :

 <div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> Calendar Here </div>

I want to hide the calendar when someone clicks and outside the div.

I tried this JS but it will not work as it sets display:none to div. What am I doing wrong?

 jQuery(document).click(function(event) { if ( !jQuery(event.target).hasClass('yui-calcontainer')) { jQuery(".yui-calcontainer").hide(); } });
+5
source share
5 answers

You cannot bind a click event to a document. Tie it to the body.

 jQuery('body').click(function(event) { if ( !jQuery(event.target).hasClass('yui-calcontainer')) { jQuery(".yui-calcontainer").hide(); } }); or jQuery(document).on('click', 'body', function(event) { if ( !jQuery(event.target).hasClass('yui-calcontainer')) { jQuery(".yui-calcontainer").hide(); } });
+2
source

You can use some tricks like this, check this code below

 $(document).dblclick(function (e) { var container = $(".yui-calcontainer"); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { container.hide(); /// or container.toggle(); to show/hide } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body style="height:100% ; width:100%;";> <div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> Calendar Here </div> </body>

use container.toggle(); to show / hide

Let me know if you find this helpful.

That was my html

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).dblclick(function (e) { var container = $(".yui-calcontainer"); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { container.toggle(); } }); </script> </head> <body style="height:100% ; width:100%;";> <div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;" class="yui-calcontainer single"> Calendar Here </div> </body> </html>
+2
source

It looks like you are trying to use the YUICalendar library, in which case it may be useful to take a look at the official documentation @ https://developer.yahoo.com/yui/calendar/

I found an example that could accomplish what you are trying to achieve: https://developer.yahoo.com/yui/examples/calendar/calcontainer_clean.html

0
source

When you click on the button, you will see the div, and when you press the button again, the div is closed, and when the div is open, and you click outside the div ... div is closed ...

 $(document).ready(function(){ $('#privacy').toggle(); $('#privacybutton').click( function(e) { // stops link from making page jump to the top e.preventDefault(); // when you click the button, it stops the page from seeing it as clicking the body too e.stopPropagation(); $('#privacy').toggle(); }); $('#privacy').click( function(e) { // when you click within content area, it stops the page from seeing it as clicking the body too e.stopPropagation(); }); $('body').click( function() { $('#privacy').hide(); }); });
0
source 
  $("body").on('click', function (e) { var ignoreContainer = $(".feeling_menu_trigger"); //you can add .feeling_menu_container class if you want to keep container on when user click inside of container eg $(".feeling_menu_trigger,.feeling_menu_container") if (!(ignoreContainer.is(e.target) || ignoreContainer.has(e.target).length)) { $(".feeling_menu_container").hide(); } });
-1
source

More articles:


All Articles