title: jQuery - How do I get my counter to load only when in view?
body: <p>I am super new to tinkering around with jQuery. I found a solution for a counter that counts up that serves the purpose for showing savings in %. </p>
  
  <p>The problem that I have with it, is that it runs as soon as the page loads, and the element is a bit further down the screen, and it looses the effect because by the time a visitor sees the site, the counter has already reached the number.</p>
  
  <p>I need to wait to load until it comes into view within the browser. I appreciate any help. Thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function ($) {
   $.fn.countTo = function (options) {
    options = options || {};
  
    return $(this).each(function () {
     // set options for current element
     var settings = $.extend({}, $.fn.countTo.defaults, {
      from:            $(this).data('from'),
      to:              $(this).data('to'),
      speed:           $(this).data('speed'),
      refreshInterval: $(this).data('refresh-interval'),
      decimals:        $(this).data('decimals')
     }, options);
  
     // how many times to update the value, and how much to increment the value on each update
     var loops = Math.ceil(settings.speed / settings.refreshInterval),
      increment = (settings.to - settings.from) / loops;
  
     // references &amp; variables that will change with each update
     var self = this,
      $self = $(this),
      loopCount = 0,
      value = settings.from,
      data = $self.data('countTo') || {};
  
     $self.data('countTo', data);
  
     // if an existing interval can be found, clear it first
     if (data.interval) {
      clearInterval(data.interval);
     }
     data.interval = setInterval(updateTimer, settings.refreshInterval);
  
     // initialize the element with the starting value
     render(value);
  
     function updateTimer() {
      value += increment;
      loopCount++;
  
      render(value);
  
      if (typeof(settings.onUpdate) == 'function') {
       settings.onUpdate.call(self, value);
      }
  
      if (loopCount &gt;= loops) {
       // remove the interval
       $self.removeData('countTo');
       clearInterval(data.interval);
       value = settings.to;
  
       if (typeof(settings.onComplete) == 'function') {
        settings.onComplete.call(self, value);
       }
      }
     }
  
     function render(value) {
      var formattedValue = settings.formatter.call(self, value, settings);
      $self.text(formattedValue);
     }
    });
   };
  
   $.fn.countTo.defaults = {
    from: 0,               // the number the element should start at
    to: 0,                 // the number the element should end at
    speed: 5000,           // how long it should take to count between the target numbers
    refreshInterval: 1000,  // how often the element should be updated
    decimals: 0,           // the number of decimal places to show
    formatter: formatter,  // handler for formatting the value before rendering
    onUpdate: null,        // callback method for every time the element is updated
    onComplete: null       // callback method for when the element finishes updating
   };
  
   function formatter(value, settings) {
    return value.toFixed(settings.decimals);
   }
  }(jQuery));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="ui-129 text-center"&gt;
    &lt;div id="counter" class="counter-item"&gt;
      &lt;!-- Icon --&gt;
      &lt;i class="fa fa-usd green"&gt;                                              
        &lt;!-- Number --&gt;
      &lt;span class="number-count" data-from="0" data-to="28" data-speed="5000" data-refresh-interval="10"&gt;&lt;/span&gt;%
      &lt;/i&gt;
      &lt;!-- Border --&gt;
      &lt;hr class="br-green" /&gt;
      &lt;!-- Heading --&gt;
      &lt;h5&gt;less than the "other guys"&lt;/h5&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End CountUP --&gt;
  
  &lt;script&gt; &lt;!-- I have this script in my custom.js folder, not in the html --&gt;
      $(document).ready(function(){
          $('.number-count').countTo();
     
      });  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>All of the CSS renders and runs properly .. if I need to add it here, please let me know, I'll be happy to do so.</p>