jqueryhtmljquery-uihoverintent

Adding HoverIntent to jQuery UI Tabs


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

demo: http://jsfiddle.net/Ch7sL/

-- 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;
    }
  };

Solution

  • 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/