event mouseout on datepicker

Question

Hello, could someone explain too me how this code will work

Because, I don't know if I should put the code in the plugin-file or de head section off the page

what else do I need too pay attention for

the code is from http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerCloseMouseOut.html

thanks in advance, Richard

(also, I don't know wat cal is referring too,datePickerDiv and $('.date-pick')?)

 $(function() 
{ 
   var cal; 
   var $this; 

   var checkForMouseout = function(event) 
   { 
      var el = event.target; 

      while (true){ 
         if (el == cal) { 
            return true; 
         } else if (el == document) { 
            $this.dpClose(); 
            return false; 
         } else { 
            el = $(el).parent()[0]; 
         } 
      } 
   }; 

   $('.date-pick') 
      .datePicker() 
      .bind( 
         'dpDisplayed', 
         function(event, datePickerDiv) 
         { 
            cal = datePickerDiv; 
            $this = $(this); 
            $(document).bind( 
               'mouseover', 
               checkForMouseout 
            ); 
         } 
      ).bind( 
         'dpClosed', 
         function(event, selected) 
         { 
            $(document).unbind( 
               'mouseover', 
               checkForMouseout 
            ); 
         } 
      ); 

});

Answer 1

This code will check if the mouse leaves the datepicker div and then close it if the mouse did leave. The code checks this by checking if the element that received the event was the calendar.

//el is set above or below, call is set globally in the document.ready
while (true){ //this will loop forever until a return
     if (el == cal) { //is the receiving element the calender
        return true; //we return true (no ideo why true and not null or 'yaadada'
     } else if (el == document) { //we check if the target el is the document
        $this.dpClose();  //close the element
        return false; //return to leave loop
     } else { //el is neither the call or the document
        el = $(el).parent()[0]; //set el to the imidiate parent of the current el and reloop
     }
}

You should put this code in the head of your document.

Easier would be this code:

$('.date-pick') 
  .datePicker() 
  .bind( 
     'dpDisplayed', 
     function(event, datePickerDiv) 
     { 
        cal = datePickerDiv; //datepickerdiv should somehow hold the the datpicker div , something like: $('.date-pick')[0];
        $this = $(this); 
        $(cal).mouseleave( function() { $(this).dpClose(); });
     }
}

A better question might be, why do you wan't to include code of which you don't know what it does?

NOTE: this code is very ugly and you should propably consider rewriting it.