JAVASCRIPT 23
HoverIntent.js Guest on 3rd May 2021 04:46:34 AM
  1. (function($){
  2.       /* hoverIntent by Brian Cherne */
  3.       $.fn.hoverIntent = function(f,g) {
  4.             // default configuration options
  5.             var cfg = {
  6.                   sensitivity: 7,
  7.                   interval: 100,
  8.                   timeout: 0
  9.             };
  10.             // override configuration options with user supplied object
  11.             cfg = $.extend(cfg, g ? { over: f, out: g } : f );
  12.  
  13.             // instantiate variables
  14.             // cX, cY = current X and Y position of mouse, updated by mousemove event
  15.             // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
  16.             var cX, cY, pX, pY;
  17.  
  18.             // A private function for getting mouse position
  19.             var track = function(ev) {
  20.                   cX = ev.pageX;
  21.                   cY = ev.pageY;
  22.             };
  23.  
  24.             // A private function for comparing current and previous mouse position
  25.             var compare = function(ev,ob) {
  26.                   ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
  27.                   // compare mouse positions to see if they've crossed the threshold
  28.                   if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
  29.                         $(ob).unbind("mousemove",track);
  30.                         // set hoverIntent state to true (so mouseOut can be called)
  31.                         ob.hoverIntent_s = 1;
  32.                         return cfg.over.apply(ob,[ev]);
  33.                   } else {
  34.                         // set previous coordinates for next time
  35.                         pX = cX; pY = cY;
  36.                         // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
  37.                         ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
  38.                   }
  39.             };
  40.  
  41.             // A private function for delaying the mouseOut function
  42.             var delay = function(ev,ob) {
  43.                   ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
  44.                   ob.hoverIntent_s = 0;
  45.                   return cfg.out.apply(ob,[ev]);
  46.             };
  47.  
  48.             // A private function for handling mouse 'hovering'
  49.             var handleHover = function(e) {
  50.                   // next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
  51.                   var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
  52.                   while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
  53.                   if ( p == this ) { return false; }
  54.  
  55.                   // copy objects to be passed into t (required for event object to be passed in IE)
  56.                   var ev = jQuery.extend({},e);
  57.                   var ob = this;
  58.  
  59.                   // cancel hoverIntent timer if it exists
  60.                   if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
  61.  
  62.                   // else e.type == "onmouseover"
  63.                   if (e.type == "mouseover") {
  64.                         // set "previous" X and Y position based on initial entry point
  65.                         pX = ev.pageX; pY = ev.pageY;
  66.                         // update "current" X and Y position based on mousemove
  67.                         $(ob).bind("mousemove",track);
  68.                         // start polling interval (self-calling timeout) to compare mouse coordinates over time
  69.                         if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
  70.  
  71.                   // else e.type == "onmouseout"
  72.                   } else {
  73.                         // unbind expensive mousemove event
  74.                         $(ob).unbind("mousemove",track);
  75.                         // if hoverIntent state is true, then call the mouseOut function after the specified delay
  76.                         if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
  77.                   }
  78.             };
  79.  
  80.             // bind the function to the two event listeners
  81.             return this.mouseover(handleHover).mouseout(handleHover);
  82.       };
  83.      
  84. })(jQuery);

Paste-bin is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.