CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user1425011
user1425011

Reputation: 119

Bootstrap hover tabs showing multiple tabs

I've used the answer from this question 'How to make twitter bootstrap menu dropdown on hover rather than click'

The problem is that when the mouse is moved quickly over all tabs, multiple .tab-pane elements are displayed in the tab-content element.

Demo

HTML

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1">Home</a></li>
  <li><a href="#tab2">Profile</a></li>
  <li><a href="#tab3">Messages</a></li>
  <li><a href="#tab4">Account</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade active" id="tab1">
      TAB1 CONTENT
  </div>
  <div class="tab-pane fade active" id="tab2">
      TAB2 OTHER CONTENT
  </div>
  <div class="tab-pane fade active" id="tab3">
      TAB3 MORE CONTENT
  </div>
  <div class="tab-pane fade active" id="tab4">
      TAB4 SO MUCH CONTENT
  </div>  
</div>

JS

$('.nav-tabs > li').mouseover( function(){
    $(this).find('a').tab('show');
});
$('.nav-tabs > li').mouseout( function(){
  $(this).find('a').tab('hide');
});

Move the mouseX across the tabs rapidly back and forth and sometimes you will see both at once:

TAB1 CONTENT

TAB2 OTHER CONTENT

In my actual version you don't have to move as fast for the problem to occur.

Upvotes: 5

Views: 8761

Answers (4)

Spawnet
Spawnet

Reputation: 11

Found sollution for me. Default speed of fade animation is 0.15s. You need to reduse it to 0.1s. Now another picture don’t have time to appear before first disappear.

Upvotes: 0

Willi
Willi

Reputation: 31

maybe you can try my solution. i try this solution in my code and it works. for hover solution, i follow solution from here: http://tutsme-webdesign.info/bootstrap-3-toggable-tabs-and-pills/

jQuery('.nav-tabs a').hover(function(e){
    e.preventDefault();
    jQuery(this).tab('show');
});

add this line (line 3 or after .. e.preventDefault(); .. )

jQuery('.tab-pane').removeClass('active');
tabContentSelector = jQuery(this).attr('href');

and this line (after .. jQuery(this).tab('show') .. )

jQuery(tabContentSelector).addClass('active');

so the code become like this:

jQuery('.nav-tabs a').hover(function(e){
    e.preventDefault();
    jQuery('.tab-pane').removeClass('active');
    tabContentSelector = jQuery(this).attr('href');
    jQuery(this).tab('show');
    jQuery(tabContentSelector).addClass('active');
});

Upvotes: 3

Anton Abilov
Anton Abilov

Reputation: 343

What you could also do, if you want to keep the fading effect, is have a boolean to keep track of whether a tab is currently fading in, to prevent others from being triggered, this should work:

var tabFadingIn = false;
$('.nav-tabs > li').mouseover( function(){
  var $tab = $(this).find('a');
  if (!tabFadingIn) {
    tabFadingIn = true;
    $tab.one('shown.bs.tab', function() {
      tabFadingIn = false;
    });
    $tab.tab('show');
  }
});
$('.nav-tabs > li').mouseout( function(){
  $(this).find('a').tab('hide');
});

Upvotes: 0

Jorg
Jorg

Reputation: 7250

It's the because the fade class in bootstrap is an animation. If you move fast enought, the first one hasn't finished before the second one starts. Change the HTML:

<div class="tab-content">
  <div class="tab-pane active" id="tab1">
      TAB1 CONTENT
  </div>
  <div class="tab-pane" id="tab2">
      TAB2 OTHER CONTENT
  </div>
  <div class="tab-pane" id="tab3">
      TAB3 MORE CONTENT
  </div>
  <div class="tab-pane" id="tab4">
      TAB4 SO MUCH CONTENT
  </div>  
</div>

Updated your fiddle: http://jsfiddle.net/VPn52/1/

Upvotes: 7

Related Questions