[Resolved] JQuery help

[David]

Hello

Im trying to get some number results to count in like this…
https://codepen.io/shivasurya/pen/FatiB

I’ve set up a hook to load after_main_contact which looks like the below…

<script>
$(‘.count’).each(function () {
$(this).prop(‘Counter’,0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: ‘swing’,
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
</script>

<style>
#shiva
{
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
float:left;
margin:5px;
}
.count
{
line-height: 100px;
color:white;
margin-left:30px;
font-size:25px;
}
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float:left;
margin:20px;
}
#talkbubble:before {
content:””;
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
</style>

<span class=”count”>200</span>

<span class=”count”>1000</span>

<span class=”count”>853</span>

<span class=”count”>154</span>

<span class=”count”>10</span>

<span class=”count”>87</span>

<span class=”count”>1421</span>

<span class=”count”>145</span>

<span class=”count”>78</span>

But when you load the below the numbers are static. Please help.
http://185.20.51.60/~beautifulpropert/our-history/

Thanks
Dave

[David]

Hi there,

the Javascript needs to run after the content is loaded.
So remove that code and add it to the WP_Footer hook instead.

[David]

Thank you

[David]

You’re welcome

[David]

Any ideas how I can get the % simple to show in the circles?…

http://185.20.51.60/~beautifulpropert/our-history/

[David]

Maybe with a span tag something like this:

<div class="circle-container">
    <span class="resultscircle">77</span>%
</div>

[Author]

Posts