HoverIntent plugin to open menu flyout and keep it open if the cursor is still over the flyout
Hello,
I am using the HoverIntent plugin. For the most part, I rather like it. It seems to be well written and provide some solid functionality. My issue is largely my lack of a solid JavaScript/jQuery background. I'm not sure of the best way to go about making the integration of the HoverIntent plugin and the jQuery Menu work as my boss wants.
A real brief idea of what we need; mouse over an element and a corresponding menu flyout opens. If you do not mouse over the menu flyout, it closes after a few seconds. If you mouse over it, it should remain open until it no longer has focus from the mouse (mouseleave or such).
I have the code 'mostly' working as needed. However, I can't figure out how to keep the menu flyout open if the mouse cursor has focus on it.
Below is some of the code I am using. When you mouse over and stop on .oval_DG1 or drag the cursor slowly enough to trigger the HoverIntent mouseover event, it runs showMenu on the element DG1, which then opens up a regular jQuery menu flyout.
We need it to auto-close the menu flyout if the cursor never goes over it (that works as desired).
We also want it to NOT close the menu flyout if the cursor remains over the menu flyout. By default, it will close the menu at the set timeout. I need to make stay open so that the user can sort through the levels of menus and find the item they need (there are potentially hundreds of levels in each menu flyout).
I'm not nearly good enough with JavaScript or jQuery to know where I need to make the change so that if the mouse cursor still has focus on element DG1, that the mouseout/menu close event isn't triggered.
Thank you for any help you can provide.
Beginning of function to call HoverIntent
*******************************************************************************************************
- $(document).ready(function() {
var hiConfig = '';
hiConfig = {
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
interval: 200, // number = milliseconds for onMouseOver polling interval
timeout: 400, // number = milliseconds delay before onMouseOut
over: function()
{
showMenu("DG1"); // open the jQuery menu flyout
$("#DG1").delay(5000).fadeOut('slow'); // time in milliseconds after which the menu will close
}, // function = onMouseOver callback (REQUIRED)
out: function()
{
$("#DG1").delay(10).fadeOut('fast'); // time in milliseconds after which the menu will close
}
// function = onMouseOut callback (REQUIRED)
}
$('.oval_DG1').hoverIntent(hiConfig)
});
*******************************************************************************************************
End of HoverIntent function call
Beginning of HoverIntent plugin source code
*******************************************************************************************************
- /*!
* hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
* http://cherne.net/brian/resources/jquery.hoverIntent.html
*
* You may use hoverIntent under the terms of the MIT license. Basically that
* means you are free to use hoverIntent as long as this header is left intact.
* Copyright 2007, 2013 Brian Cherne
*/
/* hoverIntent is similar to jQuery's built-in "hover" method except that
* instead of firing the handlerIn function immediately, hoverIntent checks
* to see if the user's mouse has slowed down (beneath the sensitivity
* threshold) before firing the event. The handlerOut function is only
* called after a matching handlerIn.
*
* // basic usage ... just like .hover()
* .hoverIntent( handlerIn, handlerOut )
* .hoverIntent( handlerInOut )
*
* // basic usage ... with event delegation!
* .hoverIntent( handlerIn, handlerOut, selector )
* .hoverIntent( handlerInOut, selector )
*
* // using a basic configuration object
* .hoverIntent( config )
*
* @param handlerIn function OR configuration object
* @param handlerOut function OR selector for delegation OR undefined
* @param selector selector OR undefined
* @author Brian Cherne <brian(at)cherne(dot)net>
*/
(function($) {
$.fn.hoverIntent = function(handlerIn,handlerOut,selector) {
// default configuration values
var cfg = {
interval: 100,
sensitivity: 7,
timeout: 0
};
if ( typeof handlerIn === "object" ) {
cfg = $.extend(cfg, handlerIn );
} else if ($.isFunction(handlerOut)) {
cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } );
} else {
cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } );
}
// instantiate variables
// cX, cY = current X and Y position of mouse, updated by mousemove event
// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
var cX, cY, pX, pY;
// A private function for getting mouse position
var track = function(ev) {
cX = ev.pageX;
cY = ev.pageY;
};
// A private function for comparing current and previous mouse position
var compare = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
// compare mouse positions to see if they've crossed the threshold
if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
$(ob).off("mousemove.hoverIntent",track);
// set hoverIntent state to true (so mouseOut can be called)
ob.hoverIntent_s = 1;
return cfg.over.apply(ob,[ev]);
} else {
// set previous coordinates for next time
pX = cX; pY = cY;
// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
}
};
// A private function for delaying the mouseOut function
var delay = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s = 0;
return cfg.out.apply(ob,[ev]);
};
// A private function for handling mouse 'hovering'
var handleHover = function(e) {
// copy objects to be passed into t (required for event object to be passed in IE)
var ev = jQuery.extend({},e);
var ob = this;
// cancel hoverIntent timer if it exists
if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
// if e.type == "mouseenter"
if (e.type == "mouseenter") {
// set "previous" X and Y position based on initial entry point
pX = ev.pageX; pY = ev.pageY;
// update "current" X and Y position based on mousemove
$(ob).on("mousemove.hoverIntent",track);
// start polling interval (self-calling timeout) to compare mouse coordinates over time
if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
// else e.type == "mouseleave"
} else {
// unbind expensive mousemove event
$(ob).off("mousemove.hoverIntent",track);
// if hoverIntent state is true, then call the mouseOut function after the specified delay
if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
}
};
// listen for mouseenter and mouseleave
return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector);
};
})(jQuery);
*******************************************************************************************************
End of HoverIntent plugin source code