I have a problem with a jquery function.
When I launch my page, my progress bars come alive as expected, but they come alive without ever stopping ... I would like the code to run once.
here is the code and the function.
Thank you very much for your help.
here is the code
function loadBar() {
var delay = 500;
$(".progress-bar").each(function(i) {
$(this).delay(delay * i).animate({
width: $(this).attr('aria-valuenow') + '%'
}, delay);
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: delay,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now) + '%');
}
});
});
}
$(document).ready(function() {
// au clic sur un lien
$('#webLangages').on('click', function() {
loadBar();
});
});
var target = $("#third").offset().top;
var interval = setInterval(function(event) {
if ($(window).scrollTop() > target) {
//start loading progress bar
loadBar();
loadBar.stopNow();
}
}, 1000);
Related
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);
I am trying to make my progress bar animate when the container box reaches a certain scroll point on the screen.
let targetPosition = target.getBoundingClientRect();
var getStarted = setInterval(loading, 1);
function loading() {
if (targetPosition.Top < 50) {
$(".skill-bar").each(function () {
var $this = $(this);
var per = $this.attr("per");
$this.css("width", per + "%");
$({ animatedValue: 0 }).animate(
{ animatedValue: per },
{
duration: 2000,
step: function () {
$this.attr("per", Math.floor(this.animatedValue) + "%");
},
complete: function () {
$this.attr("per", Math.floor(this.animatedValue) + "%");
},
}
);
});
}
}```
I have a weird bug in my code that is causing my carousel to act funny if the window is resized.
I haven't been able to pin-point what may be causing the issue, but if you run the code and then resize the window, the carousel will start to move back and forth rapidly, avoiding the 10-second timer that I have placed on it.
Here is a link to my example fiddle: https://jsfiddle.net/zeropsi/ufvLn25b/
Any thoughts?
The trouble is when window is being resized, the window.resize gets triggered a number of times and because of that carousel keeps sliding rapidly. I searched for 'jquery window resize trigger once complete' and found help. This is how I modified your code from the fiddle.
<script>
$(document).ready(function() {
$(document).on("click", ".carousel-indicators li", function() {
$(".carousel-indicators li").removeClass("active");
var a = $(this).data("slide");
$(this).addClass("active");
$("div#billboards").animate({
"left": (a * -100) + "%"
});
$(".billboard").removeClass("active");
$(".billboard[data-billboard='" + a + "']").addClass("active");
return false;
});
// var resizeTimer;
//
// $(window).on("resize", function() {
// console.log("window resized");
//
// clearTimeout(resizeTimer);
// resizeTimer = setTimeout(function() {
// // run code here, resizing has stopped
// BillboardCarousel.init();
// },10000);
//
// });
var id;
$(window).on("resize", function() {
clearTimeout(id);
id = setTimeout(doneResizing, 500);
});
function doneResizing(){
BillboardCarousel.init();
}
if ($("section#carousel").length === 1) {
BillboardCarousel.init();
}
});
var BillboardCarousel = {
init: function() {
BillboardCarousel.resize();
},
imagesLoaded: function() {
var imagesLoaded = 0;
$(".billboard").each(function() {
var image = new Image();
image.src = $(this).data("image");
image.onload = function() {
imagesLoaded++;
if (imagesLoaded === $(".billboard").length) {
BillboardCarousel.startCarousel();
}
};
});
},
startCarousel: function() {
var interval = parseInt($("div#billboards").data('interval'));
window.setInterval(function() {
BillboardCarousel.timer();
}, 10000);
},
resize: function() {
var a = $(".billboard").length;
var b = $(window).width();
$(".billboard").css({
"width": b + "px",
"float": "left",
"display": "inline-block"
});
$("div#billboards").css({
"width": a * 100 + "%",
"left": "0%"
});
$("div#billboards").attr("data-interval", 10000);
BillboardCarousel.imagesLoaded();
},
timer: function() {
var a = $(".billboard.active").data("billboard");
a++;
if (a >= $(".billboard").length) {
a = 0;
}
$(".billboard").removeClass("active");
$(".carousel-indicators li").removeClass("active");
$(".billboard[data-billboard='" + a + "']").addClass("active");
$(".carousel-indicators li[data-slide='" + a + "']").addClass("active");
$("div#billboards").animate({ "left": (a * -100) + "%" });
}
};
</script>
These are a few helpful links -
JQuery: How to call RESIZE event only once it's FINISHED resizing?
http://jsfiddle.net/Zevan/c9UE5/1/
https://css-tricks.com/snippets/jquery/done-resizing-event/
ScrollTop is a jquery plugin (go to top of page), trying to make slow Scroll Speed, but not working. I have changed scrollSpeed : 'fast', to scrollSpeed : 'slow', but it still fast, nothing change.
JS:
$.fn.extend({
addScrollTop: function(options) {
var defaults = {
useObjWindow : false,
scrollSpeed : 'fast',
zIndex: '99'
}
var options = $.extend(defaults, options);
if($('body').find('.scrollTop-btn').length == 0) {
$('body').append('<div class="scrollTop-btn" style="display:none;"><i class="fa fa-chevron-up"></i></div>');
}
if(options.useObjWindow) {
var parentWindow = this;
var scrollWindow = this;
}
else {
var parentWindow = window;
var scrollWindow = 'html, body';
}
$(document).ready(function() {
$('.scrollTop-btn').on('click', function() {
$(scrollWindow).animate({scrollTop:0}, options.scrollSpeed);
});
$(parentWindow).scroll(function() {
$('.scrollTop-btn').hide();
var aTop = $('.scrollTop-btn').height() + 20;
if($(this).scrollTop() >= (aTop + 20)) {
$('.scrollTop-btn').css('z-index', options.zIndex);
$('.scrollTop-btn').show();
}
else {
if($('.scrollTop-btn').is(":visible")) {
$('.scrollTop-btn').hide();
}
}
});
});
}
});
Call:
jQuery(document).ready(function() {
jQuery("body").addScrollTop();
});
How to make it slower or smoother, when it go to top?
use jquery animate()
$('html,body').animate({ scrollTop: 0 }, 'slow');
refer this stack overflow question
Only with CSS:
html {
scroll-behavior: smooth;
}
Using jQuery
If you want you can customize how much time you would like the "scrolling" to last. Or do something else when scroll effect is finished.
I have a: <a href="#" class="scrollToTop">
And want to scroll to an element with class "beginning"
$('.scrollToTop').on('click', function(event){
event.preventDefault();
$('html, body').stop().animate({scrollTop: $('.beginning').offset().top}, 500);
});
The last part where you have the 500. You can set there how much time you want the effect to last. In milliseconds.
http://api.jquery.com/animate/
Replace 'slow' with - Ex. 1000, 5000, 10000
$('html,body').animate({ scrollTop: 0 }, <milliseconds>);
// Scroll 2 sec
$('html,body').animate({ scrollTop: 0 }, 2000);
// Scroll 5 sec
$('html,body').animate({ scrollTop: 0 }, 5000);
I've searched a lot these days but i didn't manage to solve my problem.
I have the script below which is a simple counter, that counts some stats starting from 0. It starts when my page loads. I would like to fire this event when i scroll to a specific div or id, but only once. I saw a lot examples with .one() method etc. but i didn't find out the proper solution.
Here is my script.
<script type="text/javascript">
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 500,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
};
$('.number1').jQuerySimpleCounter({end: 14,duration: 2899});
$('.number2').jQuerySimpleCounter({end: 350,duration: 3300});
$('.number3').jQuerySimpleCounter({end: 450,duration: 4000});
$('.number4').jQuerySimpleCounter({end: 7,duration: 2500});
</script>
So what should i add to trigger it after reaching a certain div or id...?
I managed to find a "good" solution that works for me. doing the below "not so good" thing. :) Thanks Nikolas for your help.
<script type="text/javascript">
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var one = $('.tworow').position().top;
var two = $('.endrow').position().top;
if (scroll > one & scroll < two) {
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 500,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
};
$('.number1').jQuerySimpleCounter({end: 14,duration: 2899});
$('.number2').jQuerySimpleCounter({end: 350,duration: 3300});
$('.number3').jQuerySimpleCounter({end: 450,duration: 4000});
$('.number4').jQuerySimpleCounter({end: 7,duration: 2500});
};
});
When the scroll reaches a certain div it starts, and after that i put another div where the event should end, controlling it with an if condition. Now the area of the page that triggers the event is a very small "area" between 2 divs.
This should give you the result you're looking for:
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var one = $('element').position().top;
var count = 0;
if (scroll > one) {
var newCount = count + 1;
if (newCount === 1) {
//do something
};
};
});