jQuery - unbind or rebind hoverIntent()?

Question

I have a menu bar that displays a set of categories in an upper row.

One of the categories has a set of sub-categories.

I have a hoverIntent setup so that it will slideDown the submenu, and slideUp when the mouse leaves.

However, if I am viewing a page in this category, I would like the submenu to be visible with the active category highlighted. I would also like to make sure that when the submenu is interacted with via the mouse, it does not slideUp again once the mouse leaves.

I have tried redeclaring the hoverIntent function on the element in this page but it does not work, it is still using the previous binding. Is there any way to unbind the previous hoverIntent and make sure it uses the new one?

Litigation

you can try to have two classes, and bind one event to each of them. Then you'll just have to add/remove the right class on the concerned elements. – Jefferson

Answer 1

to bind and unbind the hoverIntent you should do:

// bind the hoverIntent
$("#demo1 li").hoverIntent(makeTall, makeShort)
// unbind the hoverIntent
$("#demo1 li").unbind("mouseenter").unbind("mouseleave");
$("#demo1 li").removeProp('hoverIntent_t');
$("#demo1 li").removeProp('hoverIntent_s');
// rebind the hoverIntent
$("#demo1 li").hoverIntent(makeTall, makeShort)

Italianism

Thanks man! I was searching for that, just a question.. What does removeProp "hoverIntent_t" makes? – Grubman

Answer 2

I think this is a more complete answer. It does the following:

• Any active timer is cleaned up.
• All events are cleared
• All object properties are cleared
• Uses common jQuery syntax and looks like native part of hoverIntent

Code:

(function($) {
   if (typeof $.fn.hoverIntent === 'undefined')
     return;

   var rawIntent = $.fn.hoverIntent;

   $.fn.hoverIntent = function(handlerIn,handlerOut,selector) 
    {
      // If called with empty parameter list, disable hoverintent.
      if (typeof handlerIn === 'undefined')
      {
        // Destroy the time if it is present.
        if (typeof this.hoverIntent_t !== 'undefined') 
        { 
          this.hoverIntent_t = clearTimeout(this.hoverIntent_t); 
        }
        // Cleanup all hoverIntent properties on the object.
        delete this.hoverIntent_t;
        delete this.hoverIntent_s;

        // Unbind all of the hoverIntent event handlers.
        this.off('mousemove.hoverIntent,mouseenter.hoverIntent,mouseleave.hoverIntent');

        return this;
      }  

      return rawIntent.apply(this, arguments);
    };  
})(jQuery);

Smitten

I had to wrap the content of the function in a this.each call to be able to call it on collections: gist.github.com/raulferras/10458877 – Acord

Nicely done. I've started a github request to get an unbind/destroy method added to the source code, as this seems like something that is consistent with good plugin behavior: github.com/briancherne/jquery-hoverIntent/issues/43 – Insistence

Answer 3

From jQuery docs: "In the simplest case, with no arguments, .unbind() removes all handlers attached to the elements"

Thaxton

Answer 4

I used:

var elements = $("#main_nav li, #breadcrumb_ul li");
elements.unbind('mouseover mouseout');
delete $(elements).hoverIntent_t;
delete $(elements).hoverIntent_s;

Eellike