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>
Related
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
Trying to create counter which starts from 0 and go up to target value. I tried to Use setInterval but it didn't work, As I do not have much clear idea of it I have referred certain tutorial also still not able to work my code. If someone can help me by correcting my code would be great for me.
Thank You In Advance.
$(document).ready(function() {
$('.tts-counter .tts-counter-item .tts-number').each(function() {
var counterValue = $(this).data('counter');
var finalValue = 0;
for (var i = 0; i <= counterValue; i++) {
$(this).text(finalValue);
finalValue++;
}
});
});
After checking and referring to many articles related to counters I found this solution.
$('.tts-number').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
I want to count numbers with text when scrolling down my HTML file and reach a certain section. The code looks like this:
<h3 class="count">25 Years</h3>
<p>On the Road...</p>
<h3 class="count">143 Million</h3>
<p>Transactions worldwide 2015</p>
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
The problem is that I only get a correct result when I put in only a number. If I put in a string like 25 Years, it outputs NaN.
Any suggestions for my code?
var targetOffset = $(".company-numbers").offset().top;
var $w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
(function () {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
return false;
}
});
});
})();
} else {
return false;
}
})
The issue is because your jQuery code expects the value to be able to be parsed to an integer. Try putting the values to be counted in their own elements, for example <span>, and then call the jQuery logic on those values.
<h3><span class="count">25</span> Years</h3>
<p>On the Road...</p>
<h3><span class="count">143</span> Million</h3>
<p>Transactions worldwide 2015</p>
Please check this code , do you really want it like this?
and let me know!!!
<h3 class="count">25 Years</h3>
<p>On the Road...</p>
<h3 class="count">143 Million</h3>
<p>Transactions worldwide 2015</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text().match(/\d/g).length
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
</script>
or if you want to count total number of characters then please change "counter" property.
Counter: $(this).html().length
You have to assign number values to elements if you want to operate like a create an array with key values inside your function or a JSON.
There is a problem with that animation I found here :
jQuery animated number counter from zero to value
Here is the problem, I used it on test website and the counter don't go on the exact value when it's with big numbers.
here's the HTML :
<span class="Count">66620</span>
<br/>
<span class="Count">66666666</span>
<br/>
<span class="Count">66666666</span>
here's the javascript :
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
http://jsfiddle.net/Yy6r6/68/
Do someone have an idea ?
Thanks in advance.
Why not simply use the first argument of the callback?
step
Type: Function( Number now, Tween tween )
step: function (i) {
$this.text(Math.ceil(i));
}
http://jsfiddle.net/Yy6r6/70/
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/