Skip to content
Browse files

initial commit

  • Loading branch information...
1 parent 28921f3 commit 41d6d234ddd0a4126bd054155eafe55eda8255c9 @joshvermaire committed Dec 22, 2011
Showing with 83 additions and 282 deletions.
  1. +10 −0 README.md
  2. +0 −186 jquery.hoverIntent.html
  3. +73 −96 jquery.hoverIntent.js
View
10 README.md
@@ -1,5 +1,15 @@
hoverIntent jQuery Plug-in
==========================
+Refactored hoverIntent jQuery Plugin-in
+
+I will be changing hoverIntent to take advantage of some of the more sophisticated, recent abilities of jQuery. This will include binding, multiple or single callbacks, and delegation.
+
+If you're interested in helping with thoughts or ideas, please let me know.
+
+Josh Vermaire
+
+
+Original hoverIntent jQuery Plugin-in
hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It works like (and was derived from) [jQuery](http://jquery.com/)'s built-in [hover](http://api.jquery.com/hover/). However, instead of immediately calling the onMouseOver function, it waits until the user's mouse slows down enough before making the call.
View
186 jquery.hoverIntent.html
@@ -1,186 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="imagetoolbar" content="no" />
- <title>hoverIntent jQuery Plug-in</title>
- <link rel="stylesheet" type="text/css" href="/cherne.css" />
- <link rel="stylesheet" type="text/css" href="/cherne_print.css" media="print" />
-
- <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
- <script type="text/javascript" src="./jquery.hoverIntent.js"></script>
-
- <!-- DEMO CSS -->
- <style type="text/css" media="screen">
- /* styles for the demo examples -- NOT REQUIRED for hoverIntent to work, just for demo purposes */
- #RESOURCES #main .demo li { padding-bottom: 0; }
- ul.demo {display:block; width:100%; height:75px; padding:0; margin:0; background:#9cc; list-style-type:none;}
- ul.demo li {background:#fcc; display:block; width:25%; height:50px; padding:0; margin:0; float: left; position:relative; overflow:hidden; cursor:default; font-size:0.9em; line-height:1.1em;}
- ul.demo li.p2 {background:#ffc;}
- ul.demo li.p3 {background:#cfc;}
- ul.demo li.p4 {background:#ccf;}
- ul.demo li span { display:block; margin:4px; background:#eef; cursor:default;}
- </style>
-
- <!-- DEMO JS -->
- <script type="text/javascript" charset="utf-8">
- $(document).ready(function(){
- $("#demo1 li").hover(makeTall,makeShort);
- $("#demo2 li").hoverIntent(makeTall,makeShort);
- $("#demo3 li").hoverIntent({
- over: makeTall,
- timeout: 500,
- out: makeShort
- });
- }); // close document.ready
-
- function makeTall(){ $(this).animate({"height":75},200);}
- function makeShort(){ $(this).animate({"height":50},200);}
- </script>
-
-</head>
-
-<body id="RESOURCES">
-
-<div id="pageHeader">
- <ul id="nav1">
- <li><a href="/">cherne.net</a></li>
- <li><a href="/brian/pictures/">Pictures</a></li>
- <li><a href="/brian/resume/">Resume</a></li>
- <li><a href="/brian/portfolio/">Portfolio</a></li>
- <li><a href="/brian/resources/" class="current">Resources</a></li>
- </ul>
- <h1>hoverIntent jQuery Plug-in</h1>
-</div>
-
-<div id="pageContent">
-
- <div id="main">
-
- <noscript><p><em>If you can see this message <strong>JavaScript is disabled</strong>. This plug-in requires JavaScript to be enabled in order for the examples to work. (This is really a note to myself so the next time I look at my web site with JavaScript accidentally turned off I don't freak out and wonder why it's not working)</em></p></noscript>
-
- <h2>What is hoverIntent?</h2>
- <p>hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It works like (and was derived from) <a href="http://jquery.com/">jQuery</a>'s built-in <a href="http://api.jquery.com/hover/">hover</a>. However, instead of immediately calling the onMouseOver function, it waits until the user's mouse slows down enough before making the call.</p>
- <p>Why? To delay or prevent the accidental firing of animations or ajax calls. Simple timeouts work for small areas, but if your target area is large it may execute regardless of intent.</p>
- <p class="download"><a href="jquery.hoverIntent.js">Download hoverIntent r6 (fully-commented, uncompressed)</a></p>
- <p class="download"><a href="jquery.hoverIntent.minified.js">Download hoverIntent r6 (minified)</a></p>
- <p>hoverIntent r6 (2011) has all the same functionality of r5 (2007) except that the Google Chrome defect (<a href="#defects">known defects</a>) is fixed once you upgrade to jQuery 1.5.1.</p>
-
-
- <h2>Translations</h2>
- <p><a href="http://www.designcontest.com/show/jquery.hoverIntent-be" hreflang="be-BY">Беларуская</a> courtesy Martha Ruszkowski</p>
-
-
- <h2>Examples</h2>
-
- <h3>jQuery's hover (for reference)</h3>
- <pre>$("#demo1 li").hover( makeTall, makeShort )</pre>
- <ul class="demo" id="demo1">
- <li class="p1">&nbsp;</li>
- <li class="p2">&nbsp;</li>
- <li class="p3">&nbsp;</li>
- <li class="p4"><span>hover ignores over/out events from children</span></li>
- </ul>
- <p>jQuery's built-in hover calls onMouseOver/onMouseOut functions immediately.</p>
-
- <h3>hoverIntent as hover replacement</h3>
- <pre>$("#demo2 li").hoverIntent( makeTall, makeShort )</pre>
- <ul class="demo" id="demo2">
- <li class="p1">&nbsp;</li>
- <li class="p2">&nbsp;</li>
- <li class="p3">&nbsp;</li>
- <li class="p4"><span>hoverIntent also ignores over/out events from children</span></li>
- </ul>
- <p>hoverIntent is interchangeable with jQuery's hover. It can use the same exact onMouseOver and onMouseOut functions and it passes the same <strong>this</strong> and <strong>event</strong> objects to those functions.</p>
-
-
- <h3>hoverIntent with configuration object</h3>
-<pre>
-var config = {
- over: makeTall, <span>// function = onMouseOver callback (REQUIRED)</span>
- timeout: 500, <span>// number = milliseconds delay before onMouseOut</span>
- out: makeShort <span>// function = onMouseOut callback (REQUIRED)</span>
-};
-
-$("#demo3 li").hoverIntent( config )
-</pre>
- <ul class="demo" id="demo3">
- <li class="p1">&nbsp;</li>
- <li class="p2">&nbsp;</li>
- <li class="p3">&nbsp;</li>
- <li class="p4">&nbsp;</li>
- </ul>
- <p>To override the default configuration of hoverIntent, pass it an object as the first (and only) parameter. The object must contain "over" and "out" functions, in addition to any other options you'd like to override.</p>
-
-
- <h2>Basic Configuration Options</h2>
- <p>The "timeout" delay (by default set to 0) will mostly likely be the one you'll want to override. The "over" and "out" functions are required but nothing prevents you from sending an empty function(){} to either.</p>
-
- <h3>over:</h3>
- <p>Required. The function you'd like to call onMouseOver. Your function receives the same "this" and "event" objects as it would from jQuery's hover method.</p>
-
- <h3>timeout:</h3>
- <p>A simple delay, in milliseconds, before the "out" function is called. If the user mouses back over the element before the timeout has expired the "out" function will not be called (nor will the "over" function be called). This is primarily to protect against sloppy/human mousing trajectories that temporarily (and unintentionally) take the user off of the target element... giving them time to return. <em>Default timeout: 0</em></p>
-
- <h3>out:</h3>
- <p>Required. The function you'd like to call onMouseOut. Your function receives the same "this" and "event" objects as it would from jQuery's hover method. Note, hoverIntent will only call the "out" function if the "over" function has been called on that same run.</p>
-
-
- <h2>Advanced Configuration Options</h2>
- <p>When choosing the default settings for hoverIntent I tried to find the best possible balance between responsiveness and frequency of false positives. Modify these if you are brave, test tirelessly, and completely understand what you are doing.</p>
-
- <h3>sensitivity:</h3>
- <p>If the mouse travels fewer than this number of pixels between polling intervals, then the "over" function will be called. With the minimum sensitivity threshold of 1, the mouse must not move between polling intervals. With higher sensitivity thresholds you are more likely to receive a false positive. <em>Default sensitivity: 7</em></p>
-
- <h3>interval:</h3>
- <p>The number of milliseconds hoverIntent waits between reading/comparing mouse coordinates. When the user's mouse first enters the element its coordinates are recorded. The soonest the "over" function can be called is after a single polling interval. Setting the polling interval higher will increase the delay before the first possible "over" call, but also increases the time to the next point of comparison. <em>Default interval: 100</em></p>
-
-
- <h2>Notice of DOM Manipulation</h2>
- <p>hoverIntent adds two custom attributes to every DOM element it's assigned to. For example: &lt;li hoverIntent_t="" hoverIntent_s=""&gt; </p>
- <ul>
- <li>hoverIntent_t is the polling interval timer, or the mouseOut timer.</li>
- <li>hoverIntent_s stores the state to prevent unmatched function calls.</li>
- </ul>
- <p>Timers are stored as integers, so there should not be any <a href="http://msdn.microsoft.com/library/en-us/IETechCol/dnwebgen/ie_leak_patterns.asp">trouble with memory leaks</a>. hoverIntent state is also stored as an integer.</p>
-
-
- <h2 id="defects">Known Defects</h2>
- <p>hoverIntent r5 suffers from <a href="http://code.google.com/p/chromium/issues/detail?id=68629">a defect in Google Chrome that improperly triggers mouseout when entering a child input[type="text"] element</a>. hoverIntent r6 uses the same mouseenter/mouseleave special events as jQuery's built-in hover, and jQuery 1.5.1 patched this issue. Thanks to Colin Stuart for tipping me off about this and for providing isolated code to demonstrate/test.</p>
- <p id="chrome9defect" style="background:#eee;margin-bottom:1em;">This page uses jQuery 1.5.1+ and hoverIntent r6, so when your cursor goes over the text input nothing should change (it should continue to read "enter parent" because you are still over this paragraph). <br/><input type="text" value=""/><br/> However, if you were using Google Chrome and if this page were using an older version of jQuery or hoverIntent, moving the cursor over the text input would improperly trigger the mouseout event, and the value would change to "leave parent".</p>
- <script type="text/javascript">
- function enter(e){$("input", e.target).val("enter parent");}
- function leave(e){$("input", e.target).val("leave parent");}
- $("#chrome9defect").hoverIntent(enter,leave);
- </script>
- <p>If you place an element with onMouseOut event listeners flush against the edge of the browser chrome, sometimes Internet Explorer does not trigger an onMouseOut event immediately if your mouse leaves the document. hoverIntent does not correct for this.</p>
- <p>jQuery's hover can take <a href="http://api.jquery.com/hover/#hover1">both a handlerIn and a handlerOut</a> <strong>or</strong> <a href="http://api.jquery.com/hover/#hover2">just a handlerIn</a>. The current version of hoverIntent requires both handlerIn and handlerOut <strong>or</strong> a single configuration object. It was not designed to take just a handlerIn like hover. This will be addressed in a future release.</p>
- <p>Please email me ( <a href="mailto:%62%72%69%61%6E%40%63%68%65%72%6E%65%2E%6E%65%74">&#98;&#114;&#105;&#97;&#110;&#64;&#99;&#104;&#101;&#114;&#110;&#101;&#46;&#110;&#101;&#116;</a> ) if you have questions or would like to notify me of any defects. I will tweet about any updates from <a href="http://twitter.com/#!/briancherne">@briancherne</a> using the tags #hoverIntent #jQuery.</p>
-
-
- <h2>The Future of hoverIntent</h2>
- <p>hoverIntent r7 (in development) will be backwards compatible with all current implementations and include hoverIntent custom events.</p>
-
-
- <h2>Release History</h2>
- <ul>
- <li>r7 = In development. Adding custom events.</li>
- <li>r6 = Current stable release. Updated to correct for Google Chrome defect.</li>
- <li>r5 = Added state to prevent unmatched function calls. This release (and previous releases) suffers from <a href="http://code.google.com/p/chromium/issues/detail?id=68629">a defect in Google Chrome that improperly triggers mouseout when entering a child input[type=text] element</a>.</li>
- <li>r4 = Fixed polling interval timing issue (now uses a self-calling timeout to avoid interval irregularities).</li>
- <li>r3 = Developer-only release for debugging.</li>
- <li>r2 = Added timeout and interval references to DOM object -- keeps timers separate from each other. Added configurable options. Added timeout option to delay onMouseOut function call. Fixed two-interval mouseOver bug (now setting pX and pY onMouseOver instead of hardcoded value).</li>
- <li>r1 = Initial release to jQuery discussion forum for feedback.</li>
- </ul>
-
- </div><!-- close #main -->
-
-</div><!-- close #pageContent -->
-
-<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
-<script type="text/javascript">
- var pageTracker = _gat._getTracker("UA-3082227-1");
- pageTracker._trackPageview();
-</script>
-</body>
-</html>
View
169 jquery.hoverIntent.js
@@ -1,106 +1,83 @@
/**
-* hoverIntent is similar to jQuery's built-in "hover" function except that
-* instead of firing the onMouseOver event immediately, hoverIntent checks
-* to see if the user's mouse has slowed down (beneath the sensitivity
-* threshold) before firing the onMouseOver event.
-*
-* hoverIntent r6 // 2011.02.26 // jQuery 1.5.1+
+* This fork of hoverIntent is building on Brian Cherne's original work.
+* Find out more about his work at:
* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
*
* hoverIntent is currently available for use in all personal or commercial
* projects under both MIT and GPL licenses. This means that you can choose
* the license that best suits your project, and use it accordingly.
*
-* // basic usage (just like .hover) receives onMouseOver and onMouseOut functions
-* $("ul li").hoverIntent( showNav , hideNav );
+* current usage only takes one callback into consideration. In order to
+* create a method that takes into consideration the previous onMouseOver
+* and onMouseOut functions, use event.originalEvent.type in the callback
+* and listen for mouseover and mouseout events.
*
-* // advanced usage receives configuration object only
-* $("ul li").hoverIntent({
-* sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
-* interval: 100, // number = milliseconds of polling interval
-* over: showNav, // function = onMouseOver callback (required)
-* timeout: 0, // number = milliseconds delay before onMouseOut function call
-* out: hideNav // function = onMouseOut callback (required)
-* });
+* $("ul li").bind('hoverIntent', callback);
+* You can extend the default configuration by modifying the object
+* $.event.special.hoverIntent.
*
-* @param f onMouseOver function || An object with configuration options
-* @param g onMouseOut function || Nothing (use configuration options object)
-* @author Brian Cherne brian(at)cherne(dot)net
*/
-(function($) {
- $.fn.hoverIntent = function(f,g) {
- // default configuration options
- var cfg = {
- sensitivity: 7,
- interval: 100,
- timeout: 0
- };
- // override configuration options with user supplied object
- cfg = $.extend(cfg, g ? { over: f, out: g } : f );
-
- // 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).unbind("mousemove",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).bind("mousemove",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).unbind("mousemove",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 );}
- }
- };
-
- // bind the function to the two event listeners
- return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover);
- };
-})(jQuery);
+$(document).ready(function() {
+ var cX, cY, pX, pY;
+ return $.event.special.hoverIntent = {
+ cfg: {
+ sensitivity: 7,
+ interval: 100,
+ timeout: 0
+ },
+ setup: function() {
+ var handler;
+ handler = function(event) {
+ var applyCallback, args, cfg, compare, delay, ob, track;
+ ob = this;
+ cfg = jQuery.event.special.hoverIntent.cfg;
+ args = arguments;
+ applyCallback = function() {
+ event.type = 'hoverIntent';
+ return jQuery.event.handle.apply(ob, args);
+ };
+ delay = function() {
+ ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
+ ob.hoverIntent_s = 0;
+ return applyCallback();
+ };
+ track = function(event) {
+ cX = event.pageX;
+ return cY = event.pageY;
+ };
+ compare = function() {
+ ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
+ if ((Math.abs(pX - cX) + Math.abs(pY - cY)) < cfg.sensitivity) {
+ $(ob).unbind("mousemove", track);
+ ob.hoverIntent_s = 1;
+ return applyCallback();
+ } else {
+ pX = cX;
+ pY = cY;
+ return ob.hoverIntent_t = setTimeout(compare, cfg.interval);
+ }
+ };
+ if (ob.hoverIntent_t) {
+ ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
+ }
+ if (event.type === "mouseenter") {
+ pX = event.pageX;
+ pY = event.pageY;
+ $(ob).bind("mousemove", track);
+ if (ob.hoverIntent_s !== 1) {
+ return ob.hoverIntent_t = setTimeout(compare, cfg.interval);
+ }
+ } else {
+ $(ob).unbind("mousemove", track);
+ if (ob.hoverIntent_s === 1) {
+ return ob.hoverIntent_t = setTimeout(delay, cfg.timeout);
+ }
+ }
+ };
+ return $(this).bind('mouseenter', handler).bind("mouseleave", handler);
+ },
+ teardown: function(namespaces) {
+ return $(this).unbind('mouseenter', $(this)).unbind("mouseleave", $(this));
+ }
+ };
+ });

0 comments on commit 41d6d23

Please sign in to comment.
Something went wrong with that request. Please try again.