Number Count Start when we reach that point

Question

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

Do you want that when the user reloads the page, the counters don't start over from one, but continue from the values that they have reached by the time the page was reloaded? — Eduard Malakhov, Nov 15 '16 at 07:41
In case your goal is to start the counter when the user scrolls down to it and it comes on screen, check out the helper function described [here](http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling). You will need to call it when you expect that an element's visibility might have changed (e.g. on scroll event). — Eduard Malakhov, Nov 15 '16 at 07:50

Afsar · Accepted Answer · 2016-11-15T10:49:42.903

1

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.

edited Nov 15 '16 at 10:49

answered Nov 15 '16 at 07:43

Afsar

3,068
2
21
32

Thanks this is oky, but I what this action on page scroll with auto start – Bharat Negi Nov 15 '16 at 08:30
@BharatNegi I have updated the fiddle , according to your requirement . check out – Afsar Nov 15 '16 at 10:50

score 0 · Answer 2 · answered Nov 15 '16 at 07:34

<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 is solve your problem...

Number Count Start when we reach that point

2 Answers2