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));
}
});
});
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>
I have an tag that is having its contents changed via jquery and then faded in and out (using the velocity js library) utilizing the setInterval function. When I run this it tends to work fine for about 30 seconds before it starts to malfunction and jquery starts to change the contents of the tag before the tag has faded out.
Here is the Javascript code
let counter = 0;
function chooseWord() {
let words = ["foo", "bar", "foo"];
if (counter !== 2) {
counter += 1;
} else {
counter = 0;
}
return words[counter];
}
function refreshText() {
$("#div").text("Foo " + chooseWord())
.velocity("fadeIn", {
duration: 2500
})
.velocity("fadeOut", {
delay: 1500,
duration: 2500
});
}
$(document).ready(function() {
refreshText();
setInterval(function() {
refreshText();
}, 7000);
});
And here is my tag that is being used
<h1 class="foobar" id="div"></h1>
I've tried using Jquery's timer and I have the same issue. Does anyone know what the problem might be or maybe a different way of achieving what I want to do?
You just need to change the order of operations. I have moved the text-change command after fade-out. So the element fades out, and then jQuery will update its text.
$("#div")
.velocity("fadeIn", {
duration: 2500
})
.velocity("fadeOut", {
delay: 1500,
duration: 2500
})
.text("Foo " + chooseWord());
Fiddle: https://jsfiddle.net/Nisarg0/gLed0h1y/
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.
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/
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/