Adding Hover Intent to Existing Javascript Code

Question

I know there are a million of these on here but I have sifted through them for days and I can not get this code to work.

I am trying to add hoverIntent to an existing Wordpress theme, Atahualpa. I love the theme but I wish the menu's would stick around for a bit. This is quite a GUI usability issue with complicated page structures.

I pretty new to Javascript so I have difficulty knowing if my syntax etc is OK. I hope it is that easy. Here is where I am at.

I have loaded the .js on my website and have used Firebug console to make sure it is being loaded.

I have enabled "menu animations" in the theme. This has some logic to point it to the original code, which is this.

/* JQUERY */
jQuery(document).ready(function(){ 
<?php if ( $bfa_ata['animate_page_menu_bar'] == "Yes" AND strpos($bfa_ata['configure_header'],'%page')!== FALSE ) { ?>
    jQuery("#rmenu2 li.rMenu-expand").hover(function(){
    jQuery(this).find('ul.rMenu-ver:first').css({"display":"block","position":"absolute"});
    jQuery(this).find('ul.rMenu-ver:first li').css({"display":"none"}).slideDown(500);  
  },function() {
    jQuery(this).find('ul.rMenu-ver:first').css("display","block");
    jQuery(this).find('ul.rMenu-ver:first li').css("display","block").slideUp(300);
    jQuery(this).find('ul.rMenu-ver:first').slideUp(300);
   });

After looking at lots of different examples I have changed the code to the following. I would like to keep the animation affects (but they can go if they are a PITA) and I would like a little control over the delay. Most importantly though I need the hoverIntent to work because the complicated page structures are difficult to navigate.

/* JQUERY */
$(document).ready(function(){ 
<?php if ( $bfa_ata['animate_page_menu_bar'] == "Yes" AND strpos($bfa_ata['configure_header'],'%page')!== FALSE ) { ?>
    $("#rmenu2 li.rMenu-expand").hoverIntent({
    over: function(){
    jQuery(this).find('ul.rMenu-ver:first').css({"display":"block","position":"absolute"});
    jQuery(this).find('ul.rMenu-ver:first li').css({"display":"none"}).slideDown(500);
    $(this).children('a:first').addClass("hov");    
  },
  timeout: 500,
  out: function() {
    jQuery(this).find('ul.rMenu-ver:first').css("display","block");
    jQuery(this).find('ul.rMenu-ver:first li').css("display","block").slideUp(300);
    jQuery(this).find('ul.rMenu-ver:first').slideUp(300);
    $(this).children('a:first').removeClass("hov");
   });

This code is broken. The menu reverts to its default CSS style so it still functions, but the animations are gone and their is 0 delay when the mouse moves off the menu.

Please help! What am I doing wrong?

Answer 1

I've reached a limited success, based in http://kv5r.com/wordpress-and-hoverintent/ and your own code.

This is the code to append in functions.php for atahualpa:

function enq_hoverIntent() { wp_enqueue_script('hoverIntent'); }
add_action('wp_enqueue_scripts', 'enq_hoverIntent');

function init_hoverIntent() { ?>
<script type='text/javascript'>
  jQuery(document).ready(function(){
    jQuery('#rmenu2 > li.rMenu-expand').hoverIntent({
      over : navover,
      out : navout,
      timeout : 500
    });
    function navover(){
        jQuery(this).find('ul.rMenu-ver:first')
                .css({"display":"block","position":"absolute"});
        jQuery(this).find('ul.rMenu-ver:first li')
                .css({"display":"none"}).show();
    }
    function navout(){
        jQuery(this).find('ul.rMenu-ver:first')
                .css("display","block");
        jQuery(this).find('ul.rMenu-ver:first li')
                .css("display","block").hide();
        jQuery(this).find('ul.rMenu-ver:first')
                .hide();
    }
  });
</script>
<?php }
add_action('wp_head', 'init_hoverIntent');

Note that I've only applied the hoverintent to the first level of submenus (#rmenu2 > li.rMenu-expand). You can change it at your own.

I've added the following CSS to the general rules also, in order to disable the default behaviour at the main level of the menu.

#rmenu2>li:hover>ul{display:none;}