I have recently implemented the counter shown in this jsfiddle: https://jsfiddle.net/Behseini/osqzL4ob/
HTML
<div id="users">Counter: <b counter="0">0</b></div>
JS
function update_users_count() {
$('#users b').animate({
counter: 260
}, {
duration: 6000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
},
complete: update_users_count
});
};
update_users_count();
In the element inspector it looks as if the script would continue to loop after execution (the value is highlighted and keeps refreshing). Is there a way to stop this from happening?
Sure, just remove the complete: update_users_count (what it does is: recursively looping the same function on "complete", although the value stays the same in its final state count).
jsFiddle demo
Related
I have built a web-app in which the HTML code receives an integer value from python. I want to add a counting from 0 to that number animation.
I have checked many such queries on StackOverflow like this link.
Today morning the animation was working fine, but now it's not working.
$('.count').each(function ()
{
$(this).prop('Counter',0).animate
({
Counter: $(this).text()
},
{
duration: 10000,
easing: 'swing',
step: function (now)
{
$(this).text(Math.ceil(now));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="font-weight-bold" style="color:#f92424"><span class="count">{{ confirmedIn }}</span></h4>
Maybe I am missing some library or something, idk
Can anyone help me with this issue?
Reviewing your code:
Since the there is no logic to dictate how the counter should change, i've added a countTo variable before the animation.
Since you reference { Counter: $(this).text() } as the properties object within the animate function, the $(this).text() begins as {{ confirmed }} which is not a parsable number, hence NaN.
The solution below should resolve this.
$('.count').each(function () {
let el = $(this);
let countTo = 1000;
el.prop('counter',0).animate({
counter: `+=${countTo}`
}, {
step: function (now) {
$(this).text(Math.ceil(now))
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="font-weight-bold" style="color:#f92424"><span class="count">{{ confirmedIn }}</span></h4>
Thank for the recomendations, I have updated my ask.
I have the next code:
https://jsfiddle.net/btq7mm0h/3/
Is a simply counter starts when the document is ready. I would like that it will start when the div id="testimonios" is visible on screen because when I do scroll to down for to see the effect is already can't see.
What I have made, I find several plugin js like
https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery
Add script in my document and modified the code:
if $('#testimonios').visible( true ) {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 9000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
Please any suggestion.
There's a few ways to go about this such as using a timer, pure javascript and jquery has a few variations. Here's one way to go about this.
$("#testimonios").bind("DOMSubtreeModified", function() {
// do whatever here, you can even add an if statement for css such as
var cssCheck = $(this).css('display');
if (cssCheck == "block") {
// Div Display is Visible
alert("isVisible");
} else {
// Div Display is not Visible
alert("isNotVisible");
}
});
You can see the result at codebin: http://codebins.com/bin/4ldqoyk
I'm trying to adjust a script I found on another stackoverflow question. Basically I want to be able to get the data attribute which is the count number and count from zero up to that number for each instance of that div.
Basically I'm trying to loop through each div element and make a variable of the data-attribute and then perform the count animation on that respective element.
My HTML:
<div class="count_item" data-count="5000">0</div>
<div class="count_item" data-count="444">0</div>
<div class="count_item" data-count="6666">0</div>
My jQuery:
$(".count_item").each(function(i) {
var count_val = $(this).data('count');
$("body").append(count_val);
console.log(count_val);
$({countNum: $(i).text()}).animate({countNum: count_val}, {
duration: 8000,
easing:'linear',
step: function() {
$(i).text(Math.floor(this.countNum));
},
complete: function() {
$(i).text(this.countNum);
alert('finished');
}
});
});
I can't workout why if you look at the console it's getting two of the values and then it errors before the third. Help appreciated.
Working example: http://jsbin.com/yenunijemo/2/
The issue is that i is not what you expect it to be (it is index of each .count_item in the selection array, but not the element in itself). An easy way to fix that would be to define a variable (e.g.: $this) that will contain the element that you are working with, and replace i with that variable.
If you try the following code, it will work fine:
$(".count_item").each(function(i) {
var count_val = $(this).data('count');
var $this = $(this);
$("body").append(count_val);
console.log(count_val);
$({countNum: $this.text()}).animate({countNum: count_val}, {
duration: 8000,
easing:'linear',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
alert('finished');
}
});
});
You can see it working on this JSFiddle: http://jsfiddle.net/nqn09dd0/1/
I have a jquery function that will animate the progress bar I have from 0 to 100 when it is on the screen. The problem is, if it is not visible (not visible on the page) on page load, it will never be triggered.
My code
<script>
$(function() {
$('.dial').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: true
});
$(".dial:in-viewport").parent().show(0, function() {
$({ value: 0 }).animate(
{ value: 100 },
{ duration: 1000,
easing: 'swing',
progress: function() {
$('.dial').val(Math.round(this.value)).trigger('change');
}
});
});
});
</script>
My question is how do I make it so that function will constantly check to see if it is on the screen until it returns valid.
The easiest way would be to create an interval which executes the code every n milliseconds.
var interval = 400;
var timer = window.setInterval(function(){
// your code goes here ...
if (yourCodeHasBeenExecuted === true) {
window.clearInterval(timer);
}
}, interval);
I guess this will work, but it is not the most beautiful solution existing. A better way would be to use window resize or window scrolling events, depending of what you need, and execute your code there.
You find an example for a resize event here.
I am trying to animate a number so that it rolls into the number when the page loads. I am using another library to display a dial (http://anthonyterrien.com/knob/). The issue I am having is that the number seems to be different every time I run it. It should be a consistent number ending on 19420. However sometimes it is lower and there doesn't seem to be any particular pattern.
My JS code looks like this:
$(function() {
$('#dial').knob({
min: '0',
max: '25000',
readOnly: true
});
$({
value: 0
}).animate({
value: 19420
}, {
duration: 950,
easing: 'swing',
step: function() {
$('#dial').val(Math.round(this.value)).trigger('change');
}
});
});
The fiddle can be found here: http://jsfiddle.net/ND5Sf/
What have I done wrong or is there anything I've missed out? If not, are these 2 libraries not compatible?
The issue is because you are using step function instead of progress.
Step:
A function to be called for each animated property of each animated
element. This function provides an opportunity to modify the Tween
object to change the value of the property before it is set.
Progress:
A function to be called after each step of the animation, only once
per animated element regardless of the number of animated properties.
(version added: 1.8)
Code:
$(function () {
$('#dial').knob({
min: '0',
max: '25000',
readOnly: true
});
$({
value: 0
}).animate({
value: 19420
}, {
duration: 950,
easing: 'swing',
progress: function () {
$('#dial').val(Math.round(this.value)).trigger('change');
}
});
});
Docs: http://api.jquery.com/animate/
Demo: http://jsfiddle.net/IrvinDominin/JW2gP/