From cb61eed755ff6dcb592ac0d7712d2406fe9ae0d6 Mon Sep 17 00:00:00 2001
From: Tomas van Rijsse <tomas@pionect.nl>
Date: Tue, 13 Jan 2015 14:40:28 +0100
Subject: [PATCH 1/2] removal of duplicate var declarations and correct scoping
 with $.proxy

---
 grids.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/grids.js b/grids.js
index 6a5bd1c..6da44a3 100644
--- a/grids.js
+++ b/grids.js
@@ -6,10 +6,10 @@
   $.fn.equalHeight = function(){
     var heights = [];
     $.each(this, function(i, element){
-      $element = $(element);
-      var element_height;
+      var $element = $(element),
+          element_height,
       // Should we include the elements padding in it's height?
-      var includePadding = ($element.css('box-sizing') == 'border-box') || ($element.css('-moz-box-sizing') == 'border-box');
+          includePadding = ($element.css('box-sizing') == 'border-box') || ($element.css('-moz-box-sizing') == 'border-box');
       if (includePadding) {
         element_height = $element.innerHeight();
       } else {
@@ -60,13 +60,12 @@
    * Ensure equal heights now, on ready, load and resize.
    */
   $.fn.responsiveEqualHeightGrid = function() {
-    var _this = this;
     function syncHeights() {
-      var cols = _this.detectGridColumns();
-      _this.equalHeightGrid(cols);  
+      var cols = this.detectGridColumns();
+      this.equalHeightGrid(cols);
     }
-    $(window).bind('resize load', syncHeights);
-    syncHeights();
+    $(window).bind('resize load', $.proxy(syncHeights,this));
+    $.proxy(syncHeights,this);
     return this;
   };
 

From a99d5f87b7e0d67dcc8132b3743b2d078cba4b95 Mon Sep 17 00:00:00 2001
From: Tomas van Rijsse <tomas@pionect.nl>
Date: Tue, 13 Jan 2015 14:46:49 +0100
Subject: [PATCH 2/2] trigger event on an element when the height changes

---
 demo.html |  5 ++++-
 grids.js  | 25 +++++++++++++++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/demo.html b/demo.html
index ce9f5ab..a209cf1 100644
--- a/demo.html
+++ b/demo.html
@@ -8,6 +8,9 @@ <h1>Demo</h1>
 <script type="text/javascript">
 	jQuery(function($) {
 		$('.element').responsiveEqualHeightGrid();	
+        $('.element:first').on('heightResize',function(event,equalHeight,originalHeight){
+            console.log(equalHeight,originalHeight);
+        });
 	});
 </script>
 
@@ -25,7 +28,7 @@ <h1>Demo</h1>
 		Sed sed mi mauris. Etiam aliquam lacus sed odio aliquet tristique. Nunc facilisis, tellus a blandit luctus, libero ipsum malesuada lorem, in interdum velit quam sit amet eros.Sed sed mi mauris. Etiam aliquam lacus sed odio aliquet tristique. Nunc facilisis, tellus a blandit luctus, libero ipsum malesuada lorem, in interdum velit quam sit amet eros.
 	</div>
 	<div class="element">
-		Sed sed mi mauris. Etiam aliquam lacus sed odio aliquet tristique. Nunc facilisis, tellus a blandit luctus, libero ipsum malesuada lorem, in interdum velit quam sit amet eros.Sed sed mi mauris. Etiam aliquam lacus sed odio aliquet tristique. Nunc facilisis, tellus a blandit luctus, libero ipsum malesuada lorem, in interdum velit quam sit amet eros.Sed sed mi mauris. Etiam aliquam lacus sed odio aliquet tristique. Nunc facilisis, tellus a blandit luctus, libero ipsum malesuada lorem, in interdum velit quam sit amet eros.
+		Sed sed mi mauris. Etiam aliquam lacus sed odio aliquet tristique. Nunc facilisis, tellus a blandit luctus, libero ipsum malesuada lorem, in interdum velit quam sit amet eros.Sed sed mi mauris. Etiam aliquam lacus sed odio aliquet tristique. Nunc facilisis, tellus a blandit luctus, libero ipsum malesuada lorem, in interdum velit quam sit amet eros.
 	</div>
 	<div class="element">
 		Sed sed mi mauris. Etiam aliquam lacus sed odio aliquet tristique. Nunc facilisis, tellus a blandit luctus, libero ipsum malesuada lorem, in interdum velit quam sit amet eros.Sed sed mi mauris. Etiam aliquam lacus sed odio aliquet tristique. Nunc facilisis, tellus a blandit luctus, libero ipsum malesuada lorem, in interdum velit quam sit amet eros.Sed sed mi mauris. Etiam aliquam lacus sed odio aliquet tristique. Nunc facilisis, tellus a blandit luctus, libero ipsum malesuada lorem, in interdum velit quam sit amet eros.Sed sed mi mauris. Etiam aliquam lacus sed odio aliquet tristique. Nunc facilisis, tellus a blandit luctus, libero ipsum malesuada lorem, in interdum velit quam sit amet eros.
diff --git a/grids.js b/grids.js
index 6da44a3..eb3f5b6 100644
--- a/grids.js
+++ b/grids.js
@@ -4,20 +4,24 @@
    * Set all elements within the collection to have the same height.
    */
   $.fn.equalHeight = function(){
-    var heights = [];
+    var heights = [],equalHeight;
     $.each(this, function(i, element){
-      var $element = $(element),
-          element_height,
+      var $element = $(element), element_height,
       // Should we include the elements padding in it's height?
-          includePadding = ($element.css('box-sizing') == 'border-box') || ($element.css('-moz-box-sizing') == 'border-box');
+      includePadding = ($element.css('box-sizing') == 'border-box') || ($element.css('-moz-box-sizing') == 'border-box');
       if (includePadding) {
         element_height = $element.innerHeight();
       } else {
         element_height = $element.height();
       }
+      this.originalHeight = element_height;
       heights.push(element_height);
     });
-    this.css('height', Math.max.apply(window, heights) + 'px');
+    equalHeight = Math.max.apply(window, heights);
+    this.css('height',  equalHeight + 'px');
+    $.each(this, function(){
+      this.equalHeight = equalHeight;
+    });
     return this;
   };
 
@@ -61,8 +65,17 @@
    */
   $.fn.responsiveEqualHeightGrid = function() {
     function syncHeights() {
-      var cols = this.detectGridColumns();
+      var cols = this.detectGridColumns(),currentHeights = [];
+      
+      $(this).each(function(i){
+        currentHeights[i] = this.equalHeight;
+      });
       this.equalHeightGrid(cols);
+      $(this).each(function(i){
+          if(currentHeights[i]!=this.equalHeight){
+            $(this).trigger('heightResize',[this.equalHeight,this.originalHeight]);
+          }
+      });
     }
     $(window).bind('resize load', $.proxy(syncHeights,this));
     $.proxy(syncHeights,this);