Are you using some third party js library for this? If yes, how are you using it on the page?
yeah it is a counter js
my div is
<div class="row d-flex justify-content-center">
<div class="col-md-6 col-lg-3 mb-4 text-center">
<h4 class="h1 font-weight-normal mb-3">
<i class="fa fa-cube text-warning"></i>
<span class="d-inline-block count2" data-from="0" data-to="100" data-time="2000">100</span>
</h4>
<p class="font-weight-normal text-muted">KG</p>
</div>
</div>
it works for static values, just need to replace those static values with values I have from the DB
How do you initialize the script on the page?
in the bottom of the page
cant paste javascript
How exactly? Please paste the code.
Well you can!
<script>
(function ($){
$.fn.counter = function() {
const $this = $(this),
numberFrom = parseInt($this.attr('data-from')),
numberTo = parseInt($this.attr('data-to')),
delta = numberTo - numberFrom,
deltaPositive = delta > 0 ? 1 : 0,
time = parseInt($this.attr('data-time')),
changeTime = 10;
let currentNumber = numberFrom,
value = delta*changeTime/time;
var interval1;
const changeNumber = () => {
currentNumber += value;
//checks if currentNumber reached numberTo
(deltaPositive && currentNumber >= numberTo) || (!deltaPositive &¤tNumber<= numberTo) ? currentNumber=numberTo : currentNumber;
this.text(parseInt(currentNumber));
currentNumber == numberTo ? clearInterval(interval1) : currentNumber;
}
interval1 = setInterval(changeNumber,changeTime);
}
}(jQuery));
$(document).ready(function(){
$('.count-up').counter();
$('.count1').counter();
$('.count2').counter();
$('.count3').counter();
new WOW().init();
setTimeout(function () {
$('.count5').counter();
}, 3000);
});
</script>
You need to use bacticks: ` please check the post I linked to.
<script>
(function ($){
$.fn.counter = function() {
const $this = $(this),
numberFrom = parseInt($this.attr('data-from')),
numberTo = parseInt($this.attr('data-to')),
delta = numberTo - numberFrom,
deltaPositive = delta > 0 ? 1 : 0,
time = parseInt($this.attr('data-time')),
changeTime = 10;
let currentNumber = numberFrom,
value = delta*changeTime/time;
var interval1;
const changeNumber = () => {
currentNumber += value;
//checks if currentNumber reached numberTo
(deltaPositive && currentNumber >= numberTo) || (!deltaPositive &¤tNumber<= numberTo) ? currentNumber=numberTo : currentNumber;
this.text(parseInt(currentNumber));
currentNumber == numberTo ? clearInterval(interval1) : currentNumber;
}
interval1 = setInterval(changeNumber,changeTime);
}
}(jQuery));
$(document).ready(function(){
$('.count-up').counter();
$('.count1').counter();
$('.count2').counter();
$('.count3').counter();
new WOW().init();
setTimeout(function () {
$('.count5').counter();
}, 3000);
});
</script>
Change this to:
<script>
(function ($){
$.fn.counter = function() {
const $this = $(this),
numberFrom = parseInt($this.attr('data-from')),
numberTo = parseInt($this.attr('data-to')),
delta = numberTo - numberFrom,
deltaPositive = delta > 0 ? 1 : 0,
time = parseInt($this.attr('data-time')),
changeTime = 10;
let currentNumber = numberFrom,
value = delta*changeTime/time;
var interval1;
const changeNumber = () => {
currentNumber += value;
//checks if currentNumber reached numberTo
(deltaPositive && currentNumber >= numberTo) || (!deltaPositive &¤tNumber<= numberTo) ? currentNumber=numberTo : currentNumber;
this.text(parseInt(currentNumber));
currentNumber == numberTo ? clearInterval(interval1) : currentNumber;
}
interval1 = setInterval(changeNumber,changeTime);
}
}(jQuery));
function counterInit() {
$('.count-up').counter();
$('.count1').counter();
$('.count2').counter();
$('.count3').counter();
new WOW().init();
setTimeout(function () {
$('.count5').counter();
}, 3000);
}
</script>
Then select your server connect component in App Structure, add new static event> server connect > done and enter: counterInit()
Then you can use:
dmx-bind:data-to="sc_BookingStats.data.q_BookingStats_sel.totalitems"
thanks, will give that try 
thank you so much
for some reason it isnt working for me. I took your JS and put it in place of mine in the footer. I added the “done” and counterInit() on teh SC and copy pasted the line in place of what I had and now I just get NaN.
Do you see any errors in the browser console?
yeah getting this:
Uncaught ReferenceError: WOW is not defined
at counterInit (job-summary.php?transport_request_id=17:581)
at n.eval (eval at (dmxAppConnect.js:1), :3:1)
at n (appConnect.js:472)
at n.dispatch (jquery-3.4.1.min.js:2)
at n.v.handle (jquery-3.4.1.min.js:2)
at n.dispatchEvent (BaseComponent.js:203)
at n._done (fetch.js:459)
at n.onload (fetch.js:463)
What script are you using? Is its js included on the page? Do you have a link to this page where i can check it?
the JS you supplied above is copy pasted into the footer of the page above the /body tag as per other JS includes etc. i will message you the link to the site as its on dev on my machine but is accessible
Problem solved in private messages. Some timeout was required for the counter function to work properly with dynamic data.
I’m trying exactly the same thing. Can you give the details on the timeout that was implemented?
Any chance of the details of this solution? All I get is a zero when using dmx-bind.
Sorry to bump this. I need to get it working and it’s frustrating that there’s a solution but it’s been provided via private message so I can’t see it. Could you post it here @Teodor please? Cheers.
Please?