mattbanks · uzielweb · Sep 19, 2013 · Feb 5, 2015 · Feb 5, 2015 · Feb 5, 2015
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # jQuery Simple Equal Heights
 
-Version 1.5.2
+Version 1.5.3
 
 ## Summary
 
@@ -21,16 +21,35 @@ Alternatively, install with [bower](https://github.com/bower/bower):
 ### Auto Initialize
 
 Add `data-equal="MYELEMENTS"` to the parent container, where MYELEMENTS is div, section, li, whatever you'd like. [See the example](https://github.com/mattbanks/jQuery.equalHeights/blob/master/example/example.html) for more information.
+You can specify options by setting them as a data-attribute, for example: `data-watch="true"`.
 
 ### Manually Initialize
 
-	$('.yourelements').equalHeights();
+	$('.yourelements').equalHeights([options]);
 
-Select whatever elements need equal height.
+Select whatever elements need equal height. You can optionally pass in an object with one or more options
+
+#### Option: `wait`
+
+If you pass in `{wait: true}` your elements' height will only be equalized as soon as they have layout.
+
+	$('.yourelements').equalHeights({wait: true});
+
+#### Option: `watch`
+
+Pass in `{watch: true}` if you want to execute `equalHeights` on resize. This can improve the responsiveness of the elements with equalized heights.
+
+	$('.yourelements').equalHeights({watch: true});
+
+#### Option: `unwatch`
+
+Pass in `{unwatch: true}` to unwatch a set of elements that are currently watched.
+
+	$('.yourelements').equalHeights({unwatch: true});
 
 ### Caveats
 
-If using @font-face or Google Web Fonts, you may need to wrap the function call in a `setTimeout` for 100ms-200ms (`jQuery.height()` needs to fire after the font is rendered to properly calculate the height).
+If using @font-face or Google Web Fonts, you may need to wrap the function call in a `setTimeout` for 100ms-200ms or call it on `window` `load` (`jQuery.height()` needs to fire after the font is rendered to properly calculate the height). Otherwise even the `wait` option could fail here as the element might be rendered and have layout before the fonts are loaded and applied.
 
 ## Requirements/Browsers
 
@@ -47,16 +66,22 @@ See `example.html` in examples folder.
 * [betweenbrain](https://github.com/betweenbrain)
 * [Korri](https://github.com/Korri)
 * [pafnuty](https://github.com/pafnuty)
+* [osartun](https://github.com/osartun)
 
 ### Changelog
 
+#### Version 1.5.3
+
+* major rewrite (props [osartun](https://github.com/osartun))
+* add `watch`, `unwatch`, and `wait` options
+
 #### Version 1.5.2
 
 * version bump for bower
 
 #### Version 1.5.1
 
-* fix bug with $.height() in jQuery 1.8+ with double padding when `box-siding` is set to `border-box`
+* fix bug with $.height() in jQuery 1.8+ with double padding when `box-sizing` is set to `border-box`
 
 #### Version 1.5.0
 

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "jQuery.equalHeights",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "main": "jQuery.equalHeights.js",
   "dependencies": {
   	"jquery": ">=1.7"

diff --git a/example/example.html b/example/example.html
@@ -5,6 +5,7 @@
 	<title>jQuery Simple Equal Heights Example</title>
 	<style>
 		body { width: 960px; margin: 20px auto; }
+		pre { display: inline; }
 		.column1, .column2, .column3 { width: 250px; padding: 10px; margin: 0 20px 0 0; height: auto; float: left; color: #fff; }
 		.column1 { background: red; }
 		.column2 { background: blue; }
@@ -13,6 +14,11 @@
 		.clearfix:before, .clearfix:after { content: ""; display: table; }
 		.clearfix:after { clear: both; }
 		.clearfix { *zoom: 1; }
+		.row { display: block; margin: 20px 0;}
+		@media screen and (max-width: 960px) {
+			body { width: 90%; }
+			.column1, .column2, .column3 { width: 20%; width: calc(30% - 40px); }
+		}
 	</style>
 </head>
 <body>
@@ -59,10 +65,37 @@ <h3>Using equal heights with <pre>data-equal="div"</pre></h3>
 		</div>
 	</div>
 
+	<div data-equal="div" data-watch="true" id="equalwatch" class="clearfix">
+		<h3>Using equal heights with <pre>data-equal="div"</pre> und <pre>data-watch="true"</pre></h3>
+		<span class="row">
+			<button id="unwatch">Click here to unwatch</button>
+			<button id="reset-heights">Click here to reset heights</button>
+			<button id="watch">Click here to watch</button>
+		</span>
+		<div class="column1">
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+		</div>
+		<div class="column2">
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+		</div>
+		<div class="column3">
+			<p>Lorem ipsum dolor sit amet</p>
+		</div>
+	</div>
+
 	<script src="jquery-1.7.2.min.js"></script>
 	<script src="../jquery.equalheights.js"></script>
 	<script>
 		$('#equalheight div').equalHeights();
+		$('#unwatch').on('click', function () {
+			$('#equalwatch div').equalHeights({unwatch: true});
+		});
+		$('#reset-heights').on('click', function () {
+			$('#equalwatch div').removeAttr("style");
+		});
+		$('#watch').on('click', function () {
+			$('#equalwatch div').equalHeights({watch: true});
+		});
 	</script>
 
 </body>

diff --git a/jquery.equalheights.js b/jquery.equalheights.js
@@ -1,33 +1,95 @@
 /*!
  * Simple jQuery Equal Heights
  *
- * Copyright (c) 2013 Matt Banks
+ * Copyright (c) 2015 Matt Banks
  * Dual licensed under the MIT and GPL licenses.
  * Uses the same license as jQuery, see:
  * http://docs.jquery.com/License
  *
- * @version 1.5.1
+ * @version 1.5.3
  */
 (function($) {
 
-    $.fn.equalHeights = function() {
-        var maxHeight = 0,
-            $this = $(this);
-
-        $this.each( function() {
-            var height = $(this).innerHeight();
-
+    var watched = [],
+    calcMaxHeight = function($elems) {
+        var height, maxHeight = 0;
+        $elems.each(function () {
+            height = $(this).innerHeight();
             if ( height > maxHeight ) { maxHeight = height; }
         });
+        return maxHeight;
+    },
+    height = 'height',
+    docEl = document.documentElement;
+
+    $(window).on('resize', function () {
+        // Bundle reading and writing styles to reduce synchronous layout / jank
+
+        // Reset heights
+        for (var i = 0, l = watched.length, elems, _w = [], m = []; i < l; i++) {
+            elems = watched[i];
+            // Don't waste time on elements that aren't in the DOM
+            if (elems.length && $.contains(docEl, elems[0]) ) {
+                _w.push(elems);
+                elems.css(height, 'auto');
+            }
+        }
+
+        // Calc max height
+        for (i = 0, l = _w.length; i < l; i++) { m[i] = calcMaxHeight(_w[i]); }
+
+        // Set max height
+        for (i = 0; i < l; i++) { _w[i].css(height, m[i]); }
+    });
+
+    $.fn.equalHeights = function(options) {
+        var maxHeight, $this = $(this), i, l, isContained, res, loop;
+        options = options || {};
+
+        maxHeight = calcMaxHeight($this);
 
-        return $this.css('height', maxHeight);
+        if (options.watch) {
+            for (i = 0, l = watched.length, isContained; i < l; i++) {
+                if ($this.is(watched[i])) {
+                    isContained = true;
+                    break;
+                }
+            }
+            if (!isContained) {
+                watched.push($this);
+            }
+        }
+
+        if (options.unwatch) {
+            for (i = 0, l = watched.length, res = []; i < l; i++) {
+                if (!$this.is(watched[i])) { res.push(watched[i]); }
+            }
+            watched = res;
+            return this;
+        }
+
+        if (options.wait) {
+            loop = setInterval(function() {
+                if(maxHeight > 0) {
+                    clearInterval(loop);
+                    return $this.css(height, maxHeight);
+                }
+                maxHeight = calcMaxHeight($this);
+            }, 100);
+            return this;
+        } else {
+            return $this.css(height, maxHeight);
+        }
     };
 
-    // auto-initialize plugin
-    $('[data-equal]').each(function(){
-        var $this = $(this),
-            target = $this.data('equal');
-        $this.find(target).equalHeights();
+    // Auto-initialize plugin
+    $(document).on('ready', function() {
+       $('[data-equal]').each(function(){
+            var $this = $(this),
+                options = $this.data(),
+                target = options.equal;
+            $this.find(target).equalHeights(options);
+        });
     });
 
 })(jQuery);
diff --git a/jquery.equalheights.min.js b/jquery.equalheights.min.js
@@ -1,11 +1,15 @@
 /*!
  * Simple jQuery Equal Heights
  *
- * Copyright (c) 2013 Matt Banks
+ * Copyright (c) 2015 Matt Banks
  * Dual licensed under the MIT and GPL licenses.
  * Uses the same license as jQuery, see:
  * http://docs.jquery.com/License
  *
- * @version 1.5.1
+ * @version 1.5.3
  */
-!function(a){a.fn.equalHeights=function(){var b=0,c=a(this);return c.each(function(){var c=a(this).innerHeight();c>b&&(b=c)}),c.css("height",b)},a("[data-equal]").each(function(){var b=a(this),c=b.data("equal");b.find(c).equalHeights()})}(jQuery);
+!function(a){var b=[],c=function(b){var c,d=0;return b.each(function(){c=a(this).innerHeight(),c>d&&(d=c)}),d},d="height",e=document.documentElement;a(window).on("resize",function(){
+for(var f,g=0,h=b.length,i=[],j=[];h>g;g++)f=b[g],f.length&&a.contains(e,f[0])&&(i.push(f),f.css(d,"auto"));
+for(g=0,h=i.length;h>g;g++)j[g]=c(i[g]);
+for(g=0;h>g;g++)i[g].css(d,j[g])}),a.fn.equalHeights=function(e){var f,g,h,i,j,k,l=a(this);if(e=e||{},f=c(l),e.watch){for(g=0,h=b.length,i;h>g;g++)if(l.is(b[g])){i=!0;break}i||b.push(l)}if(e.unwatch){for(g=0,h=b.length,j=[];h>g;g++)l.is(b[g])||j.push(b[g]);return b=j,this}return e.wait?(k=setInterval(function(){return f>0?(clearInterval(k),l.css(d,f)):void(f=c(l))},100),this):l.css(d,f)},
+a(document).on("ready",function(){a("[data-equal]").each(function(){var b=a(this),c=b.data(),d=c.equal;b.find(d).equalHeights(c)})})}(jQuery);
diff --git a/package.json b/package.json
@@ -1,13 +1,30 @@
 {
-  "name": "jquery.equalHeights",
-  "version": "1.5.2",
+  "name": "jquery.equalheights",
+  "version": "1.5.3",
+  "description": "Simple equal heights jQuery plugin",
+  "main": "jquery.equalheights.min.js",
   "dependencies": {
-    "load-grunt-tasks": "~0.1.0"
+    "load-grunt-tasks": "~3.3.0",
+    "jquery": ">=1.7"
   },
   "devDependencies": {
-    "grunt": "~0.4.1",
-    "grunt-contrib-jshint": "~0.6.4",
-    "grunt-contrib-uglify": "~0.2.4",
-    "grunt-contrib-watch": "~0.5.3"
+    "grunt": "~0.4.5",
+    "grunt-contrib-jshint": "~0.11.3",
+    "grunt-contrib-uglify": "~0.11.0",
+    "grunt-contrib-watch": "~0.6.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mattbanks/jQuery.equalHeights"
+  },
+  "keywords": [
+    "JavaScript",
+    "jQuery",
+    "equal heights"
+  ],
+  "author": "Matt Banks <@mattbanks> (mattbanks.me)",
+  "license": "Dual licensed under the MIT and GPL licenses",
+  "bugs": {
+    "url": "https://github.com/mattbanks/jQuery.equalHeights/issues"
   }
 }