javascript - Large Visual Digit Counter -

i'm trying reuse code existed in theme used while back. can't seem work on own.

it should take value in html , animate digits counter, quickly.

see example: https://jsfiddle.net/96roocq1/5/

or js/css/html below:

<div class="counter_holder center" style="color:#ffffff; font-size:168px;">    <span class="counter type1" data-delay="" style="background-color: black; height:168px; line-height:168px;">1678</span>  </div> 

---

.counter_holder {   display: block;   opacity: 0;   filter: alpha(opacity: 0);   -webkit-transition: opacity 0.3s ease 0s;   -moz-transition: opacity 0.3s ease 0s;   -o-transition: opacity 0.3s ease 0s;   width: 100%;   font-size: 150px;   line-height: 150px; }  .counter_holder.left {   text-align: left; }  .counter_holder.right {   text-align: right; }  .counter_holder.center {   text-align: center; }  .counter_holder span.counter {   font-family: "oswald", sans-serif;   overflow: hidden;   display: inline-block !important;   text-align: center;   height: 150px;   font-size: inherit;   line-height: inherit; }  .counter_holder h4 {   margin: 30px 0px 0px; }  .counter_holder p {   margin: 18px 0px 0px; }  .tocounter {   float: none;   margin: 0px; } 

---

var $j = jquery.noconflict();   function resizefonts(){     "use strict";      if($j(".counter_holder").length){         $j(".counter_holder").each(function(){             var $this = $j(this);              var counterfontsize = $j(this).css("font-size");             var counterdigitswidth = $this.find('span.counter').width();              var resize = function () {                 if($this.width() <= counterdigitswidth){                      $this.css('font-size', math.min($this.width() / (0.3*10), parsefloat(counterfontsize)));                     $this.css('line-height', math.min($this.width() / (0.3*10), parsefloat(counterfontsize))+'px');                      $this.find('span.counter').css('line-height', math.min($this.width() / (0.3*10), parsefloat(counterfontsize))+'px');                     $this.find('span.counter').css('height', math.min($this.width() / (0.3*10), parsefloat(counterfontsize))+'px');                 }else{                     $this.css('font-size', parsefloat(counterfontsize));                     $this.css('line-height', parsefloat(counterfontsize)+'px');                      $this.find('span.counter').css('line-height', parsefloat(counterfontsize)+'px');                     $this.find('span.counter').css('height', parsefloat(counterfontsize)+'px');                 }       };        resize();        $j(window).on('resize orientationchange', resize);         });      } }    function inittocounter() {   "use strict";    if ($j('.counter.type1').length) {     $j('.counter.type1').each(function() {        var delay = $j(this).data('delay');       var time = 0;        if (delay !== "" && delay !== 0) {         time = delay;       }        var $this = $j(this);        if ($j('.touch .no_delay').length) {         $this.parent().css('opacity', '1');         var $max = parsefloat($this.text());         $this.countto({           from: 0,           to: $max,           speed: 1500,           refreshinterval: 50         });         resizefonts();       } else {         $this.appear(function() {           settimeout(function() {             $this.parent().css('opacity', '1');             var $max = parsefloat($this.text());             $this.countto({               from: 0,               to: $max,               speed: 1500,               refreshinterval: 50             });             resizefonts();           }, time);         }, {           accx: 0,           accy: -200         });       }      });   } } 

---

/*  * jquery.appear  * https://github.com/bas2k/jquery.appear/  * http://code.google.com/p/jquery-appear/  *  * copyright (c) 2009 michael hixson  * copyright (c) 2012 alexander brovikov  * licensed under mit license (http://www.opensource.org/licenses/mit-license.php)  */ (function($) {     $.fn.appear = function(fn, options) {          var settings = $.extend({              //arbitrary data pass fn             data: undefined,              //call fn on first appear?             one: true,              // x & y accuracy             accx: 0,             accy: 0          }, options);          return this.each(function() {              var t = $(this);              //whether element visible             t.appeared = false;              if (!fn) {                  //trigger custom event                 t.trigger('appear', settings.data);                 return;             }              var w = $(window);              //fires appear event when appropriate             var check = function() {                  //is element hidden?                 if (!t.is(':visible')) {                      //it became hidden                     t.appeared = false;                     return;                 }                  //is element inside visible window?                 var = w.scrollleft();                 var b = w.scrolltop();                 var o = t.offset();                 var x = o.left;                 var y = o.top;                  var ax = settings.accx;                 var ay = settings.accy;                 var th = t.height();                 var wh = w.height();                 var tw = t.width();                 var ww = w.width();                  if (y + th + ay >= b &&                     y <= b + wh + ay &&                     x + tw + ax >= &&                     x <= + ww + ax) {                      //trigger custom event                     if (!t.appeared) t.trigger('appear', settings.data);                  } else {                      //it scrolled out of view                     t.appeared = false;                 }             };              //create modified fn additional logic             var modifiedfn = function() {                  //mark element visible                 t.appeared = true;                  //is supposed happen once?                 if (settings.one) {                      //remove check                     w.unbind('scroll', check);                     var = $.inarray(check, $.fn.appear.checks);                     if (i >= 0) $.fn.appear.checks.splice(i, 1);                 }                  //trigger original fn                 fn.apply(this, arguments);             };              //bind modified fn element             if (settings.one) t.one('appear', settings.data, modifiedfn);             else t.bind('appear', settings.data, modifiedfn);              //check whenever window scrolls             w.scroll(check);              //check whenever dom changes             $.fn.appear.checks.push(check);              //check             (check)();         });     };      //keep queue of appearance checks     $.extend($.fn.appear, {          checks: [],         timeout: null,          //process queue         checkall: function() {             var length = $.fn.appear.checks.length;             if (length > 0) while (length--) ($.fn.appear.checks[length])();         },          //check queue asynchronously         run: function() {             if ($.fn.appear.timeout) cleartimeout($.fn.appear.timeout);             $.fn.appear.timeout = settimeout($.fn.appear.checkall, 20);         }     });      //run checks when these methods called     $.each(['append', 'prepend', 'after', 'before', 'attr',         'removeattr', 'addclass', 'removeclass', 'toggleclass',         'remove', 'css', 'show', 'hide'], function(i, n) {         var old = $.fn[n];         if (old) {             $.fn[n] = function() {                 var r = old.apply(this, arguments);                 $.fn.appear.run();                 return r;             }         }     });  })(jquery); 

thanks.