CODEWITHSUNDEEP
jquerytwitter-bootstrap
roberthernandez
roberthernandez

Reputation: 524

Add PAUSE button to jQuery Twitter Bootstrap Vertical Tabs Carousel

I have Twitter Bootstrap's vertical tabs functioning like a carousel with the code below, but now I want to add a pause/play(resume) button. Please see jsfiddle

The relevant JS is:

    $(function() {
        var tabCarousel = setInterval(function() {
            var tabs = $('#tab-carousel .nav-tabs > li'),
                active = tabs.filter('.active'),
                next = active.next('li'),
                toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

            toClick.trigger('click');
        }, 3000);
    });

Anyone thoughts?

Upvotes: 0

Views: 887

Answers (3)

roberthernandez
roberthernandez

Reputation: 524

Here's the final version I went with:

<script type="text/javascript">
      jQuery(document).ready(function($) {
        $('button#play').click(function() {
              if ($(this).text() == 'Pause') {
                  $(this).text('Play');
                  $(this).attr('aria-label', 'Play'); 
              } else {
                  $(this).text('Pause');
                  $(this).attr('aria-label', 'Pause');
              }
         });

        $(function() {
          var tabCarousel = setInterval(function() {
            var tabs = $('#tab-carousel .nav-tabs > li'),
            active = tabs.filter('.active'),
            next = active.next('li'),
            toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

            if(!$('#play').hasClass('active')) {
              toClick.trigger('click');
            } 
          }, 6000);
        });
      });
</script>

Here's the page code:

<div id="tab-carousel" class="tabbable tabs-left"> 
    <ul class="nav nav-tabs">
        <li><a href="#tab1" data-toggle="tab">Tab 1</li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</li>
        <li><a href="#tab4" data-toggle="tab">Tab 4</li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1"><p>Content here.</p></div>
        <div class="tab-pane" id="tab2"><p>Content here.</p></div>
        <div class="tab-pane" id="tab3"><p>Content here.</p></div>
        <div class="tab-pane" id="tab4"><p>Content here.</p></div>
        <div class="pull-right"><button id="play" type="button" class="btn btn-primary btn-small" data-toggle="button" title="Pause">Pause</button>
      </div>                            
    </div>
</div>

Upvotes: 0

user1579943
user1579943

Reputation: 343

Add Pause/Play button

< button id="pause" type="button" class="btn active">< i class="icon-pause">< /i>< /button>

Script: 

var runTabCarousel = true; 


$(function() {
    var tabCarousel = setInterval(function() {
        if(runTabCarousel){
        var tabs = $('#tab-carousel .nav-tabs > li'),
            active = tabs.filter('.active'),
            next = active.next('li'),
            toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

        toClick.trigger('click');
        }
    }, 3000);

    $("#pause").click(function() { 
        runTabCarousel = !runTabCarousel; 
        if(runTabCarousel){
            $(this).find("i").addClass("icon-pause");
            $(this).find("i").removeClass("icon-play"); 

        }
        else{
            $(this).find("i").addClass("icon-play");
            $(this).find("i").removeClass("icon-pause"); 

        }
    }); 



});

Upvotes: 0

Marijn
Marijn

Reputation: 10557

How about adding a toggle button 

<button id="play" 
        type="button" 
        class="btn active" data-toggle="button">Toggle</button>

and checking if it's active before navigating?

$(function() {
    var tabCarousel = setInterval(function() {
        var tabs = $('#tab-carousel .nav-tabs > li'),
            active = tabs.filter('.active'),
            next = active.next('li'),
            toClick = next.length ? next.find('a') : tabs.eq(0).find('a');

        if(running()) {
            toClick.trigger('click');
        }
    }, 3000);
});

function running() {
    return $('#play').hasClass('active');
}

This does what you need, although I don't like that it's busy-waiting.

Upvotes: 1

Related Questions