Archived topic
JQuery help
5 replies · Started by David on January 30, 2019
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>
But when you load the below the numbers are static. Please help.
http://185.20.51.60/~beautifulpropert/our-history/
Thanks
Dave
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.
Thank you
You're welcome
Any ideas how I can get the % simple to show in the circles?...
Maybe with a span tag something like this:
<div class="circle-container">
<span class="resultscircle">77</span>%
</div>