5

I have a form system which is dynamically generated.

The code below is the button which calls 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's the div which shows up when the above button is clicked. The button toggles the style display:none when clicked inside the 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 outside of the div too.

I tried this JS but it won't work as it sets display:none to the div. What am I doing wrong?

jQuery(document).click(function(event) {
    if ( !jQuery(event.target).hasClass('yui-calcontainer')) {
         jQuery(".yui-calcontainer").hide();
    }
});
1
  • let me know if my answer was helpful to you . Commented Aug 27, 2016 at 5:38

5 Answers 5

2

You can't bind a click event to the document. Bind 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();
    }
});
3
  • I tried both your solutions and the result is the same. Once I add your JS, the default status changes to <div id="cal1_0Container" style="clear: both; position: absolute; z-index: 9987;display:none" class="yui-calcontainer single">Calendar Here</div> so the button doesn't work anymore as the display;none comes into play by default. Commented Aug 27, 2016 at 5:00
  • It's adding display none, therefore this JS code is working, so something else is causing it. I'm not familiar with YUICalendar, but you could try calling the same showHide function that is on the button (RSFormPro.YUICalendar.showHideCalendar('cal1_0Container')) in the JS when the target has the "yui-container" class.
    – depiction
    Commented Aug 27, 2016 at 5:07
  • the div is also called by a button with his function: onclick="RSFormPro.YUICalendar.showHideCalendar('cal1_0Container');" which stops working when i add your javascript. Commented Aug 27, 2016 at 5:35
2

You can use some trick 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(); for show/hide

let me know if it this is helpful to you .

This 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
  • Where would I add container.toggle();? I can't change the generated form! I can only use the id or class of the form available. Commented Aug 27, 2016 at 5:42
  • Thank you for your effort. Really appreciate it and voted up. However, you didn't understand my question :( Commented Aug 27, 2016 at 7:18
0

It looks like you're trying to use the YUICalendar library, in which case it might benefit to take a look at the official documentation @ https://developer.yahoo.com/yui/calendar/

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

0

When you click on button you will see the div and when you again click the button div closed and when div is open and you click outside the div ...div 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();
    });
});
1
-1
 $("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 e.g  
 $(".feeling_menu_trigger,.feeling_menu_container")
    if (!(ignoreContainer.is(e.target) || 
     ignoreContainer.has(e.target).length)) {
        $(".feeling_menu_container").hide();
    }
  });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.