How to disable hoverIntent in WordPress 3.3 admin

1 comment

1. Where is Hover Intent attached to the menus in WordPress core?

   The following 2 files go about attaching hoverIntent as click handlers for the bar and menu respectively.

   How to remove HoverIntent from both the bar and menu

   WordPress attaches the hoverintent handlers for the bar and menu on document ready, so if we’re going to rebind those click handlers we need to make sure we do so after WordPress has done it’s JS business.

   The easiest way to ensure our script loads at the right time is to fire an enqueue in the admin and setting admin-bar and common scripts as dependancies.

   Enqueue in admin head setting required dependancies

   Attach a callback to admin_head and fire an enqueue with the two required dependancies.

   add_action( 'admin_head', 'disable_admin_hoverintent' );
   
   function disable_admin_hoverintent() {
       wp_enqueue_script( 
           // Script handle
           'disable-admin-hoverintent', 
           // Script URL
           get_bloginfo( 'stylesheet_directory' ).'/disableadminhi.js', 
           // Script dependancies
           array( 'admin-bar', 'common' ) 
       );
   }
   

   Create the custom Javascript file

   Create a file in your theme’s folder and name it to match the file in the above enqueue, in my example i’ve used the name disableadminhi.js, but you’re welcome to adjust that and/or repoint the enqueue to somewhere else if you don’t want to place it in the theme’s folder.

   Javascript for disableadminhi.js

   jQuery(document).ready(function($){
       $('#wpadminbar').find('li.menupop').hover( function(){
           $(this).toggleClass('hover');
       });
       // Bring menu into scope(defined by common.js in wordpress)
       var menu;
       // Copy of the function from common.js, just without hoverIntent
       $('li.wp-has-submenu', menu).hover(
           function(e){
               var b, h, o, f, m = $(this).find('.wp-submenu'), menutop, wintop, maxtop;
   
               if ( !$(document.body).hasClass('folded') && $(this).hasClass('wp-menu-open') )
                   return;
   
               menutop = $(this).offset().top;
               wintop = $(window).scrollTop();
               maxtop = menutop - wintop - 30; // max = make the top of the sub almost touch admin bar
   
               b = menutop + m.height() + 1; // Bottom offset of the menu
               h = $('#wpwrap').height(); // Height of the entire page
               o = 60 + b - h;
               f = $(window).height() + wintop - 15; // The fold
   
               if ( f < (b - o) )
                   o = b - f;
   
               if ( o > maxtop )
                   o = maxtop;
   
               if ( o > 1 )
                   m.css({'marginTop':'-'+o+'px'});
               else if ( m.css('marginTop') )
                   m.css({'marginTop':''});
   
               m.addClass('sub-open');
           },
           function(){
               $(this).find('.wp-submenu').removeClass('sub-open');
           }
       );
   });
   

   Enjoy faster navigation!

   Hope that helps.. 🙂

   Log in to Reply