CODEWITHSUNDEEP
jqueryjquery-ui
Ben
Ben

Reputation: 1461

jQuery UI Tabs force delay before changing tab on mouseover

Using the jQuery UI Tabs 1.7.2 with jQuery 1.4.2, is there a way to make it so that when you mouseover a tab, there is a delay before the tab switches?

I've been looking into using the hoverIntent plugin to do this, but cannot figure out how it would fit in.

Right now my code looks like:

var tabs = $('.tabs').tabs({
 event: 'mouseover'
});

I've tried playing around with a callback on the show event, but I think I'm doing it wrong or not clear on when the callback happens:

$( ".tabs" ).tabs({
 show: function(event, ui) 
 { 
  setTimeout("FUNCTION_TO_CHANGE_TAB?", 200);
 }
});

Any help would be greatly appreciated.

Upvotes: 3

Views: 2394

Answers (2)

Nick Craver
Nick Craver

Reputation: 630389

Since you're on 1.4.2 you can use a custom event and .delegate() to do this:

$("#tabs").tabs({
  event: 'mousedelay'
}).delegate('ul.ui-tabs-nav li a', 'mouseover', function() {
  clearTimeout($(this).closest('.ui-tabs').data('timeout'));
  $(this).closest('.ui-tabs').data('timeout', setTimeout($.proxy(function() {
    $(this).trigger('mousedelay');
  }, this), 500));
});​​​​​​​​​​​​​​​

You can try a demo here

This works by setting the event option to listen for our custom event, mousedelay. Then in .delegate(), we're listening for the mouseover event on the anchors, clearing a timeout if there is one (we hovered over 2 tabs rapidly), and setting another. When that timeout finishes all we're doing is triggering the mousedelay event on that anchor (the tab).

The $.proxy() piece is just a short way to have this reference to the anchor we moused-over, not window (since setTimeout() runs in a global context) when it executes.

Upvotes: 3

Shay Erlichmen
Shay Erlichmen

Reputation: 31928

You can create your own event, override the mouseover and trigger a new event.

I found a blog post about it here

Upvotes: 0

Related Questions