CODEWITHSUNDEEP
javascripthtmlcss
PythonSOS
PythonSOS

Reputation: 359

Counter does not begin counting upon page load

I am currently trying to make a counter for the total number of downloads and clients on a website page using HTML/CSS and Javascript. For some reason, the counter I have here doesn't even start to increment. I copied this code from a separate website where the numbers do increment. I was wondering if anyone could help figure out why the numbers don't start increasing as soon as I get on the page?

<div class="row">

                <div class="col-md-6 bottommargin-sm" style="text-align: center; position: relative; right: -225px">
                  <div class="counter counter-small">
                    <span data-from="50" data-to="15065421" data-refresh-interval="80" data-speed="1000" data-comma="true" style="font-size:130%;"></span>
                  </div> 
                  <h5 class="nobottommargin" style="font-size: 150%;"><strong>Total Downloads</strong></h5>
                </div>

                <div class="col-md-6 bottommargin-sm" style="text-align: center; position: relative; left: -225px">
                  <div class="counter counter-small">
                    <span data-from="100" data-to="18465" data-refresh-interval="50" data-speed="500" data-comma="true" style="font-size:130%;"></span>
                  </div> 
                  <h5 class="nobottommargin" style="font-size: 150%;"><strong>Clients</strong></h5>
                </div>
</div>

Upvotes: 2

Views: 810

Answers (1)

Aslam
Aslam

Reputation: 9672

The code is using https://github.com/mhuggins/jquery-countTo

You need to add jQuery and CountTo Library as shown in the snippet. And then initiate the counter using the function $('.counter span').countTo();

$('.counter span').countTo();
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.min.js"></script>

<div class="row">

  <div class="col-md-6 bottommargin-sm" style="text-align: center; position: relative; ">
    <div class="counter counter-small">
      <span data-from="50" data-to="15065421" data-refresh-interval="80" data-speed="1000" data-comma="true" style="font-size:130%;"></span>
    </div>
    <h5 class="nobottommargin" style="font-size: 150%;"><strong>Total Downloads</strong></h5>
  </div>

  <div class="col-md-6 bottommargin-sm" style="text-align: center; position: relative; ">
    <div class="counter counter-small">
      <span data-from="100" data-to="18465" data-refresh-interval="50" data-speed="500" data-comma="true" style="font-size:130%;"></span>
    </div>
    <h5 class="nobottommargin" style="font-size: 150%;"><strong>Clients</strong></h5>
  </div>
</div>

Upvotes: 1

Related Questions