diff options
| -rw-r--r-- | jquery.matchHeight-min.js | 9 | ||||
| -rw-r--r-- | jquery.matchHeight.js | 24 | ||||
| -rw-r--r-- | test.css | 23 | ||||
| -rw-r--r-- | test.html | 20 |
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) @@ -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 @@ -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> |