We Keep Coding

Looping Graph Animation

I saw this codepen: https://codepen.io/alex_rodrigues/pen/ogYZdr You can see the javascipt code here:
setTimeout(function start (){
$('.bar').each(function(i){
var $bar = $(this);
$(this).append('<span class="count"></span>')
setTimeout(function(){
$bar.css('width', $bar.attr('data-percent'));
}, i*100);
});
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).parent('.bar').attr('data-percent')
}, {
duration: 2000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now) +'%');
}
});
});
}, 500)
I want the graph to complete the animation, stall for 3-5 seconds then repeat the animation. Currently, it completes the animation, but there is no loop. Any help is much appreciated. Thank you!

You can create a function that:
Resets the bar's width and content
Restarts the animation.
This function can be set to be called after:
($('.bar').length - 1) * 100 + 2000 + your_chosen_delay_in_ms
For this to work, we have to pull out all the things that don't need repeating, like $(this).append('<span class="count"></span>').
Combined, it would look like this:
var animation_offset = 100;
var animation_duration = 2000;
var reanimate_delay = 3000;
function animateBars() {
$('.bar').each(function(i){
var $bar = $(this);
setTimeout(function(){
$bar.css('width', $bar.attr('data-percent'));
}, i*animation_offset);
});
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).parent('.bar').attr('data-percent')
}, {
duration: animation_duration,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now) +'%');
}
});
});
setTimeout(
reAnimateBars,
(
($('.bar').length - 1) * animation_offset // Moment the last bar starts animating
+ animation_duration // Animation duration
+ reanimate_delay // Your chosen delay
)
);
}
function reAnimateBars() {
// Reset the bars
$('.bar .count').text('');
$('.bar').css('width', '0%');
// This will take some time (as per CSS transition property) to reset.
// So we have to wait for that too.
// Start the animation (again)
// after CSS transition time for resetting is over
setTimeout(animateBars, animation_duration);
}
setTimeout(function() {
// Put non-repeating things here:
$('.bar').append('<span class="count"></span>');
// Start animation (first time)
animateBars();
}, 500);

Bootstrap Carousel Progress Bar Mobile Phone problem

I've add an horizontal progress Bar on my Boostrap Carousel that initialized when slide:
$(document).ready(function () {
var percent = 0,
interval = 40,
$bar = $('.myCarouselProgressBar'),
$crsl = $('#myCarousel');
$('.carousel-indicators li, .carousel-control').click(function (){$bar.css({width: 0.5 + '%'});});
$crsl.carousel({
interval: false,
pause: true
}).on('slide.bs.carousel', function () {percent = 0;});
function progressBarCarousel() {
$bar.css({width: percent + '%'});
percent = percent + 0.5;
if (percent >= 100) {
percent = 0;
$crsl.carousel('next');
}
}
var barInterval = setInterval(progressBarCarousel, interval);
if (!(/Mobi/.test(navigator.userAgent)))
{
$crsl.hover(function(){clearInterval(barInterval);},
function(){barInterval = setInterval(progressBarCarousel, interval);}
);
}
});
On desktop it's ok, but on mobile progress stop about 60% and slide next image, then view time it's slow too

Scrolling Tabs in Bootstrap 4

I am working on scrolling tab. Below is my code. I am facing problem that I am not able to click middle tabs. On right button click tabs scrolls move it gradually. What should I do to move tabs gradually? Please help
var hidWidth;
var scrollBarWidths = 40;
var widthOfList = function() {
var itemsWidth = 0;
$('.list a').each(function() {
var itemWidth = $(this).outerWidth();
itemsWidth += itemWidth;
});
return itemsWidth;
};
var widthOfHidden = function() {
return (($('.wrapper').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
};
var getLeftPosi = function() {
return $('.list').position().left;
};
var reAdjust = function() {
if (($('.wrapper').outerWidth()) < widthOfList()) {
$('.scroller-right').show().css('display', 'flex');
} else {
$('.scroller-right').hide();
}
if (getLeftPosi() < 0) {
$('.scroller-left').show().css('display', 'flex');
} else {
$('.item').animate({
left: "-=" + getLeftPosi() + "px"
}, 'slow');
$('.scroller-left').hide();
}
}
reAdjust();
$(window).on('resize', function(e) {
reAdjust();
});
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({
left: "+=" + widthOfHidden() + "px"
}, 'slow', function() {
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({
left: "-=" + getLeftPosi() + "px"
}, 'slow', function() {
});
});
Fiddle http://jsfiddle.net/vedankita/2uswn4od/13
Help me to scroll slowly on button click so that I can click on ease tab. Thanks

You should incrementally move the tabs "width of hidden", but no more than wrapper width...
var widthOfHidden = function(){
var ww = 0 - $('.wrapper').outerWidth();
var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
if (ww>hw) {
return ww;
}
else {
return hw;
}
};
var getLeftPosi = function(){
var ww = 0 - $('.wrapper').outerWidth();
var lp = $('.list').position().left;
if (ww>lp) {
return ww;
}
else {
return lp;
}
};
And then "readjust" after each movement to determine whether or not the scroll arrows still need to show...
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
reAdjust();
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
reAdjust();
});
});
Demo: https://www.codeply.com/go/Loo3CqsA7T
Also, you can improve the position of the last tab by making sure it's right position is never less than wrapper width to keep it aligned to the right edge...
var widthOfHidden = function(){
var ww = 0 - $('.wrapper').outerWidth();
var hw = (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;
var rp = $(document).width() - ($('.nav-item.nav-link').last().offset().left + $('.nav-item.nav-link').last().outerWidth());
if (ww>hw) {
return (rp>ww?rp:ww);
}
else {
return (rp>hw?rp:hw);
}
};

https://embed.plnkr.co/NcdGqX/
Look at this example. this tabs move gradually. and also you can use bootstrap 4.
I hope it might be helpful.

Jquery image scroller slow and jerky

So I built this image scroller with little thumbnail images at the bottom, I wanted the thumbnails to scroll left and right when you hover over an indicated area and stop when the last one comes into view ( and the same with the first one for the other direction) The code that I came up with works for a little while on the page but after a while it starts to get slow and jerky so I was wondering if there was a cleaner way to accomplish the same thing.
The code is:
var licount = $('.hs_cos_flex-slides-thumb li').length; //counts rows in list
var thumbwidth = licount * 210; //gets width of all rows
var viewwidth = $(".hs-cos-flex-slider-control-panel").width(); //gets width of sarounding div
var scrollwidth = thumbwidth - viewwidth; //gets width where last row is visible
var intervalId = window.setInterval;
$( ".thumb-for" ).hover(
function() {
var scrollposition = $(".hs_cos_flex-slides-thumb").position().left; //calculates how far left it has moved
var absposition = Math.abs(scrollposition); //gets absolute value of left movement
var shover = true;
if ( scrollwidth > (absposition + 209) ){
$('.hs_cos_flex-slides-thumb').animate({
right: '+=210px'
}, 1500, 'linear');
absposition+=210;
}
intervalId = window.setInterval(moveticker, 1500)
function moveticker() {
if ( scrollwidth > (absposition + 209) ){
$('.hs_cos_flex-slides-thumb').animate({
right: '+=210px'
}, 1500, 'linear');
absposition+=210;
}
};
}, function() {
window.clearInterval(intervalId);
}
);
$( ".thumb-back" ).hover(
function() {
var scrollposition = $(".hs_cos_flex-slides-thumb").position().left; //calculates how far left it has moved
var absposition = Math.abs(scrollposition); //gets absolute value of left movement
var shover = true;
if ( scrollposition < 0 ){
$('.hs_cos_flex-slides-thumb').animate({
right: '-=210px'
}, 1500, 'linear');
scrollposition+=210;
}
intervalId = window.setInterval(moveticker, 1500)
function moveticker() {
if ( scrollposition < 0 ){
$('.hs_cos_flex-slides-thumb').animate({
right: '-=210px'
}, 1500, 'linear');
scrollposition+=210;
}
};
}, function() {
window.clearInterval(intervalId);
}
);

How to call a function with a delay

I have the following function, which animates a series of bars:
function fluctuate(bar) {
var height = Math.floor(Math.random() * 30) + 5;
//Animate the equalizer bar repeatedly
bar.animate({
height: height
}, 250, function() {
fluctuate($(this));
});
}
$(".bar").each(function(i) {
fluctuate($(this));
});
I want this to play each time a div class (".play") is clicked. How can I enabled this, and limit the animation to 3 seconds, before stopping?
Thanks

To run the animation for three seconds only, count the number of times it has been running, and multiple with the animation speed to get the total sum of the animations length :
function fluctuate(bar) {
var height = Math.floor(Math.random() * 30) + 5;
bar.animate({
height: height
}, 250, function() {
var times = $(this).data('times') || 0;
if (times <= 12) {
$(this).data('times', ++times);
fluctuate($(this));
}else{
$(this).data('times', 0);
}
});
}
$(".bar").each(function(i) {
fluctuate($(this));
});
FIDDLE
And a nicer version as a plugin with parameters:
$.fn.fluctuate = function(speed, duration) {
return this.each(function() {
var self = this,
times = Math.round(duration / speed),
iteration = 0;
(function ani() {
var height = Math.floor(Math.random() * 30) + 5;
$(self).animate({ height: height }, speed, function() {
if (iteration <= times) {
iteration++;
ani();
}
});
})();
});
}
$('#test').on('click', function() {
$(".bar").fluctuate(250, 3000);
});
FIDDLE