1

This may, to some, sound like a simple question but my programming skills although enthusiastic, are pretty much none existent.

I hope someone out their can help.

I am trying to delay the mouseover event on the following vertical tabs so a user could go directly from tab 1 to tab 4 without tabs 2 and 3 coming up.

Below is the script I am using:

$(function () {
var items = $('#v-nav>ul>li').each(function () {
$(this).mouseover(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');

$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show();
window.location.hash = $(this).attr('tab');
});
});

if (location.hash) {
    showTab(location.hash);
}
else {
    showTab("tab1");
}

function showTab(tab) {
    $("#v-nav ul li:[tab*=" + tab + "]").mouseover();
}

// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function () {
    showTab(location.hash.replace("#", ""));
})

// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();
});

I saw a similar question and solution in another stackoverflow post but can't figure out how to adapt it to make it work.

A demo of the vertical tabs can be seen here: http://jsfiddle.net/JAG72/tt7CK/6/

Thanks in advance for any help.

Community
  • 1
  • 1
Jonnie
  • 71
  • 9
  • Since you're using jQuery, take a look at hoverIntent at http://cherne.net/brian/resources/jquery.hoverIntent.html. It is well documented and has several examples, including tabbed interfaces. Hope that helps. – Ace Sep 10 '13 at 17:00

1 Answers1

0

jsFiddle Demo

What you need to do is implement a logical delay. You can do this by detecting a mouseout on the elements you are tracking. In this case, the list elements. When a mouseout occurs, raise a flag which will be the trigger for the delay. In the mouseover, if the flag exists, then cause the delay. This requires making these thre changes to your code:

Flags

var block = false;
var tabWait = -1;

Mouseout

$('#v-nav>ul>li').mouseout(function(){
   block = true;
   setTimeout(function(){ block = false; },400);
});

Mouseover edit

var me = this;
if(block){
 clearTimeout(tabWait);
 tabWait = setTimeout(function(){
  $(me).mouseover();
 },400);
 return;
}

I have it setup for a 400ms delay. You may change the 400 in both places to whatever timeframe you feel best suits your design.

Travis J
  • 81,153
  • 41
  • 202
  • 273
  • I've noticed a slight problem with this solution. My actual tabs are taller than the demo tabs so if a user let's say selects tab 1 and moves the mouse pointer across to the contents of tab 1 they could easily across tab 2 and generate a undesired tab change. Is there a solution for this? – Jonnie Sep 05 '13 at 22:51
  • @JonathanGillmor - This could actually be refactored slightly to not use the mouseout function. But aside from that, there should be no way to load tab 2 without actually landing on tab 2. Your comment could be worded a little better, specifically "across to the contents of tab 1 they could easily across tab 2 and generate a undesired tab change". – Travis J Sep 05 '13 at 22:54
  • Here is an updated version of the demo that better demonstrates the actual tabs http://jsfiddle.net/JAG72/tt7CK/11/ – Jonnie Sep 05 '13 at 23:01
  • Thanks Travis, Yeh sorry! Hard to explain. The user in going across to the contents on tab1 could move the pointer across tab 2, even for a less than the 400ms delay and this would cause tab 2 to be selected. How would I, as you suggested, refactor this slightly to not use the mouseout function? Thanks again for your help. It's most appreciated. – Jonnie Sep 05 '13 at 23:10
  • @JonathanGillmor - Actually for that scenario you are going to need to retain the mouseout function, and inside of it, tell the timer which switches the tabs to stop from switching. See here: http://jsfiddle.net/Pde7h/2/ and note the edit to the mouseout function in that it includes `clearTimeout(tabWait);` – Travis J Sep 05 '13 at 23:14
  • Hi Travis, Sorry to bother. How would I make the same, http://jsfiddle.net/Pde7h/2/ , open on tab#2 when the page first loads? – Jonnie Sep 14 '13 at 22:36
  • @JonathanGillmor - You would just use `showTab(2);` at the end of your `document.ready` function. [demo](http://jsfiddle.net/B5rDd/) – Travis J Sep 14 '13 at 22:40