Forums

acondiff

I have a Date text field and when it is focused a calendar selector pops up underneath is. using jquery I am trying to hide it when the mouse is clicked outside of both the field and the calendar selector itself. This is the code ive got that doesn't seem to work.


  hideIfClickOutside: function(event) {
    if (event.target != this.input[0] && !this.insideSelector(event)) {
      this.hide();
    };
  },
  insideSelector: function(event) {
    var offset = this.dateSelector.position();
    offset.right = offset.left + this.dateSelector.outerWidth();
    offset.bottom = offset.top + this.dateSelector.outerHeight();
    alert(offset.right);
    return event.pageY < offset.bottom &&
           event.pageY > offset.top &&
           event.pageX < offset.right &&
           event.pageX > offset.left;
  },

With this code, I got to click on the date selector and the calendar disappears. I don't think it is getting the correct position for some reason. It may be because of my css but I cannot change that.

Any help? Thanks.

acondiff

You would think this would work:

  hideIfClickOutside&#58; function(event) {
    if( event&#46;target == $('&#46;date_input')) {
    	this&#46;show();
    }
    if( event&#46;target != $('&#46;date_input') &amp;&amp; event&#46;target != $('&#46;date_selector')) {
    	this&#46;hide();
    }
  },

...but it doesn't.

acondiff

anybody please? =)

treehouse : what would you like to learn today?

Forums

jQuery Date Selector