very touchy onmouseout behaviour

Question

I would like to design something similar to what can be seen on http://www.thedana.com/ by the "Check availability" button - I've used the jquery.js file from w3school.com and got the following so far: http://quaaoutlodge.com/drupal-7.14/ (Book Now tab). Now as you realize, it is very touchy and fades out sometimes when it shouldn't (when the cursor is still in the middle of the field) how can I make this nicer, more user friendly?

Thanks! Ron

Update: I tried to implement that but it doesn't quite work as I would like to show my "fade" div upon hovering over "book" and keep it up as the cursor moves down, over "fade" how do I accomplish this? Url:http://quaaoutlodge.com/drupal-7.14/

Answer 1

Put the div#fade inside of the div#book, that will solve half of your problems. You will have to adapt the CSS as well for this change.

Another very important point to learners is that jQuery provides unobtrusive cross-browser event listeners attaching. That means, inline JS in the html as onmouseenter="handler()" is not just unnecessary and technically ugly - mixed structure with behavior -, it also pollutes the global scope with function names.

That's one of the reasons people advertise against W3School.

But back on topic here's a solution using the DOM Ready handler and a hover one:

Fiddle

HTML

<div id="book">
    <a href="/drupal-7.14//?q=book">Book Now</a>
    <div id="fade">TEST</div>
</div>​

JS

​$(function() {
    var fade = $('#fade');
    $('#book').hover(function() {
        fade.fadeIn();
    }, function() {
        fade.fadeOut();
    });
});

Again, you will have to rework the CSS removing the position:absolute and margins from #fade.