JQuery number ticker that goes up by 1 every 0.0013s WordPress
- SOLVED
I need a number ticker that starts at 35000 and goes up by 1 every 0.0013s. Website is Inkspotwifi.co.uk and the tickers to go at the top right side where it currently says "10761 Network Users"
Answers (4)
Dbranes answers:
hi, here is a javascript number ticker (no php needed) that calculates the counter value from a date,
so it will also work when you reload the page:
html:
result: <div id="counter"></div>
javascript:
var START_DATE = new Date("October 10, 2012 22:30:00"); // put in the starting date here
var INTERVAL = 1; // in seconds
var INCREMENT = 30; // increase per tick
var START_VALUE = 35001; // initial value when it's the start date
var count = 0;
$(document).ready(function() {
var msInterval = INTERVAL * 1000;
var now = new Date();
count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
document.getElementById('counter').innerHTML = count;
window.setInterval( function(){
count += INCREMENT;
document.getElementById('counter').innerHTML = count;
}, msInterval);
});
see here:
http://jsfiddle.net/fKve9/
ps: this is a modified version of this answer:
http://stackoverflow.com/a/3346311
patrickclover comments:
OOO almost, just need to make it to 1decimal place now?
patrickclover comments:
var n=count.toFixed(1);
Got it!
patrickclover comments:
Maybe not, didnt work.
Dbranes comments:
ok, I guess you mean the case: 1/0.0013 ~ 769.2
Here is an updated version (I added the count.toFixed(0) to display the counter,
I guess it must be an integer, since it stands for users.)
html:
<div id="counter"></div> Network Users
javascript:
var START_DATE = new Date("October 21, 2012 22:30:00"); // put in the starting date here
var INTERVAL = 1; // refresh interval in seconds
var INCREMENT = 769.2; // increase per tick (1/0.0013 ~ 769.2)
var START_VALUE = 35000; // initial value when it's the start date
var count = 0;
$(document).ready(function() {
var msInterval = INTERVAL * 1000;
var now = new Date();
count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
$('#counter').html(count.toFixed(0));
window.setInterval( function(){
count += INCREMENT;
$('#counter').html(count.toFixed(0));
}, msInterval);
});
see demo here:
[[LINK href="http://jsfiddle.net/nQjPE/"]]http://jsfiddle.net/nQjPE/[[/LINK]]
patrickclover comments:
This JS seems to not be quite playing right, any ideas? maybe make a separate file? suggestions?
patrickclover comments:
Error:
Problem at line 10 character 10: Missing radix parameter.
count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
Implied global: $ 7,11,15, window 13
Dbranes comments:
you can try to replace:
count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
with:
count = parseInt((now - START_DATE)/msInterval,10) * INCREMENT + START_VALUE;
i.e. parseInt can have second parameter (radix)
What browser are you using?
patrickclover comments:
Nope still doesn't work ehm IE4?
jk, chrome canary the link you sent works but it doesn't when i try add it to the site.
Dbranes comments:
hehe IE4 rocks ;-)
you could try to replace $ with jQuery (in 3 places)
patrickclover comments:
var msInterval = INTERVAL * 1300000;
- problem solved. just change the time multiplier, seemed to do the trick!
daas answers:
<span id="custom_users"></span>
<script>
var div = document.getElementById( 'custom_users' );
var i = 35000;
setInterval(function(){ div.innerHTML=i; i++; },1.3)
</script>
try this
patrickclover comments:
ticks too often, resets back to 35000 on page reload.
Gabriel Reguly answers:
Hi Patrick,
I assume you already have jQuery set, so please try this
<script type="text/javascript">
jQuery (function() {
var cnt = 35000;
var counter = setInterval(function() {
jQuery('#header-phone').html( cnt + ' Network Users' );
cnt++;
}
}, 1.3);
});
</script>
Regards,
Gabriel