Question

I have a Drupal site with a standard jQuery/suckerfish-style menu, which I have modified to cause the final top-level LI to have some special functioning via jQuery. Specifically, on mouseover, it reveals a tab with reservations functionality. When the date input fields are clicked, jQuery UI datepicker activates. I need this reservations tab and the calendar to stay active so long as either are in-focus/hover/mouseover.

The HTML contained in the #reservations-tab div is here: http://pastebin.com/BPp4vS0R

I’ve not put it directly in this post because it’s quite lengthy.

jQuery:

$(document).ready(function(){  
 // Add div for reservations to display beneath "Stay" link when hovered.
  $('#reservations-tab').hide();
  $('.menulinkstay' || '#reservations-tab').mouseenter(function(){
    $('#reservations-tab').show().fadeTo(400, 1);
  });
  $('.menulinkstay' && '#reservations-tab').mouseleave(function(){
    $('#reservations-tab').stop().fadeTo(400, 0);
  });
  // Datepicker & Datepicker div hide
  $('.datepicker-input .field').datepicker();
  $('#reservations-datepicker-checkin .widget-icon').click(function() {
      $('#reservations-datepicker-checkin .datepicker-input  .field').datepicker('show');
}), $('#reservations-datepicker-checkout .widget-icon').click(function() {
  $('#reservations-datepicker-checkout .datepicker-input .field').datepicker('show');
});
});

I’ve tried adding && '#ui-datepicker-div' to the first .mouseleave function; I’ve also tried multiple variants of doing it as a standalone line of code after the ‘show’ part of the datepicker invocation. I’ve tried using .hover, .mouseover, and .mouseleave.

In all contexts, I can get it to where the #reservations-tab is fading in properly, and the datepicker works, but either A.) The #reservations-tab div disappears when the UI Datepicker gains focus, or B.) The UI Datepicker appears and works as intended, but the #reservations-tab does not disappear moving the mouse entirely out of the area.

Much thanks in advance for any/all help.

Answer 1

OK one solution I’ve used for similar problems in the past. Basically If you can structure your HTML like so:

<div id="reservations-widget">
 <!--widget code-->
</div>
<div class="mainDiv">

</div>

then you can structure your jQuery like:

$(document).ready(function(){  
 // Add div for reservations to display beneath "Stay" link when hovered.
  $('#reservations-tab').hide();
  $('.menulinkstay' || '#reservations-tab').mouseenter(function(){
    $('#reservations-tab').show().fadeTo(400, 1);
  });
  $('div.mainDiv').hover(function(){
    $('#reservations-tab').stop().fadeTo(400, 0);
  });
  // Datepicker & Datepicker div hide
  $('.datepicker-input .field').datepicker();
  $('#reservations-datepicker-checkin .widget-icon').click(function() {
      $('#reservations-datepicker-checkin .datepicker-input  .field').datepicker('show');
}), $('#reservations-datepicker-checkout .widget-icon').click(function() {
  $('#reservations-datepicker-checkout .datepicker-input .field').datepicker('show');
});
});

So now rather then the mouse leave function being fired whenever you hover over the datepicker, providing both your datapicker and hover overs our outside of mainDiv they should stay visible.

When the user leaves the drop down “area” they should enter your main div, thus firing the hover event on this and hiding your menus.

Hope that’s explained satisfactory and helps.