Hover Intent JavaScript

hoverIntent, mega menu, javascript

[bearduk]

Hi all,

I'm having real problems calling hoverIntent to show a div.
My code is below. I'm basically calling the 'megaHoverOver' for the hoverIntent over state.

$("ul.topNav li #ddContainer").css({'opacity':'0'});

is working as it should (it hides all the #ddContainers on page load)

However it's the second piece

$("ul.topNav li").hoverIntent(config);

that appears to be doing nothing.

Could anyone advise?

<script type="text/javascript">
$(document).ready(function() {

function megaHoverOver(){
$(this).find("#ddContainer").stop().fadeTo('fast', 1).show();
}


function megaHoverOut(){ 
 $(this).find("#ddContainer").stop().fadeTo('fast', 0, function() {
 $(this).hide(); 
 });
}


var config = { 
 sensitivity: 2, // number = sensitivity threshold (must be 1 or higher) 
 interval: 100, // number = milliseconds for onMouseOver polling interval 
 over: megaHoverOver, // function = onMouseOver callback (REQUIRED) 
 timeout: 500, // number = milliseconds delay before onMouseOut 
 out: megaHoverOut // function = onMouseOut callback (REQUIRED) 
};

$("ul.topNav li #ddContainer").css({'opacity':'0'});
$("ul.topNav li").hoverIntent(config);



});
</script>

[Tommybs]

Hmmm, Is your browser throwing any errors?

It looks to me like you're setting the opacity of elements to 0. Have you viewed source to see if the opacity is what's causing the issue? e.g is the div actually display block now but its opacity is still 0.

can you change
$("ul.topNav li #ddContainer").css({'opacity':'0'});
to
$("ul.topNav li #ddContainer").hide()l

and use fadeIn and fadeOut instead of fadeTo?

[bearduk]

I never go to the bottom of this.

If I substituted

.hoverIntent

with

.hover

then it works fine. Strange. I think the other thing I could maybe do is swap the load order of jQuery and hoverIntent.js

Luckily, I only need a CSS drop down now so I'll leave this problem until a later time !

Thanks for your comments, much appreciated.

C