Bharat Negi Bharat Negi - 17 days ago 8
jQuery Question

Number Count Start when we reach that point

We make on script for number count but the problem is that when we refresh and got to page number count start but We want when any one go that number or point then number count start.

Css:-

.office{padding-right: 5px; padding-left: 5px;}
.office div{margin-bottom:5px;}
.office i {margin-right:0px;}
.office i img{width: 35px; height: 35px;}
.office div span{ font-size: 36px; position: relative; top: 10px;}
.office p{ font-size: 13px; margin:0; padding:0;}


Js:-

$(document).ready(function () {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});


HTML:-

<div class="row">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="col-md-12 m-b-xm">
<div class="col-xs-4 office">
<div>
<i><img src="images/office-ico.jpg" alt=""></i>
<span class="count">10</span>
</div>
<p>Offices Worldwide</p>
</div>
<div class="col-xs-4 office">
<div>
<i><img src="images/hard-ico.jpg" alt=""></i>
<span class="count" data-speed="1000">180</span>
</div>
<p>Hardworking People</p>
</div>
<div class="col-xs-4 office">
<div>
<i><img src="images/coun-ico.jpg" alt=""></i>
<span class="count">06</span>
</div>
<p>Countries Covered</p>
</div>
<div class="clearfix"></div>
</div>
</div>


Please check link to full working code:- Jsfiddle

zan zan
Answer

I have changed you code a bit . check this fiddle

using data attribute like this

<span class="count" data-count="10">10</span> 

we can track the count and then increment it.

Comments