added matchHeight('remove')

liabru · May 1, 2014 · 8f5f13f · 8f5f13f
1 parent a3a058c
commit 8f5f13f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 0 deletions.
diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js
@@ -7,6 +7,24 @@
 (function($) {
 
     $.fn.matchHeight = function(byRow) {
+
+        // handle matchHeight('remove')
+        if (byRow === 'remove') {
+            var that = this;
+
+            // remove fixed height from all selected elements
+            this.css('height', '');
+
+            // remove selected elements from all groups
+            $.each($.fn.matchHeight._groups, function(key, group) {
+                group.elements = group.elements.not(that);
+            });
+
+            // TODO: cleanup empty groups
+
+            return this;
+        }
+
         if (this.length <= 1)
             return this;
 

diff --git a/test.css b/test.css
@@ -69,6 +69,11 @@ a, a:link, a:visited, a:active, a:hover {
     margin: 5px 20px 5px 0;
 }
 
+.test-remove {
+    padding: 5px;
+    margin: -5px 20px;
+}
+
 /* test items */
 
 .items-container,

diff --git a/test.html b/test.html
@@ -28,6 +28,13 @@
                     $('.items-container').each(function() {
                         $(this).children('.item').matchHeight(byRow);
                     });
+
+                    // example of removing matchHeight
+                    $('.test-remove').click(function() {
+                        $('.items-container').each(function() {
+                            $(this).children('.item').matchHeight('remove');
+                        });
+                    });
                 });
 
             })();
@@ -77,6 +84,11 @@ <h1>jquery.matchHeight Tests</h1>
                         by row
                     </label>
                 </div>
+                <div class="checkbox">
+                    <label>
+                        <input class="test-remove" type="submit" value="remove all">
+                    </label>
+                </div>
             </div>
 
             <div class="items-container">