CODEWITHSUNDEEP
javascriptjqueryhtmlcss
stdcerr
stdcerr

Reputation: 15658

very touchy onmouseout behaviour

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/

Upvotes: 3

Views: 182

Answers (2)

Fabrício Matté
Fabrício Matté

Reputation: 70189

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.

Upvotes: 1

Al W
Al W

Reputation: 476

Can you try with jquery's .mouseleave instead of the generic onmouseout?

http://api.jquery.com/mouseleave/

"The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element."

Upvotes: 0

Related Questions