recruit_man recruit_man - 1 month ago 20
Javascript Question

fakewaffle responsive tab screen issue

I'm using fakewaffle responsive tab plugin but there is something that I didn't understand is I want to make responsive on 480px not 768px but I couldn't how can I did it ?

HTML

<ul class="nav nav-tabs responsive" id="myTab">
<li class="active"><a href="#home">Home</a>
</li>
<li><a href="#profile">Profile</a>
</li>
<li><a href="#messages">Messages</a>
</li>
</ul>
<div class="tab-content responsive">
<div class="tab-pane active" id="home">...content...</div>
<div class="tab-pane" id="profile">...content...</div>
<div class="tab-pane" id="messages">...content...</div>
</div>


JS

$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});

(function ($) {
fakewaffle.responsiveTabs(['xs', 'sm']);
})(jQuery);


click to see demo

Answer

remove this sm. sm take 768 screen

$('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
});

(function ($) {
   var windowSize = $(window).width();
   if(windowSize < 480){
     fakewaffle.responsiveTabs(['xs']);
   }
})(jQuery);