Start counter with a different duration and delay by setting data-counterup-time="" and data-counterup-delay=""

tobias-forkel · tobias-forkel · commit ff9dd6ae26b7 · 2016-02-05T13:15:24.000-05:00
diff --git a/README.md b/README.md
@@ -11,6 +11,7 @@ Features:
 
 * Auto-detect for integers, floats or formatted numbers
 * The plugin will also use the number of decimal places the original number is using.
+* Start counter with a different duration and delay by setting `data-counterup-time=""` and `data-counterup-delay=""`
 * Lightweight: ~1kb
 * Minimal setup
 
@@ -33,11 +34,16 @@ Usage
 
 **HTML**
 
+With default values from plugin instantiation.
 ```
 <span class="counter">1,234,567.00</span>
 <span>$</span><span class="counter">1.99</span>
 <span class="counter">12345</span>
 ```
+With values from `data` attribute.
+```
+<span class="counter" data-counterup-time="1500" data-counterup-delay="30">1,234,567.00</span>
+```
 
 **jQuery**
 
diff --git a/counterup.jquery.json b/counterup.jquery.json
@@ -1,6 +1,6 @@
 {
   "name": "counterup",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "title": "Counter-Up",
   "description": "A lightweight jQuery plugin that counts up to a targeted number when the number becomes visible.",
   "keywords": [
diff --git a/demo/demo.html b/demo/demo.html
@@ -1,10 +1,7 @@
-
 <!doctype html>
-
 <html lang="en">
 <head>
   <meta charset="utf-8">
-
   <title>Counter Up Demo</title>
   <meta name="description" content="Counter Up - jQuery Plugin Demo">
   <meta name="author" content="Benjamin Intal">
@@ -33,7 +30,7 @@
     span {
         font-size: 66px;
         color: #555;
-        margin-bottom: 350px;
+        margin-bottom: 250px;
         display: inline-block;
         font-weight: 400;
         text-align: center;
@@ -129,6 +126,11 @@ <h3>(Scroll down)</h3>
         <span class="counter" style="display: inline-block; width: 32%">1.9583</span>
         <span class="counter" style="display: inline-block; width: 32%">12345</span>
     </div>
+    <div>
+        <span class="counter" data-counterup-time="1000" data-counterup-delay="25" style="display: inline-block; width: 32%">52,147</span>
+        <span class="counter" data-counterup-time="1500" style="display: inline-block; width: 32%">1.9583</span>
+        <span class="counter" data-counterup-time="2000" style="display: inline-block; width: 32%">12345</span>
+    </div>
     <div>
         <span style="display: inline-block; width: 32%"><span>$</span><span class="counter">43,753</span></span>
         <span class="counter" style="display: inline-block; width: 32%">1,734,195.10</span>
diff --git a/jquery.counterup.js b/jquery.counterup.js
@@ -1,10 +1,10 @@
 /*!
-* jquery.counterup.js 1.0
+* jquery.counterup.js 1.1.0
 *
 * Copyright 2013, Benjamin Intal http://gambit.ph @bfintal
 * Released under the GPL v2 License
 *
-* Date: Nov 26, 2013
+* Date: Feb 05, 2016
 */
 (function( $ ){
   "use strict";
@@ -21,11 +21,15 @@
 
         // Store the object
         var $this = $(this);
-        var $settings = settings;
+
+        var counter = {
+            time: $(this).data('counterup-time') || settings.time,
+            delay: $(this).data('counterup-delay') || settings.delay
+        };
 
         var counterUpper = function() {
             var nums = [];
-            var divisions = $settings.time / $settings.delay;
+            var divisions = counter.time / counter.delay;
             var num = $this.text();
             var isComma = /[0-9]+,[0-9]+/.test(num);
             num = num.replace(/,/g, '');
@@ -61,7 +65,7 @@
             var f = function() {
                 $this.text($this.data('counterup-nums').shift());
                 if ($this.data('counterup-nums').length) {
-                    setTimeout($this.data('counterup-func'), $settings.delay);
+                    setTimeout($this.data('counterup-func'), counter.delay);
                 } else {
                     delete $this.data('counterup-nums');
                     $this.data('counterup-nums', null);
@@ -71,7 +75,7 @@
             $this.data('counterup-func', f);
 
             // Start the count up
-            setTimeout($this.data('counterup-func'), $settings.delay);
+            setTimeout($this.data('counterup-func'), counter.delay);
         };
 
         // Perform counts when the element gets into view
@@ -80,4 +84,4 @@
 
   };
 
-})( jQuery );
+})( jQuery );
diff --git a/jquery.counterup.min.js b/jquery.counterup.min.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "counterup",`
`3`		`- "version": "1.0.0",`
	`3`	`+ "version": "1.1.0",`
`4`	`4`	`"title": "Counter-Up",`
`5`	`5`	`"description": "A lightweight jQuery plugin that counts up to a targeted number when the number becomes visible.",`
`6`	`6`	`"keywords": [`