jQuery hover queue problem

JavaScript
1

Hi,

I am having problems with the hover queue, see
bldd.nl/prototypes/megamenu/test12.html

Now i found this plugin http://www.2meter3.de/code/hoverFlow/

but assumes you are animating $(this)

i my case a div triggers another div to animate

 $("#nav-container").hover(function() {
                        $("#dropmenu").slideToggle("fast");
                }, function() {
                        $("#dropmenu").slideToggle("fast");
                });

but the hoverflow doesn´t work


$("#nav-container").hover(function(e) {
                        $(this)("#dropmenu").hoverFlow(e.type, {top:100}, 'fast');
                }, function() {
                        $(this)("#dropmenu").hoverFlow(e.type, {top:0}, 'fast');
                        
                });

www.bldd.nl/prototypes/megamenu/test14.html

Any tips how to fix this

2

I don’t see why you need hoverFlow

You can just do


$("#mainmenu").hover( 
 function() { $("#dropmenu").stop().slideDown("fast"); },
 function() { $("#dropmenu").stop().slideUp("fast"); }
);
3

tx, but i already tried that
www.bldd.nl/prototypes/megamenu/test13.html

but it doesn´t work correctly.

might have to do with not using $(this)

4

First of all, it has nothing to do with not using $(this)

With $(this) , jQuery works on this, a dom reference, while in $(“#dropmenu”) jQuery works on the dom element which id is “dropmenu”.

To make it more clear


$("#somenode").hover( function() {
  // within this function, calling $(this).doSomething() is syntactically equal to calling $("#somenode").doSomething(), i.e., has the same effect
  // So:
  $(this).doSomething();
  // has **exactly the same effect** as
  $("#somenode").doSomething();
});

To return your problem, all I can see is the height problem (mouse out and mouse over really fast and the height is incorrect). To fix this use:


$("#mainmenu").hover(
 function() { $("#dropmenu").stop().slideDown("fast"); },
 function() { $("#dropmenu").stop().slideUp("fast", function() { $(this).css('height','auto')} );
});
5

tx for the $(this) explanation.

About your solution:
www.bldd.nl/prototypes/megamenu/test13.html

The grey dropdown menu seems to shrink a bit. It’s height is equal to the highest submenu. Orginal i had a 20px bottom padding.

$(this).css('height','auto')

is the height of #dropmenu, right??

6

btw test13.html doesn’t work in iE7 or ie6 it drives me nuts :frowning:

7

That’s probably because #nav-container has position relative, and as such it is not part of the “normal flow” of the webpage.
As a result, it has no height, and IE can not determine when a user hovers that element, because it doesn’t know where that element is.

Try $(‘#mainmenu’).hover( … ) instead.

8

Yes, jQuery animates the padding as well.
Try $(this).css({‘height’: ‘auto’, ‘padding-bottom’: 20}); instead of $(this).css(‘height’,‘auto’);

And yes, $(this).css(‘height’,‘auto’); sets the height of $(‘#dropmenu’) :slight_smile: