From 9a8944bc32d8da4c517d3807a578044aaa29d920 Mon Sep 17 00:00:00 2001 From: liabru Date: Sat, 28 Jun 2014 00:12:11 +0100 Subject: [PATCH] added support for hidden elements, closes #12 --- README.md | 3 ++- jquery.matchHeight-min.js | 8 +++---- jquery.matchHeight.js | 7 ++++++ test.css | 15 ++++++++++++- test.html | 45 ++++++++++++++++++++++++++++++++++++--- 5 files changed, 69 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 342660e..24d62ea 100644 --- a/README.md +++ b/README.md @@ -18,8 +18,9 @@ See the [jquery.matchHeight.js demo](http://brm.io/jquery-match-height-demo). - row aware, handles floating elements - responsive, automatically updates on window resize (can be throttled for performance) - handles mixed `padding`, `margin`, `border` values (even if every element has them different) -- accounts for `box-sizing` - handles images and other media (updates automatically after loading) +- handles hidden or none-visible elements (e.g. those inside tab controls) +- accounts for `box-sizing` - data attributes API - tested in IE8+, Chrome, Firefox, Chrome Android - can be removed when needed diff --git a/jquery.matchHeight-min.js b/jquery.matchHeight-min.js index f0eea34..07d4ba5 100644 --- a/jquery.matchHeight-min.js +++ b/jquery.matchHeight-min.js @@ -3,7 +3,7 @@ * 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),e=[c];d&&(c.css({display:"block","padding-top":"0","padding-bottom":"0","border-top-width":"0","border-bottom-width":"0", -height:"100px"}),e=k(c),c.css({display:"","padding-top":"","padding-bottom":"","border-top-width":"","border-bottom-width":"",height:""}));b.each(e,function(a,c){var d=b(c),e=0;d.each(function(){var a=b(this);a.css({display:"block",height:""});a.outerHeight(!1)>e&&(e=a.outerHeight(!1));a.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",e-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,f=-1;b.fn.matchHeight._update=function(a){if(a&&"resize"===a.type){a=b(window).width();if(a===h)return;h=a}-1===f&&(f=setTimeout(function(){b.each(b.fn.matchHeight._groups,function(){b.fn.matchHeight._apply(this.elements, -this.byRow)});f=-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),f=a.offset().top-g(a.css("margin-top")),h=0=Math.floor(Math.abs(d-f))?c[c.length-1]=h.add(a):c.push(a);d=f});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.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=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 030e159..367df93 100644 --- a/jquery.matchHeight.js +++ b/jquery.matchHeight.js @@ -78,6 +78,10 @@ var $row = $(row), maxHeight = 0; + // ensure elements are visible to prevent 0 height + var hiddenParents = $row.parents().add($row).filter(':hidden'); + hiddenParents.css({ 'display': 'block' }); + // iterate the row and find the max height $row.each(function(){ var $that = $(this); @@ -93,6 +97,9 @@ $that.css({ 'display': '' }); }); + // revert display block + hiddenParents.css({ 'display': '' }); + // iterate the row and apply the height to all elements $row.each(function(){ var $that = $(this), diff --git a/test.css b/test.css index 7fa088a..5ce6e16 100644 --- a/test.css +++ b/test.css @@ -72,7 +72,8 @@ a, a:link, a:visited, a:active, a:hover { margin: 5px 20px 5px 0; } -.test-remove { +.btn-remove, +.btn-hidden { margin: -8px 20px 0 20px; line-height: 1; border: 0; @@ -236,4 +237,16 @@ a, a:link, a:visited, a:active, a:hover { margin-left: 0; margin-right: 0; } +} + +/* test hidden */ + +.test-hidden .hidden-items > .item-0, +.test-hidden .hidden-items > .item-2 { + display: none; +} + +.test-hidden .hidden-items > .item-1, +.test-hidden .hidden-items > .item-3 { + visibility: hidden; } \ No newline at end of file diff --git a/test.html b/test.html index 1da2ae3..53e40f0 100644 --- a/test.html +++ b/test.html @@ -30,17 +30,22 @@ }); // example of removing matchHeight - $('.test-remove').click(function() { + $('.btn-remove').click(function() { $('.items-container').each(function() { $(this).children('.item').matchHeight('remove'); }); }); + + // button to show hidden elements + $('.btn-hidden').click(function() { + $('body').removeClass('test-hidden'); + }); }); })(); - +

jquery.matchHeight Tests

@@ -86,7 +91,12 @@

jquery.matchHeight Tests

+
+
+
@@ -206,6 +216,35 @@

data-mh="items-b"

Fixed height

+ +
+
+

display: none

+
+
+

visibility: hidden

+
+
+
+
+

parent display: none

+
+
+

parent display: none

+
+
+
+
+
+
+

parent visibility: hidden

+
+
+

parent visibility: hidden

+
+
+
+
\ No newline at end of file