Home/ Questions/Q 557593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T12:02:33+00:00

I have a (visibility:hidden) div with a Drop Down menu and a jQuery datepicker

  • 0

I have a (visibility:hidden) div with a Drop Down menu and a jQuery datepicker on it.
This div is a popup that is displayed when the user clicks on an input field.

When the user clicks anywhere else on the page, the popup needs to dissappear.
The code to hide the popup is like so:

jQuery('.datepicker-popup').live("focusout", function() {
    var id = jQuery(this).attr('id'); 
    id = id.substring(17); // datepicker-popup-#  
    jQuery('#datepicker-popup-'+id).fadeTo(500, 0.0, function() {
        jQuery('#datepicker-popup-'+id).css('visibility', 'hidden');
    });
});

Using jQuery 1.4

Now the problem is that the popup fades when the user clicks on the drop down menu above the datepicker or on the drop down menus from the datepicker itself (month/year) e.g. the code is being executed when the user uses (some) elements within the div, this obviously needs to be prevented somehow.

How do I do this the right way?

edit:

<!DOCTYPE html>
<html>
<head>
  <script src="js/jquery-1.4.min.js"></script>

  <script type="text/javascript">
  jQuery(document).ready(function(){ 
    jQuery('.datePickerTriggerElement').click(function(){
      var picker = jQuery('.datepicker-popup');
      jQuery('<div></div>').css({
        height: body.height(), 
        width: body.width(), 
        position: 'absolute',
        'z-index': -1,
        top: picker.offset().top*-1, 
        left: picker.offset().left*-1
      }).click(function(){
         picker.trigger('focusout'); // or the body of your focusout callback
         jQuery(this).hide(); // or remove if you dont wan to reuse.
      }).prependTo(picker); 
      picker.css('visibility', 'visible');
    });
    jQuery('.datepicker-popup').live("focusout", function() {
      jQuery('.datepicker-popup').fadeTo(500, 0.0, function() {
        jQuery('.datepicker-popup').css('visibility', 'hidden');
        jQuery('.datepicker-popup').css('opacity', '1.0');
      });
    }); 
  });  
  </script>
</head>
<body> 
  <p>
    <input type=text class=datePickerTriggerElement />
    <div id="datepicker-popup-0" class="datepicker-popup" style="visibility: hidden">
        Popup text
    </div>
  </p>
</body>
</html>

The body.height() and body.width() appear to break the code, if you were to put in something like height: ‘500px’, width: ‘500px’ it works for that area!

using jQuery(window).height() it works somewhat, but right now I see that’s a bit off. The window height is not fully calculated it seems, the monitor is 1024 high, though the script says 937 even if I use Google Chrome in full screen

edit: I’m using screen.height and screen.width instead, this always gives the maximum area 🙂

So i have this working now, but there is one flaw: When clicking on drop down menus in the popup the popup fades as well.
I tried using

jQuery('select').click(function(event){
  event.stopPropagation();
});

But that doesn’t work at all.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What is normally done (or at least what ive seen done and implemented on my own before) for light boxes is to append a DIV below the popup that covers the entire page and then attach a click event to that that closes the popup.
    Youll need to ajust this appropriately but its the basic idea. 

    jQuery('.datePickerTriggerElement').click(function(){
  var picker = jQuery('.datepicker-popup');
  jQuery('<div></div>').css(
    height: body.height(), 
    width: body.width(), 
    position: 'absolute',
    'z-index': -1,
    top: picker.offset().top*-1, 
    left: picker.offset().left*-1
  }).click(function(){
     picker.trigger('focusout'); // or the body of your focusout callback
     $(this).hide(); // or remove if you dont wan to reuse.
  }).prependTo(picker); 
});
    • 0