CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bharat Negi
Bharat Negi

Reputation: 507

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

Upvotes: 4

Views: 291

Answers (2)

Afsar
Afsar

Reputation: 3124

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.

Upvotes: 1

Rajiv Choudhary
Rajiv Choudhary

Reputation: 141

<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...

Upvotes: 0

Related Questions