Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I don't like hoverIntent in the new flyout menus or admin bar; to me, it makes my page feel slow.

What would be the Wordpress-friendly way to disable hoverIntent (or change its options) in the new Wordpress admin and toolbar?

The only place I see hoverIntent in the Admin page source is here:

<script type='text/javascript' src='http://mysite.com/wp-admin/load-scripts.php?c=1&amp;load=admin-bar,hoverIntent,common,jquery-color,suggest,inline-edit-post,jquery-form&amp;ver=26e0371f31adb44206d9f999828c9182'></script>

share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

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.

Admin Bar
The admin-bar.js file sets up Hover Intent on the top bar here on line 13 of admin-bar.js.

Admin Menu
The common.js file sets up Hover Intent on the side bar menu on line 185 of common.js.

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.. :)

share|improve this answer
    
Now i've written the code, i'm actually enjoying the menus without HoverIntent, think i'll keep it active.. :) –  t31os Dec 13 '11 at 17:30
    
I realise now this doesn't the case where you have the admin bar frontside to, i'll be happy to update the code to cover that case if it's required though, just let me know. –  t31os Dec 14 '11 at 1:28
    
Yes—could you post how to disable it for the front-end admin bar too? This works like a charm in the admin. –  supertrue Dec 22 '11 at 3:47
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.