I am currently creating a number counter (from 0 to a value) and I am having some trouble with getting the number to render if it's separated by a comma.
I have found some potential fixes such as toLocaleString but I can't get it to work - could anyone point me in the right direction?
Currently when I use 130,000 it returns NaN.
Thanks!
$('.panel-text-style-c').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now).toString());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='panel-text-style-c'>130,000</span>
The following above
In JS, a , is not valid for use in a value to be parsed to an integer. This is why you receive the NaN output.
To fix this use replace() to remove the comma before providing it to the Counter property:
$('.panel-text-style-c').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text().replace(/,/g, '')
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now).toLocaleString());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class='panel-text-style-c'>130,000</span>
Try this code:
$('.panel-text-style-c').each(function() {
var num = $(this).text().replace(',', '');
$(this).prop('Counter', 0).animate({
Counter: num
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now).toString());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='panel-text-style-c'>130,000</span>
Related
I have a script that animates from zero to its value. Is it possible to increment this number by more than one at a time?
e.g 1, 5, 10, 15...... 100
jQuery({ countNum: 0 }).animate({
countNum: jQuery('.ticker').text()
}, {
duration: 2000,
easing: 'swing',
step: function() {
jQuery('.ticker').text((Math.floor(this.countNum)));
},
complete: function() {
jQuery('.ticker').text((Math.floor(this.countNum)));
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ticker">100</div>
You can do it like this:
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ticker">100</div>
JS:
jQuery({ countNum: 0 }).animate(
{
countNum: jQuery(".ticker").text()/5
},
{
duration: 4000,
easing: "linear",
step: function () {
jQuery(".ticker").text(Math.floor(this.countNum)*5);
},
complete: function () {
jQuery(".ticker").text(Math.floor(this.countNum)*5);
}
}
);
I did some research and I couldn't understand what is 'Counter' ? is it predefined in js/jquery ? or is it a css property ?
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
Two digits are missing at the end, why? Javascript output is in white and the desired numbers are in black above.
Js Code:
$('.count').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(now);
}
});
});
You need to maintain trailing zeros choosing how much digit will be shown (with toFixed(n)). Three decimal in example below:
$(document).ready(function(){
$('.count').each(function () {
if($(this).text() % 1 != 0){
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(now.toFixed(3));
}
});
}else{
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(now.toFixed(0));
}
});
}
});
});
https://jsfiddle.net/o2gxgz9r/9319/
Solved it using
$(this).text(valueOf(now));
instead of:
$(this).text(now);
I want to animate the Knob circle that it fills up on hovering. I'm new to Knob so i have no idea where my error is or if i even have the right direction. Right now it does not even show a circle :(
Basically i just want to have a circle around an icon that fills up on hovering. Maybe i can achieve that easier?
This is the sollution of it plus a little fix that i will start and stop at the right values, so you can interupt the animation without breaking it
the HTML:
<input type="text" value="0" id="circle" />
the Javascript:
$(function() {
$('.circle').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: false
});
$('.circle').parent().hover( function() {console.log("hover");
$({ value: $('.circle').val() }).animate(
{ value: 100 },
{ duration: 300,
easing: 'swing',
progress: function() {
$('.circle').val(Math.round(this.value)).trigger('change');
}
});
}, function() {
$({ value: $('.circle').val() }).animate(
{ value: 0 },
{
duration: 300,
easing: 'swing',
progress: function() {
$('.circle').val(Math.round(this.value)).trigger('change');
}
});
});
});
Here is the JSFiddle
you need to change the hover handler to the parent of #circle or change displayInput to true
$(function() {
$('#circle').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: false
});
//$('#circle').parent() is the new div that contains the input and the canvas
$('#circle').parent().hover( function() {
$({ value: 0 }).animate(
{ value: 100 },
{ duration: 1000,
easing: 'swing',
progress: function() {
$('#circle').val(Math.round(this.value)).trigger('change');
}
});
}, function() {
$({ value: 100 }).animate(
{ value: 0 },
{
duration: 1000,
easing: 'swing',
progress: function() {
$('#circle').val(Math.round(this.value)).trigger('change');
}
});
});
});//you need to close with ');'
you need to include the knob.js in the fiddle or else you get a '404 Not Found' error and include jquery or else you get this error 'Uncaught ReferenceError: $ is not defined'
http://jsfiddle.net/dWsuP/1/
The idea is to animate a cloud div and to have it animate back and forth horizontally in perpetuity. This works, but unfortunately I think it's prone to memory leaks and UI lag. Any advice would be appreciate, thanks.
function animateCloud() {
$('#cloud').animate({ right: '+=500' }, { duration: 35000, easing: "linear", queue: true });
animateOpposite();
}
function animateOpposite() {
$('#cloud').animate({ right: '-=500' }, { duration: 35000, easing: "linear", queue: true });
animateCloud();
}
$(document).ready(function() {
animateCloud();
});
I don't think that your code leaks memory at all, but you can create the call shorter.
function animateCloud() {
$('#cloud').animate({ right: '+=500' }, { duration: 35000, easing: "linear" })
.animate({ right: '-=500' }, { duration: 35000, easing: "linear", complete: animateCloud });
}
example: http://www.jsfiddle.net/bh3f4/
http://api.jquery.com/animate/
Use the optional callback argument. When an animation finishes, jquery will call your function. Perfect time to animate other direction.