jquery popup cancel event

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.

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); });

Could you please provide sample code? If I append a DIV it would seem it would only be available below the popup, or would I have to specify height/width (if that would even help)?

Cornelis 2010-01-19 14:10:27

see edits for the basic idea - id recommend looking at a jquery-ui dialog or something of that nature as it uses a similar method but no doubt with better code :-)

prodigitalson 2010-01-19 14:36:36

The code you provided does not seem to compile the css attributes :( already removed the extra '}'

Cornelis 2010-01-19 14:51:24

There wasnt an extra }... i missed an { in the css. it should be `.css({/* props/vals */})`

prodigitalson 2010-01-19 15:10:24

Alright, my bad then, however it still doesn't work, I can't seem to find the prepended DIV element (in Chrome inspect element), nor see it if I put in a background color and set the z-index to a higher value

Cornelis 2010-01-19 15:19:10

can you post the code and html you are using (it should be slightly differnt than mine).

prodigitalson 2010-01-19 15:26:46

I can put a simplified version in my question, sure. The total block is over 1200 lines of code including Velocity and chunks of JS

Cornelis 2010-01-20 08:14:16

It's working in FF/chrome/opera and safari, but I cant get it to work in IE 8.0

Cornelis 2010-01-21 12:26:14

ansaurus

tags:

views:

answers:

jquery popup cancel event

related questions