Count Count Start when we reach this point.

Question

We do a script to count the number, but the problem is that when we update and get the number of page counts, but we want someone to send that number or point, and then count the number.

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 the link for the full working code: - Jsfiddle

Answer 1

I changed the code a bit. check fiddle

using a data attribute like this

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

we can track the counter and then increase it.

Answer 2

<div class="row">

  <div id="startcount"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>

JAVASCRIPT: -

$(document).ready(function () {
document.getElementById("startcount").onmouseover = function() {
 $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 4000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });  // code to run when the user hovers over the div
};
});

I think this solves your problem ...