Help me please. I have a script on my site that shows (online player counter on the server in GTA), when the page loads, it starts from zero to the number of players on the site. [counter code][1]
[1]: https://i.stack.imgur.com/5gkkX.jpg
var updateInterval = 700;
_timer = setInterval(updatePlayerCount, updateInterval);
function ShowCounter() {
clearInterval(_timer);
$('#online').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
}
function updatePlayerCount() {
var ip = "rage2.grand-rp.su:22005";
$.getJSON('https://cdn.rage.mp/master', function(masterlist) {
if(masterlist[ip] != undefined){
document.getElementById('online').innerHTML = masterlist[ip].players;
ShowCounter();
}
});
}
I have a _timer, it should update the numbers without reloading the page, but somehow it doesn't work. How to fix it? I posted this on jsfiddle https://jsfiddle.net/kg8uap9d/8/
Instead of setInteval, use setTimeout
var updateInterval = 5000;
_timer = setTimeout(updatePlayerCount, updateInterval);
function updatePlayerCount() {
var ip = "rage2.grand-rp.su:22005";
$.getJSON('https://cdn.rage.mp/master', function(masterlist) {
if(masterlist[ip] != undefined){
document.getElementById('online').innerHTML = masterlist[ip].players;
ShowCounter();
_timer = setTimeout(updatePlayerCount, updateInterval);
}
});
}
so i have this piece of code that i'm trying to make up the logic of...
what i want to do is sequence-wise animate a falling brick...
however, as the index increases in array, the duration increases, clearly a fault in my logic.. i could hard code for the 5 step of the table column but thats way ugly... following is the code..
spot.each(function (index, val) {
//$(this).css({ backgroundColor: "blue" })
$(this).animate({ backgroundColor: "white" }, {
duration: (index + 0.5) * 400
}).animate({
backgroundColor: "blue"
}, {
duration: (index + 0.5) * 400
}).animate({
backgroundColor: "white"
}, {
duration: (index + 0.4) * 400,
complete: function () {
counter = counter + 1;
if (counter == 5) {
counter = 0;
animateTable(spot)
}
}
})
so spot is an array of "tds" (table cells) ..
while, i'd be very happy to find a solution for this, i would be okay if i could some how add a syncronous delay and use $(this).css instead to just perceive as shifting the blue box from top to bottom..(it would be css bg -> white to css bg-> blue.
so i altered the above code by altering it to this and minimizing the random factor multiplying to index to some extent, not fully though. still not sure how i'd approach this but the following did help.
function animateTable(spot) {
var rand = getRandomFloat(0.4, 0.9)
var randomColor = theColors[Math.floor(Math.random() * theColors.length)];
var counter = 0
spot.each(function (index, val) {
if (!gRunning) {
$(this).animate({ backgroundColor: "white" }, {
duration: (index + 1) * rand * 3000,
easing: "linear",
step: function () {
if (countDownRunning) {
$(this).stop()
//console.log("stopped")
}
}
}, $(this).attr("data-animating", true)).animate({
backgroundColor: randomColor
}, {
duration: (index + 1) * 200,
easing: "linear",
step: function () {
if (countDownRunning) {
$(this).stop()
//console.log("stopped")
}
}
}).animate({
backgroundColor: "white"
}, {
duration: (index + 1) * 200,
easing: "linear",
step: function () {
if (countDownRunning) {
$(this).stop()
//console.log("stopped")
}
},
complete: function () {
counter = counter + 1;
if (counter == 5) {
counter = 0;
initAnim()
$(this).attr("data-animating", false)
}
}
})
} else {
return false
}
})
}
I'm assuming index increases. If you don't want duration to increase, index should not be included in the duration math at all. For example:
duration: (index + 0.5) * 400
becomes:
duration: 0.5 * 400
I wanted to have a counter that only activates when actually on the screen. I've managed to mangle this together from other examples I've found.
HTML:
<div>Scroll Down</div>
<span class="count">200</span>
CSS:
div {
height:800px;
background:red;
}
h1 {
display:none;
}
Javascript:
$(window).scroll(function() {
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT - wH), wS);
if (wS > (hT + hH - wH)) {
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
}
});
DEMO:
https://jsfiddle.net/76d57vjL/
The problem is, it reaches 200 and then counts back down to 0 but I want it to just stay at 200. I can't seem to figure out whats actually causing it though.
The problem was that you were creating more than 1 animation, so going back to 1 after starting the count, i fixed it with a flag, but probably you could make something with the heights to check that out.
Here's the fix with the flag: https://jsfiddle.net/uc0av8fh/
var flag = true;
$(window).scroll(function() {
$('#scroll-to');
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT-wH) , wS);
if (wS > (hT+hH-wH)){
$('.count').each(function () {
if(!flag) return;
//console.log();
flag = false;
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
return 1;
}
});
});
}
});
I'm using this jQuery snippet to animate a number counter from 0 to to the number provided in the span. Could someone show me how to modify it to get numbers to count DOWN to 0 when starting at a given value?
<span class="count">200</span>
$('.count').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
Something like this? I'm assuming that 'now' in the step function is just counting steps.
$('.count').each(function () {
$(this).data('start', parseInt($(this).text())).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text($(this).data(start) - now);
}
});
});
I verified this works in jsFiddle (https://jsfiddle.net/0mtht3xm/):
$('.count').each(function () {
$(this).data('start', parseInt($(this).text())).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text($(this).data('start') - Math.ceil(now));
}
});
});
There are countless different ways to create a counter that counts down to 0. This is just how I would do it:
HTML:
<span class="count">200</span>
JS:
var $count = $('.count');
var num = parseInt($count.text());
var interval = window.setInterval(updateTime, 1000);
function updateTime() {
num--;
$count.text(num.toString());
if (num <= 0) {
window.clearInterval(interval);
}
}
I have created a script to animate a number from zero to it's value.
Working
jQuery
$({ Counter: 0 }).animate({
Counter: $('.Single').text()
}, {
duration: 1000,
easing: 'swing',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">150</span>
Not Working
I now want to run the script several times on the page for each matching class.
Below is what I am trying but with no success so far:
HTML
<span class="Count">200</span>
<span class="Count">55</span>
JQUERY
$('.Count').each(function () {
jQuery({ Counter: 0 }).animate({ Counter: $(this).text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$(this).text(Math.ceil(this.Counter));
}
});
});
Your thisdoesn't refer to the element in the step callback, instead you want to keep a reference to it at the beginning of your function (wrapped in $thisin my example):
$('.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));
}
});
});
Update: If you want to display decimal numbers, then instead of rounding the value with Math.ceil you can round up to 2 decimals for instance with value.toFixed(2):
step: function () {
$this.text(this.Counter.toFixed(2));
}
this inside the step callback isn't the element but the object passed to animate()
$('.Count').each(function (_, self) {
jQuery({
Counter: 0
}).animate({
Counter: $(self).text()
}, {
duration: 1000,
easing: 'swing',
step: function () {
$(self).text(Math.ceil(this.Counter));
}
});
});
Another way to do this and keep the references to this would be
$('.Count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
FIDDLE
IMPORTANT: It seems like a small difference but you should really use a data attribute to hold the original number to count up to. Altering the original number can have un-intended consequences. For instance, I'm having this animation run everytime an element enters the screen. But if the element enters, exits, and then enters the screen a second time before the first animation finishes, it will count up to the wrong number.
HTML:
<p class="count" data-value="200" >200</p>
<p class="count" data-value="70" >70</p>
<p class="count" data-value="32" >32</p>
JQuery:
$('.count').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).data('value')
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(this.Counter.toFixed(2));
}
});
});
What the code does, is that the number 8000 is counting up from 0 to 8000. The problem is, that it is placed at the middle of quite long page, and once user scroll down and actually see the number, the animation is already dine. I would like to trigger the counter, once it appears in the viewport.
JS:
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
And HTML:
<span class="count">8000</span>
Here is my solution
and it's also working, when element shows into the viewport
You can see the code in action by clicking jfiddle
var counterTeaserL = $('.go-counterTeaser');
var winHeight = $(window).height();
if (counterTeaserL.length) {
var firEvent = false,
objectPosTop = $('.go-counterTeaser').offset().top;
//when element shows at bottom
var elementViewInBottom = objectPosTop - winHeight;
$(window).on('scroll', function() {
var currentPosition = $(document).scrollTop();
//when element position starting in viewport
if (currentPosition > elementViewInBottom && firEvent === false) {
firEvent = true;
animationCounter();
}
});
}
//counter function will animate by using external js also add seprator "."
function animationCounter(){
$('.numberBlock h2').each(function () {
var comma_separator_number_step = $.animateNumber.numberStepFactories.separator('.');
var counterValv = $(this).text();
$(this).animateNumber(
{
number: counterValv,
numberStep: comma_separator_number_step
}
);
});
}
https://jsfiddle.net/uosahmed/frLoxm34/9/
If you wanna handle based on if it is int or float
$(".display-counter").each(function () {
$(this)
.prop("Counter", 0)
.animate(
{
Counter: $(this).text()
},
{
duration: 4000,
easing: "swing",
step: function (now, tween) {
// Check added for decimal number
if(parseInt(tween.end) == parseFloat(tween.end)){
$(this).text(Math.ceil(now));
} else{
$(this).text(now.toFixed(2));
}
},
}
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="display-counter">123</p>
<p class="display-counter">125.3</p>
You can get the element itself in .each(), try this instead of using this
$('.Count').each(function (index, value) {
jQuery({ Counter: 0 }).animate({ Counter: value.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
value.text(Math.ceil(this.Counter));
}
});
});
This worked for me
HTML CODE
<span class="number-count">841</span>
jQuery Code
$('.number-count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
You can do it with animate function in jQuery.
$({ countNum: $('.code').html() }).animate({ countNum: 4000 }, {
duration: 8000,
easing: 'linear',
step: function () {
$('.yourelement').html(Math.floor(this.countNum));
},
complete: function () {
$('.code').html(this.countNum);
//alert('finished');
}
});
Demo
This is working for me
$('.Count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
This is work for me !
<script type="text/javascript">
$(document).ready(function(){
countnumber(0,40,"stat1",50);
function countnumber(start,end,idtarget,duration){
cc=setInterval(function(){
if(start==end)
{
$("#"+idtarget).html(start);
clearInterval(cc);
}
else
{
$("#"+idtarget).html(start);
start++;
}
},duration);
}
});
</script>
<span id="span1"></span>
$({ Counter: 0 }).animate({
Counter: $('.Single').text()
}, {
duration: 1000,
easing: 'swing',
step: function() {
$('.Single').text(Math.ceil(this.Counter));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">150</span>