CODEWITHSUNDEEP
jquerytwitter-bootstrap
Karolína Vyskočilová
Karolína Vyskočilová

Reputation: 1325

Carousel with progress bar - jQuery width issue

I have a tabbed bootstrap carousel with a progress bar for every tab. When I click on a tab, the progress bar starts animating and all the previous bars are colored. That works fine, but the first LI element on second round doesn't start animating, it's just full colored from the very beginning and I have no idea what is wrong.

Here is issue reproduced in bootply: https://www.bootply.com/yB0NPOAzfj

Thanks a lot for your help, I feel bit hopeless.

Upvotes: 0

Views: 293

Answers (1)

Forty3
Forty3

Reputation: 2229

It is because the CSS width is being set twice in the same event execution:

$('#custom_carousel .controls li .progress').css( 'width', '' );

and then for the active tab:

active.find('.progress').css("width", "100%");

Since the changes are queued, when the carousel wraps around the first tab's progress retains its full 100% width since it first gets set to '' and then to 100% the 100% is the last change and thus is the CSS value coming out of the event function.

To repaint the first tab's progress, you need to set the width to '' and then schedule the width set to 100% at a later point:

$(document).ready(function(ev){
    $('#custom_carousel .controls li.active .progress').css("width", "100%");

    $('#custom_carousel').on('slide.bs.carousel', function (evt) {
      $('#custom_carousel .controls li.active').removeClass('active');
      $('#custom_carousel .controls li .progress').css( 'width', '' );
      setTimeout(function() {
          var active = $('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')');
          active.find('.progress').css("width", "100%");
          active.addClass('active');
          active.prevAll().find('.progress').css("width", "100%");
      }, 0);
    })
});

The setTimeout will call 0ms after the exit of the event function and will set the tab's progress to 100% after the browser is told to set it to ''.

Upvotes: 1

Related Questions