Adding HoverIntent to jQuery UI Tabs

Question

I am attempting to add HoverIntent to jQuery tabs. However it is not working, my code is bellow. Any tips? Thank you.

Code taken straight from jQuery UI website. (Doesnt't Work)

source: http://jqueryui.com/accordion/#hoverintent

-- JS --

$( "#tabs" ).tabs({
      event: "click hoverintent"
    });

var cfg = ($.hoverintent = {
    sensitivity: 7,
    interval: 100
  });

  $.event.special.hoverintent = {
    setup: function() {
      $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    teardown: function() {
      $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    handler: function( event ) {
      var that = this,
        args = arguments,
        target = $( event.target ),
        cX, cY, pX, pY;

      function track( event ) {
        cX = event.pageX;
        cY = event.pageY;
      };
      pX = event.pageX;
      pY = event.pageY;
      function clear() {
        target
          .unbind( "mousemove", track )
          .unbind( "mouseout", arguments.callee );
        clearTimeout( timeout );
      }
      function handler() {
        if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
          clear();
          event.type = "hoverintent";
          event.originalEvent = {};
          jQuery.event.handle.apply( that, args );
        } else {
          pX = cX;
          pY = cY;
          timeout = setTimeout( handler, cfg.interval );
        }
      }
      var timeout = setTimeout( handler, cfg.interval );
      target.mousemove( track ).mouseout( clear );
      return true;
    }
  };

why doesn't this work. Sorry, I thought the question was clear. I want to navigate between tabs with hover intent. — Eric Goncalves, Mar 11 '13 at 19:57

score 1 · Accepted Answer · answered Mar 11 '13 at 20:11

Needed to call javascript onDomready rather then onLoad. And add jQuery Migrate after jQuery in order for HoverIntent to Work.

Updated Code:

$(function() {
$( "#tabs" ).tabs({
event: "click hoverintent"
});
});
var cfg = ($.hoverintent = {
sensitivity: 7,
interval: 100
});
$.event.special.hoverintent = {
setup: function() {
$( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
},
teardown: function() {
$( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
},
handler: function( event ) {
var that = this,
args = arguments,
target = $( event.target ),
cX, cY, pX, pY;
function track( event ) {
cX = event.pageX;
cY = event.pageY;
};
pX = event.pageX;
pY = event.pageY;
function clear() {
target
.unbind( "mousemove", track )
.unbind( "mouseout", arguments.callee );
clearTimeout( timeout );
}
function handler() {
if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
clear();
event.type = "hoverintent";
event.originalEvent = {};
jQuery.event.handle.apply( that, args );
} else {
pX = cX;
pY = cY;
timeout = setTimeout( handler, cfg.interval );
}
}
var timeout = setTimeout( handler, cfg.interval );
target.mousemove( track ).mouseout( clear );
return true;
}
};

updated jsFiddle: http://jsfiddle.net/uPWLn/

Victoria Stuart · Answer 2 · 2021-01-21T21:46:48.403

This thread is old and the code provided is deprecated due to changes in JQuery 1.9.1 and current versions (3.5.1).

While there are several other jquery-hoverintent discussions on the web, e.g.

[StackOverflow] Delay jquery hover event?

... this thread is good as it directly addresses Ajax and the JQuery .tabs() ecosystem, here with hoverIntent.js.

I wanted to get this approach / code working for my project, so I dumped @eric-goncalves excellent JSFiddle (other answer, here) into a HTML file and debugged it.

As a Javascript novice I'm not sure that this code is the best current approach to JQuery ui-tab delayed loading (noting again the much-upvoted StackOverflow discussion linked above).

I was not able to implement that example due to the specific applications embedded into that code and the lack of a working copy, obfuscating it's generalization.

However I was able to implement Eric Goncalves's code, which I provide below as a complete, working copy. :-)

JSFiddle: https://jsfiddle.net/mvo6n9tc/1/

<!DOCTYPE html>
<html encoding="UTF-8" charset="UTF-8" lang="en-US" language="English" xmlns="https://www.w3.org/1999/xhtml/" itemtype="http://schema.org/WebPage">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.1">
<link rel="shortcut icon" href="#">

<title>Adding hoverintent to JQuery ui-tabs</title>
<!-- https://stackoverflow.com/questions/15346939/adding-hoverintent-to-jquery-ui-tabs -->

<!-- ALL JQUERY VERSIONS: https://code.jquery.com/jquery/ -->

<!-- <script src="https://code.jquery.com/jquery-1.9.1.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script> -->

<!-- COMMENT: all three of these JQuery scripts are required.  Note COMMENTS -->
<!-- in code for updates from jquery-1.9.1.min.js >> jquery-3.5.1.min.js -->

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

<script type = "text/javascript">
  $(init);
  function init(){
      $("#tabs").tabs({event: "click hoverintent"});
  };  /* init(){} */

  var cfg = ($.hoverintent = {
    sensitivity: 3,
    interval: 400
  });  /* cfg */

  $.event.special.hoverintent = {
    setup: function() {
      $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
    },  /* setup (){} */

    teardown: function() {
      $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
    },  /* teardown */

    handler: function( event ) {
      var that = this,
      args = arguments,
      target = $( event.target ),
      cX, cY, pX, pY;

      function track( event ) {
        cX = event.pageX;
        cY = event.pageY;
      };  /* track */

      pX = event.pageX;
      pY = event.pageY;

      function clear() {
        target
        .unbind( "mousemove", track )
        .unbind( "mouseout", arguments.callee );
        clearTimeout( timeout );
      }  /* clear */

      function handler() {
        if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) {
          clear();
          event.type = "hoverintent";
          // prevent accessing the original event since the new event
          // is fired asynchronously and the old event is no longer
          // usable (#6028)
          //
          // COMMENT [2021-01-20]:
          //   "Uncaught TypeError: e.preventDefault is not a function"
          //   SWITCHING FROM JQuery 1.9.1 to 3.5.1 comment out this line:
          //
          // event.originalEvent = {};

          // COMMENT [2021-01-20]:
          //   "Uncaught TypeError: jQuery.event.handle is undefined"
          //   jQuery.event.handle is deprecated; you can use $.event.dispatch instead.
          //   https://stackoverflow.com/questions/16527658/jquery-error-typeerror-event-handle-is-undefined
          //
          // jQuery.event.handle.apply( that, args );
          jQuery.event.dispatch.apply( that, args );
        }  /* if */
        else {
          pX = cX;
          pY = cY;
          timeout = setTimeout( handler, cfg.interval );
        }  /* else */
      }    /* handler (inner) */

      var timeout = setTimeout( handler, cfg.interval );
      target.mousemove( track ).mouseout( clear );
      return true;
    }  /* handler (outer) */
  };   /* event.special.hoverintent */
</script>
</head>

<body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. </p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. </p>
  </div>
</div>
</body>
</html>

Adding HoverIntent to jQuery UI Tabs

2 Answers2