JQuery Facts Counter not working on mobile view

Question

I have a website with some facts counters on but I have noticed when I'm testing on my phone or mobile view on the browser the counters don't work.

I'm using the Jquery CountTo plugin. Been trying to get this to work for a couple days now. Any advice would be much appreciated.

Plugin - https://github.com/mhuggins/jquery-countTo

           //CountTo function 
           function factCounter() {
          if ($('.fact-counter').length) {
            $('.fact-counter .counter-column.animated').each(function() {
    
              var $t = $(this),
                n = $t.find(".count-text").attr("data-stop"),
                r = parseInt($t.find(".count-text").attr("data-speed"), 10);
    
              if (!$t.hasClass("counted")) {
                $t.addClass("counted");
                $({
                  countNum: $t.find(".count-text").text()
                }).animate({
                  countNum: n
                }, {
                  duration: r,
                  easing: "linear",
                  step: function() {
                    $t.find(".count-text").text(Math.floor(this.countNum));
                  },
                  complete: function() {
                    $t.find(".count-text").text(this.countNum);
                  }
                });
              }
            });
          }
        }
   
   
   
   //Call to function
     $(window).scroll('scroll', function() { 
          (function($) {
             factCounter();
          })(jQuery);
        });

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>
        <section class="fact-counter" style="background: url(images/resource/1.jpg);">
          <div class="container">
            <div class="row clearfix">
              <div class="counter-outer clearfix">
                <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                  <div class="item clearfix">
                    <div class="icon-box">
                      <i class="flaticon-star"></i>
                    </div>
                    <div class="content-text">
                      <div class="count-outer"><span class="count-text" data-speed="3000" data-stop="100">0</span><span>+</span></div>
                      <h4 class="counter-title">Site Inspections</h4>
                    </div>
                  </div>
                </article>
                <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                  <div class="item clearfix">
                    <div class="icon-box">
                      <i class="flaticon-people"></i>
                    </div>
                    <div class="content-text">
                      <div class="count-outer"><span class="count-text" data-speed="3000" data-stop="3">0</span></div>
                      <h4 class="counter-title">Qualified Staff</h4>
                    </div>
                  </div>
                </article>
                <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                  <div class="item clearfix">
                    <div class="icon-box">
                      <i class="flaticon-interface"></i>
                    </div>
                    <div class="content-text">
                      <div class="count-outer"><span class="count-text" data-speed="3000" data-stop="100">0</span><span>+</span></div>
                      <h4 class="counter-title">Project's Done</h4>
                    </div>
                  </div>
                </article>
                <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                  <div class="item clearfix">
                    <div class="icon-box">
                      <i class="flaticon-trophy"></i>
                    </div>
                    <div class="content-text">
                      <div class="count-outer"><span class="count-text" data-speed="3000" data-stop="250">0</span><span>+</span></div>
                      <h4 class="counter-title">Happy Clients</h4>
                    </div>
                  </div>
                </article>
              </div>
            </div>
          </div>
        </section>

Hi sorry my script file was long so didn't include, I call the function like so: $(window).scroll('scroll', function() { // add your functions (function ($) { headerStyle(); factCounter(); })(jQuery); }); — Shane Muirhead, Oct 04 '18 at 08:52
I have actually solved my issue by recoding the function and making use of this solution https://stackoverflow.com/questions/43202706/jquery-counto-js-on-scroll-count-numbers-not-onload — Shane Muirhead, Oct 04 '18 at 13:49

score 0 · Accepted Answer · answered Oct 04 '18 at 14:03

Decided to go with this approach, seems to have resolved my issue.

        //Facts Counter (Redone)
function isScrolledIntoView(el) {
 var elemTop = el.getBoundingClientRect().top;
 var elemBottom = el.getBoundingClientRect().bottom;

 var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
 return isVisible;
}

$(window).on('scroll', function() {
 if (isScrolledIntoView(document.getElementById('counter'))) {
  $('.count-text').countTo();

  // Unbind scroll event
  $(window).off('scroll');
 }
});

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.js"></script>
    <section id="counter" class="fact-counter" style="background: url(images/resource/1.jpg);">
        <div class="container">
            <div class="row clearfix">
                <div class="counter-outer clearfix">
                    <!--Column-->
                    <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                        <div class="item clearfix">
                            <div class="icon-box">
                                <i class="flaticon-star"></i>
                            </div>
                            <div class="content-text">
                                <div class="count-outer"><span class="count-text" data-speed="3000" data-from="0" data-to="100">0</span><span>+</span></div>
                                <h4 class="counter-title">Site Inspections</h4>
                            </div>
                        </div>
                    </article>

                    <!--Column-->
                    <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                        <div class="item clearfix">
                            <div class="icon-box">
                                <i class="flaticon-people"></i>
                            </div>
                            <div class="content-text">
                                <div class="count-outer"><span class="count-text" data-speed="3000" data-from="0" data-to="3">0</span></div>
                                <h4 class="counter-title">Qualified Staff</h4>
                            </div>
                        </div>
                    </article>

                    <!--Column-->
                    <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                        <div class="item clearfix">
                            <div class="icon-box">
                                <i class="flaticon-interface"></i>
                            </div>
                            <div class="content-text">
                                <div class="count-outer"><span class="count-text" data-speed="3000" data-from="0" data-to="100">0</span><span>+</span></div>
                                <h4 class="counter-title">Project's Done</h4>
                            </div>
                        </div>
                    </article>

                    <!--Column-->
                    <article class="column counter-column col-md-3 col-sm-6 col-xs-12 wow fadeIn" data-wow-duration="0ms">
                        <div class="item clearfix">
                            <div class="icon-box">
                                <i class="flaticon-trophy"></i>
                            </div>
                            <div class="content-text">
                                <div class="count-outer"><span class="count-text" data-speed="3000" data-from="0" data-to="250">0</span><span>+</span></div>
                                <h4 class="counter-title">Happy Clients</h4>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </section>

JQuery Facts Counter not working on mobile view

1 Answers1