fixed support for inline-block

4 files changed, 43 insertions, 33 deletions

diff --git a/jquery.matchHeight-min.js b/jquery.matchHeight-min.js
index 07d4ba5..f570c5d 100644
--- a/jquery.matchHeight-min.js
+++ b/jquery.matchHeight-min.js
@@ -3,7 +3,8 @@
 * http://brm.io/jquery-match-height/
 * License: MIT
 */
-(function(b){b.fn.matchHeight=function(a){if("remove"===a){var d=this;this.css("height","");b.each(b.fn.matchHeight._groups,function(b,a){a.elements=a.elements.not(d)});return this}if(1>=this.length)return this;a="undefined"!==typeof a?a:!0;b.fn.matchHeight._groups.push({elements:this,byRow:a});b.fn.matchHeight._apply(this,a);return this};b.fn.matchHeight._apply=function(a,d){var c=b(a),f=[c];d&&(c.css({display:"block","padding-top":"0","padding-bottom":"0","border-top-width":"0","border-bottom-width":"0",
-height:"100px"}),f=k(c),c.css({display:"","padding-top":"","padding-bottom":"","border-top-width":"","border-bottom-width":"",height:""}));b.each(f,function(a,c){var d=b(c),f=0,e=d.parents().add(d).filter(":hidden");e.css({display:"block"});d.each(function(){var a=b(this);a.css({display:"block",height:""});a.outerHeight(!1)>f&&(f=a.outerHeight(!1));a.css({display:""})});e.css({display:""});d.each(function(){var a=b(this),c=0;"border-box"!==a.css("box-sizing")&&(c+=g(a.css("border-top-width"))+g(a.css("border-bottom-width")),
-c+=g(a.css("padding-top"))+g(a.css("padding-bottom")));a.css("height",f-c)})});return this};b.fn.matchHeight._applyDataApi=function(){var a={};b("[data-match-height], [data-mh]").each(function(){var d=b(this),c=d.attr("data-match-height");a[c]=c in a?a[c].add(d):d});b.each(a,function(){this.matchHeight(!0)})};b.fn.matchHeight._groups=[];b.fn.matchHeight._throttle=80;var h=-1,e=-1;b.fn.matchHeight._update=function(a){if(a&&"resize"===a.type){a=b(window).width();if(a===h)return;h=a}-1===e&&(e=setTimeout(function(){b.each(b.fn.matchHeight._groups,
-function(){b.fn.matchHeight._apply(this.elements,this.byRow)});e=-1},b.fn.matchHeight._throttle))};b(b.fn.matchHeight._applyDataApi);b(window).bind("load resize orientationchange",b.fn.matchHeight._update);var k=function(a){var d=null,c=[];b(a).each(function(){var a=b(this),e=a.offset().top-g(a.css("margin-top")),h=0<c.length?c[c.length-1]:null;null===h?c.push(a):1>=Math.floor(Math.abs(d-e))?c[c.length-1]=h.add(a):c.push(a);d=e});return c},g=function(a){return parseFloat(a)||0}})(jQuery);
\ No newline at end of file
+(function(b){b.fn.matchHeight=function(a){if("remove"===a){var d=this;this.css("height","");b.each(b.fn.matchHeight._groups,function(b,a){a.elements=a.elements.not(d)});return this}if(1>=this.length)return this;a="undefined"!==typeof a?a:!0;b.fn.matchHeight._groups.push({elements:this,byRow:a});b.fn.matchHeight._apply(this,a);return this};b.fn.matchHeight._apply=function(a,d){var c=b(a),f=[c];d&&(c.each(function(){var a=b(this),c="inline-block"===a.css("display")?"inline-block":"block";a.css({display:c,
+"padding-top":"0","padding-bottom":"0","border-top-width":"0","border-bottom-width":"0",height:"100px"})}),f=k(c),c.css({display:"","padding-top":"","padding-bottom":"","border-top-width":"","border-bottom-width":"",height:""}));b.each(f,function(a,c){var d=b(c),f=0,e=d.parents().add(d).filter(":hidden");e.css({display:"block"});d.each(function(){var a=b(this),c="inline-block"===a.css("display")?"inline-block":"block";a.css({display:c,height:""});a.outerHeight(!1)>f&&(f=a.outerHeight(!1));a.css({display:""})});
+e.css({display:""});d.each(function(){var a=b(this),c=0;"border-box"!==a.css("box-sizing")&&(c+=g(a.css("border-top-width"))+g(a.css("border-bottom-width")),c+=g(a.css("padding-top"))+g(a.css("padding-bottom")));a.css("height",f-c)})});return this};b.fn.matchHeight._applyDataApi=function(){var a={};b("[data-match-height], [data-mh]").each(function(){var d=b(this),c=d.attr("data-match-height");a[c]=c in a?a[c].add(d):d});b.each(a,function(){this.matchHeight(!0)})};b.fn.matchHeight._groups=[];b.fn.matchHeight._throttle=
+80;var h=-1,e=-1;b.fn.matchHeight._update=function(a){if(a&&"resize"===a.type){a=b(window).width();if(a===h)return;h=a}-1===e&&(e=setTimeout(function(){b.each(b.fn.matchHeight._groups,function(){b.fn.matchHeight._apply(this.elements,this.byRow)});e=-1},b.fn.matchHeight._throttle))};b(b.fn.matchHeight._applyDataApi);b(window).bind("load resize orientationchange",b.fn.matchHeight._update);var k=function(a){var d=null,c=[];b(a).each(function(){var a=b(this),e=a.offset().top-g(a.css("margin-top")),h=
+0<c.length?c[c.length-1]:null;null===h?c.push(a):1>=Math.floor(Math.abs(d-e))?c[c.length-1]=h.add(a):c.push(a);d=e});return c},g=function(a){return parseFloat(a)||0}})(jQuery);
\ No newline at end of file
diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js
index 367df93..713f70f 100644
--- a/jquery.matchHeight.js
+++ b/jquery.matchHeight.js
@@ -51,13 +51,18 @@
         if (byRow) {
 
             // must first force an arbitrary equal height so floating elements break evenly
-            $elements.css({
-                'display': 'block',
-                'padding-top': '0',
-                'padding-bottom': '0',
-                'border-top-width': '0',
-                'border-bottom-width': '0',
-                'height': '100px'
+            $elements.each(function() {
+                var $that = $(this),
+                    display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';
+
+                $that.css({
+                    'display': display,
+                    'padding-top': '0',
+                    'padding-bottom': '0',
+                    'border-top-width': '0',
+                    'border-bottom-width': '0',
+                    'height': '100px'
+                });
             });
 
             // get the array of rows (based on element top position)
@@ -84,10 +89,11 @@
 
             // iterate the row and find the max height
             $row.each(function(){
-                var $that = $(this);
+                var $that = $(this),
+                    display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';
 
                 // ensure we get the correct actual height (and not a previously set height value)
-                $that.css({ 'display': 'block', 'height': '' });
+                $that.css({ 'display': display, 'height': '' });
 
                 // find the max height (including padding, but not margin)
                 if ($that.outerHeight(false) > maxHeight)
diff --git a/test.css b/test.css
index c6cce16..575c384 100644
--- a/test.css
+++ b/test.css
@@ -251,24 +251,15 @@ a, a:link, a:visited, a:active, a:hover {
     visibility: hidden;
 }
 
-/* test display */
+/* test inline-block */
 
-.display-items .item-0 {
-    display: block;
-    height: 50px;
-}
-
-.display-items .item-1 {
-    display: inline;
-    height: 100px;
+.inline-block-items {
+    text-align: center;
 }
 
-.display-items .item-2 {
+.inline-block-items .item {
     display: inline-block;
-    height: 150px;
-}
-
-.display-items .item-3 {
-    display: table-cell;
-    height: 200px;
+    vertical-align: top;
+    /*width: 20%;*/
+    float: none;
 }
\ No newline at end of file
diff --git a/test.html b/test.html
index 5fb5535..1ff2168 100644
--- a/test.html
+++ b/test.html
@@ -217,18 +217,30 @@
                 </div>
             </div>
 
-            <div class="items-container display-items">
+            <div class="items-container inline-block-items">
                 <div class="item item-0">
-                    <p>display: block</p>
+                    <p>display: inline-block</p>
                 </div>
                 <div class="item item-1">
-                    <p>display: inline</p>
+                    <p>display: inline-block</p>
                 </div>
                 <div class="item item-2">
                     <p>display: inline-block</p>
                 </div>
                 <div class="item item-3">
-                    <p>display: table-cell</p>
+                    <p>display: inline-block</p>
+                </div>
+                <div class="item item-4">
+                    <p>display: inline-block</p>
+                </div>
+                <div class="item item-5">
+                    <p>display: inline-block</p>
+                </div>
+                <div class="item item-6">
+                    <p>display: inline-block</p>
+                </div>
+                <div class="item item-7">
+                    <p>display: inline-block</p>
                 </div>
             </div>