Javascript not working on mobile

Site URL: https://emu-orange-ea7f.squarespace.com/impact

I'm trying to create an animated number counter. I've found some code on this forum (see below). It's working fine on desktop but isn't loading on mobile. It appears to be correctly written for ajax so I'm at a loss as to why it isn't working. Can anyone help?

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var a = 0;
$(window).load(function() {

  var oTop = $('#counter').offset().top - window.innerHeight;
  if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
        {
          duration: 3000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $(this).format({format:"#,###", locale:"uk"});
            $this.text(this.countNum);
          }
        });
    });
    a = 1;
  }
});
</script>
<div id="counter">
    <div class="sqs-col sqs-col-4 counter-value" data-count="30000" data-desc="Young people">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="80000" data-desc="Problems">0</div>
  <div class="sqs-col sqs-col-4 counter-value" data-count="250000" data-desc="Solutions">0</div>
</div>

@paul2009 would you be able to help? I've seen other posts from you about this code snippet. Thanks in advance

Works on my phone and when emulated as mobile on my desktop.

37 minutes ago, Kerst said:

It's working fine on desktop but isn't loading on mobile. It appears to be correctly written for ajax so I'm at a loss as to why it isn't working.

This code has been written to check if the counter is in view when the page loads. The counter is in view on wider desktop screens so the counter increments, but on mobile the counter is below the fold and the counter does not trigger at load and will not trigger again. You'll be able to get it to trigger if you scroll quickly as the page loads.

You will need to amend the code so that it checks when the counter comes into view and triggers the animation at this point. Colin amended the code to do this in a post last year.

By the way, the code isn't Ajax-compatible but neither is your template family (Pacific) so this won't an issue for you. 

Also, I strongly recommend that you use the latest version of jQuery, not the version in your post (2.1.3) as this has security vulnerabilities.

@paul2009 thanks very much for the quick reply. I'll get it fixed.