From 23aacc7734b8881ace02f226fdfa49d12fdc20c2 Mon Sep 17 00:00:00 2001 From: Matt Banks Date: Thu, 19 Sep 2013 08:56:52 -0400 Subject: [PATCH 01/27] fix type on changelog --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index aa0c49f..9fa7b06 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ See `example.html` in examples folder. #### Version 1.5.1 -* fix bug with $.height() in jQuery 1.8+ with double padding when `box-siding` is set to `border-box` +* fix bug with $.height() in jQuery 1.8+ with double padding when `box-sizing` is set to `border-box` #### Version 1.5.0 From cd73da20aadadaef07c48a1879ba1d98f7840d37 Mon Sep 17 00:00:00 2001 From: DavidMoritz Date: Thu, 5 Feb 2015 14:06:42 -0600 Subject: [PATCH 02/27] Add option "wait" This would be implemented by someone running `$(".equal-heights").equalHeights({ wait: true });` Basically, it keeps running equalHeights until the maxHeight is greater than 0. It's really annoying when equalHeights is implemented at a time before the content has loaded and it sets the elements to be a height of 0px. This prevents this only when specifically requested by the user. Also, this opens the door to have other potential options in the future. --- jquery.equalheights.js | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/jquery.equalheights.js b/jquery.equalheights.js index d05c700..97c0f35 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -10,15 +10,27 @@ */ (function($) { - $.fn.equalHeights = function() { + $.fn.equalHeights = function(options) { var maxHeight = 0, - $this = $(this); + options = options || {}, + $this = $(this), + equalHeight = function() { + var height = $(this).innerHeight(); + + if ( height > maxHeight ) { maxHeight = height; } + }; - $this.each( function() { - var height = $(this).innerHeight(); + if(options.wait) { + var loop = setInveral(function() { + if(maxHeight > 0) { + clearInverval(loop); + return $this.css('height', maxHeight); + } + $this.each(equalHeights); + }, 100); + } - if ( height > maxHeight ) { maxHeight = height; } - }); + $this.each(equalHeights); return $this.css('height', maxHeight); }; From c3743119bc2c17ed5a89d38ed60653983e10c071 Mon Sep 17 00:00:00 2001 From: DavidMoritz Date: Thu, 5 Feb 2015 14:09:05 -0600 Subject: [PATCH 03/27] Update jquery.equalheights.js --- jquery.equalheights.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/jquery.equalheights.js b/jquery.equalheights.js index 97c0f35..565dee1 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -14,7 +14,7 @@ var maxHeight = 0, options = options || {}, $this = $(this), - equalHeight = function() { + equalHeightsFn = function() { var height = $(this).innerHeight(); if ( height > maxHeight ) { maxHeight = height; } @@ -26,11 +26,11 @@ clearInverval(loop); return $this.css('height', maxHeight); } - $this.each(equalHeights); + $this.each(equalHeightsFn); }, 100); } - $this.each(equalHeights); + $this.each(equalHeightsFn); return $this.css('height', maxHeight); }; From c539e792cd0ad16bb1c60fe25e507e1955cff197 Mon Sep 17 00:00:00 2001 From: DavidMoritz Date: Thu, 5 Feb 2015 14:27:59 -0600 Subject: [PATCH 04/27] minor adjustment Also, checking the height to be greater than "0" and the interval at "100" are arbitrary. These might be better as other options. Then the options could looks something like `{wait:true, minHeight: 100, interval: 75}` --- jquery.equalheights.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/jquery.equalheights.js b/jquery.equalheights.js index 565dee1..94f0c9a 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -12,27 +12,27 @@ $.fn.equalHeights = function(options) { var maxHeight = 0, - options = options || {}, $this = $(this), equalHeightsFn = function() { var height = $(this).innerHeight(); if ( height > maxHeight ) { maxHeight = height; } }; + options = options || {}; + + $this.each(equalHeightsFn); if(options.wait) { - var loop = setInveral(function() { + var loop = setInterval(function() { if(maxHeight > 0) { - clearInverval(loop); + clearInterval(loop); return $this.css('height', maxHeight); } $this.each(equalHeightsFn); }, 100); + } else { + return $this.css('height', maxHeight); } - - $this.each(equalHeightsFn); - - return $this.css('height', maxHeight); }; // auto-initialize plugin From bf409366fe03b983188676d973fef900057af35e Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Wed, 11 Nov 2015 20:39:31 +0100 Subject: [PATCH 05/27] Add "watch" option With `option.watch` being `true` equalHeights is reexecuted when the window resizes --- jquery.equalheights.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/jquery.equalheights.js b/jquery.equalheights.js index 94f0c9a..561da88 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -9,6 +9,15 @@ * @version 1.5.1 */ (function($) { + + var watched = []; + $(window).on("resize", function () { + for (var i = 0, l = watched.length; i < l; i++) { + if (watched[i]) { + $(watched[i]).css("height", "auto").equalHeights() + } + } + }) $.fn.equalHeights = function(options) { var maxHeight = 0, @@ -22,7 +31,7 @@ $this.each(equalHeightsFn); - if(options.wait) { + if (options.wait) { var loop = setInterval(function() { if(maxHeight > 0) { clearInterval(loop); @@ -30,6 +39,8 @@ } $this.each(equalHeightsFn); }, 100); + } else if (options.watch) { + watched.push(this) } else { return $this.css('height', maxHeight); } From 464a68a41945dc6514b28a0d2d620fad3f6fffb5 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Wed, 11 Nov 2015 20:51:51 +0100 Subject: [PATCH 06/27] Add section about options to Readme --- README.md | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9fa7b06..9db8419 100644 --- a/README.md +++ b/README.md @@ -24,9 +24,21 @@ Add `data-equal="MYELEMENTS"` to the parent container, where MYELEMENTS is div, ### Manually Initialize - $('.yourelements').equalHeights(); + $('.yourelements').equalHeights([options]); -Select whatever elements need equal height. +Select whatever elements need equal height. You can optionally pass in an object with one or more options + +#### `wait` + +If you pass in `{wait: true}` `equalHeights` is executed with a delay of 100ms. This adds additional time in which the content can change – for example when fonts are loaded and applied or when the content is changed dynamically. + + $('.yourelements').equalHeights({wait: true}) + +#### `watch` + +Pass in `{watch: true}` if you want to execute `equalHeights` on resize. This can improve the responsiveness of the elements with equalized heights. + + $('.yourelements').equalHeights({watch: true}) ### Caveats From 79b4a91fc4da9642656f83bfcb5ab74ad63b3535 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Wed, 11 Nov 2015 21:09:58 +0100 Subject: [PATCH 07/27] Updated and corrected Readme --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 9db8419..327416c 100644 --- a/README.md +++ b/README.md @@ -28,13 +28,13 @@ Add `data-equal="MYELEMENTS"` to the parent container, where MYELEMENTS is div, Select whatever elements need equal height. You can optionally pass in an object with one or more options -#### `wait` +#### Option: `wait` -If you pass in `{wait: true}` `equalHeights` is executed with a delay of 100ms. This adds additional time in which the content can change – for example when fonts are loaded and applied or when the content is changed dynamically. +If you pass in `{wait: true}` your elements' height will only be equalized if they have layout. $('.yourelements').equalHeights({wait: true}) -#### `watch` +#### Option: `watch` Pass in `{watch: true}` if you want to execute `equalHeights` on resize. This can improve the responsiveness of the elements with equalized heights. @@ -42,7 +42,7 @@ Pass in `{watch: true}` if you want to execute `equalHeights` on resize. This ca ### Caveats -If using @font-face or Google Web Fonts, you may need to wrap the function call in a `setTimeout` for 100ms-200ms (`jQuery.height()` needs to fire after the font is rendered to properly calculate the height). +If using @font-face or Google Web Fonts, you may need to wrap the function call in a `setTimeout` for 100ms-200ms or call it on `window` `load` (`jQuery.height()` needs to fire after the font is rendered to properly calculate the height). Otherwise even the `wait` option could fail here as the element might be rendered and have layout before the fonts are loaded and applied. ## Requirements/Browsers From 758d985ec529de9ef50b96914a22fc98e33354b6 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Thu, 12 Nov 2015 10:33:32 +0100 Subject: [PATCH 08/27] Execute auto initialization on document ready --- jquery.equalheights.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/jquery.equalheights.js b/jquery.equalheights.js index 561da88..8d4b41f 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -47,10 +47,12 @@ }; // auto-initialize plugin - $('[data-equal]').each(function(){ - var $this = $(this), - target = $this.data('equal'); - $this.find(target).equalHeights(); + $(document).on("ready", function() { + $('[data-equal]').each(function(){ + var $this = $(this), + target = $this.data('equal'); + $this.find(target).equalHeights(); + }); }); })(jQuery); From 023bec101b27e2732bdd07aa072f36c8a6c51564 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Thu, 12 Nov 2015 10:47:51 +0100 Subject: [PATCH 09/27] Testing & Refactoring + data-options + Tested the `watch` option function and refactored accordingly + Put the Auto initialization in document ready + Supporting options with data attributes --- jquery.equalheights.js | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/jquery.equalheights.js b/jquery.equalheights.js index 8d4b41f..3e23d2d 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -9,12 +9,12 @@ * @version 1.5.1 */ (function($) { - + var watched = []; - $(window).on("resize", function () { + $(window).on('resize', function () { for (var i = 0, l = watched.length; i < l; i++) { if (watched[i]) { - $(watched[i]).css("height", "auto").equalHeights() + $(watched[i]).css('height', 'auto').equalHeights() } } }) @@ -24,13 +24,17 @@ $this = $(this), equalHeightsFn = function() { var height = $(this).innerHeight(); - + if ( height > maxHeight ) { maxHeight = height; } }; options = options || {}; $this.each(equalHeightsFn); + if (options.watch) { + watched.push(this) + } + if (options.wait) { var loop = setInterval(function() { if(maxHeight > 0) { @@ -39,20 +43,20 @@ } $this.each(equalHeightsFn); }, 100); - } else if (options.watch) { - watched.push(this) } else { return $this.css('height', maxHeight); } }; // auto-initialize plugin - $(document).on("ready", function() { + $(document).on('ready', function() { $('[data-equal]').each(function(){ var $this = $(this), + wait = $this.data('equal-wait'), + watch = $this.data('equal-watch'), target = $this.data('equal'); - $this.find(target).equalHeights(); - }); + $this.find(target).equalHeights({'wait': wait, 'watch': watch}); + }); }); })(jQuery); From 8cdbc47ff7a72d8c1bf30196ef73880af0cc2974 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Thu, 12 Nov 2015 10:49:09 +0100 Subject: [PATCH 10/27] Version bump package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ce7792d..1265d9a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jquery.equalHeights", - "version": "1.5.2", + "version": "1.5.3", "dependencies": { "load-grunt-tasks": "~0.1.0" }, From d63cc1a4c3d6b0eb382a97cfe7e861a1b8efaecc Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Thu, 12 Nov 2015 10:49:29 +0100 Subject: [PATCH 11/27] Version bump bower.json --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 6e55e90..3167a89 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "jQuery.equalHeights", - "version": "1.5.2", + "version": "1.5.3", "main": "jQuery.equalHeights.js", "dependencies": { "jquery": ">=1.7" From a047532f917e7cb95ba2f3f501c7519a713bf3f2 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Thu, 12 Nov 2015 10:55:44 +0100 Subject: [PATCH 12/27] Document options by data-attributes in Readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 327416c..f97fbdf 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ Alternatively, install with [bower](https://github.com/bower/bower): ### Auto Initialize Add `data-equal="MYELEMENTS"` to the parent container, where MYELEMENTS is div, section, li, whatever you'd like. [See the example](https://github.com/mattbanks/jQuery.equalHeights/blob/master/example/example.html) for more information. +You can optioanlly specify the options by setting `data-equal-wait="true"` and `data-equal-watch="true"`. ### Manually Initialize From 8b273eeeae01bb4134a750b40f65487487e46c13 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Thu, 12 Nov 2015 10:58:20 +0100 Subject: [PATCH 13/27] Clarifying wait doc in Readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f97fbdf..151ec14 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Select whatever elements need equal height. You can optionally pass in an object #### Option: `wait` -If you pass in `{wait: true}` your elements' height will only be equalized if they have layout. +If you pass in `{wait: true}` your elements' height will only be equalized as soon as they have layout. $('.yourelements').equalHeights({wait: true}) From 8afc576a5086408d74be1f4f8ced76cdc378ae72 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Fri, 13 Nov 2015 15:43:30 +0100 Subject: [PATCH 14/27] Create unwatch option + improving data-options + When `equalHeights` is called with {unwatch: true}, the elements are stopped being watched + All data-attributes are now passed in as options, so that new options don't need to be specified separately any more --- jquery.equalheights.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/jquery.equalheights.js b/jquery.equalheights.js index 3e23d2d..304f7a4 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -6,7 +6,7 @@ * Uses the same license as jQuery, see: * http://docs.jquery.com/License * - * @version 1.5.1 + * @version 1.5.2 */ (function($) { @@ -31,11 +31,20 @@ $this.each(equalHeightsFn); - if (options.watch) { + if (options.watch || option.equalWatch) { watched.push(this) } - if (options.wait) { + if (options.unwatch || options.equalUnwatch) { + for (var i = 0, l = watched.length, res = []; i < l; i++) { + if (watched[i].length && !$this.is(watched[i])) { + res.push(watched[i]); + } + } + watched = res; + } + + if (options.wait || options.equalWait) { var loop = setInterval(function() { if(maxHeight > 0) { clearInterval(loop); @@ -52,10 +61,9 @@ $(document).on('ready', function() { $('[data-equal]').each(function(){ var $this = $(this), - wait = $this.data('equal-wait'), - watch = $this.data('equal-watch'), - target = $this.data('equal'); - $this.find(target).equalHeights({'wait': wait, 'watch': watch}); + options = $this.data(), + target = options.equal; + $this.find(target).equalHeights(options); }); }); From 886cba0b60061ef499c858f23b83c913038dc886 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Fri, 13 Nov 2015 15:44:27 +0100 Subject: [PATCH 15/27] Corrected typo --- jquery.equalheights.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.equalheights.js b/jquery.equalheights.js index 304f7a4..4d43b7e 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -31,7 +31,7 @@ $this.each(equalHeightsFn); - if (options.watch || option.equalWatch) { + if (options.watch || options.equalWatch) { watched.push(this) } From cc2f444d77d1b80cafc3a64049a95faf3cd43eeb Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Fri, 13 Nov 2015 15:50:00 +0100 Subject: [PATCH 16/27] Return this when option is wait or unwatch --- jquery.equalheights.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/jquery.equalheights.js b/jquery.equalheights.js index 4d43b7e..b9a0876 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -42,6 +42,7 @@ } } watched = res; + return this; } if (options.wait || options.equalWait) { @@ -52,6 +53,7 @@ } $this.each(equalHeightsFn); }, 100); + return this; } else { return $this.css('height', maxHeight); } From 01655ae5003472ad98f276c064e8d3b78a0d84bd Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Tue, 1 Dec 2015 22:30:47 +0100 Subject: [PATCH 17/27] Improving and testing watch / unwatch option --- example/example.html | 33 ++++++++++++++++++ jquery.equalheights.js | 70 +++++++++++++++++++++++++------------- jquery.equalheights.min.js | 4 +-- 3 files changed, 81 insertions(+), 26 deletions(-) diff --git a/example/example.html b/example/example.html index a948bf2..69a5c31 100644 --- a/example/example.html +++ b/example/example.html @@ -5,6 +5,7 @@ jQuery Simple Equal Heights Example @@ -59,10 +65,37 @@

Using equal heights with
data-equal="div"

+
+

Using equal heights with
data-equal="div"
und
data-watch="true"

+ + + + + +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+

Lorem ipsum dolor sit amet

+
+
+ diff --git a/jquery.equalheights.js b/jquery.equalheights.js index b9a0876..a7e920a 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -10,48 +10,70 @@ */ (function($) { - var watched = []; + var watched = [], + calcMaxHeight = function($elems) { + var height, maxHeight = 0; + $elems.each(function () { + height = $(this).innerHeight(); + if ( height > maxHeight ) { maxHeight = height; } + }); + return maxHeight; + }, + docEl = document.documentElement; + $(window).on('resize', function () { - for (var i = 0, l = watched.length; i < l; i++) { - if (watched[i]) { - $(watched[i]).css('height', 'auto').equalHeights() + // Bundle reading and writing styles to reduce synchronous layout / jank + + // Reset heights + for (var i = 0, l = watched.length, elems, _w = [], m = []; i < l; i++) { + elems = watched[i]; + // Don't waste time on elements that aren't in the DOM + if (elems.length && $.contains(docEl, elems[0]) ) { + _w.push(elems); + elems.css('height', 'auto'); } } - }) - $.fn.equalHeights = function(options) { - var maxHeight = 0, - $this = $(this), - equalHeightsFn = function() { - var height = $(this).innerHeight(); + // Calc max height + for (i = 0, l = _w.length; i < l; i++) { m[i] = calcMaxHeight(_w[i]); } + + // Set max height + for (i = 0; i < l; i++) { _w[i].css('height', m[i]); } + }); - if ( height > maxHeight ) { maxHeight = height; } - }; + $.fn.equalHeights = function(options) { + var maxHeight, $this = $(this), i, l, isContained, res, loop; options = options || {}; - $this.each(equalHeightsFn); + maxHeight = calcMaxHeight($this); - if (options.watch || options.equalWatch) { - watched.push(this) + if (options.watch) { + for (i = 0, l = watched.length, isContained; i < l; i++) { + if ($this.is(watched[i])) { + isContained = true; + break; + } + } + if (!isContained) { + watched.push($this); + } } - if (options.unwatch || options.equalUnwatch) { - for (var i = 0, l = watched.length, res = []; i < l; i++) { - if (watched[i].length && !$this.is(watched[i])) { - res.push(watched[i]); - } + if (options.unwatch) { + for (i = 0, l = watched.length, res = []; i < l; i++) { + if (!$this.is(watched[i])) { res.push(watched[i]); } } watched = res; return this; } - if (options.wait || options.equalWait) { - var loop = setInterval(function() { + if (options.wait) { + loop = setInterval(function() { if(maxHeight > 0) { clearInterval(loop); return $this.css('height', maxHeight); } - $this.each(equalHeightsFn); + maxHeight = calcMaxHeight($this); }, 100); return this; } else { @@ -59,7 +81,7 @@ } }; - // auto-initialize plugin + // Auto-initialize plugin $(document).on('ready', function() { $('[data-equal]').each(function(){ var $this = $(this), diff --git a/jquery.equalheights.min.js b/jquery.equalheights.min.js index 6bba224..128e039 100644 --- a/jquery.equalheights.min.js +++ b/jquery.equalheights.min.js @@ -6,6 +6,6 @@ * Uses the same license as jQuery, see: * http://docs.jquery.com/License * - * @version 1.5.1 + * @version 1.5.2 */ -!function(a){a.fn.equalHeights=function(){var b=0,c=a(this);return c.each(function(){var c=a(this).innerHeight();c>b&&(b=c)}),c.css("height",b)},a("[data-equal]").each(function(){var b=a(this),c=b.data("equal");b.find(c).equalHeights()})}(jQuery); \ No newline at end of file +!function(a){var b=[],c=function(b){var c,d=0;return b.each(function(){c=a(this).innerHeight(),c>d&&(d=c)}),d},d=document.documentElement;a(window).on("resize",function(){for(var e,f=0,g=b.length,h=[],i=[];g>f;f++)e=b[f],e.length&&a.contains(d,e[0])&&(h.push(e),e.css("height","auto"));for(f=0,g=h.length;g>f;f++)i[f]=c(h[f]);for(f=0;g>f;f++)h[f].css("height",i[f])}),a.fn.equalHeights=function(d){var e,f,g,h,i,j,k=a(this);if(d=d||{},e=c(k),d.watch){for(f=0,g=b.length,h;g>f;f++)if(k.is(b[f])){h=!0;break}h||b.push(k)}if(d.unwatch){for(f=0,g=b.length,i=[];g>f;f++)k.is(b[f])||i.push(b[f]);return b=i,this}return d.wait?(j=setInterval(function(){return e>0?(clearInterval(j),k.css("height",e)):void(e=c(k))},100),this):k.css("height",e)},a(document).on("ready",function(){a("[data-equal]").each(function(){var b=a(this),c=b.data(),d=c.equal;b.find(d).equalHeights(c)})})}(jQuery); \ No newline at end of file From 829731e6d3bcdb5ed57d82276b6961039fe366f3 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Tue, 1 Dec 2015 22:44:12 +0100 Subject: [PATCH 18/27] Adding unwatch documentation + other changes --- README.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 151ec14..7195d13 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ Alternatively, install with [bower](https://github.com/bower/bower): ### Auto Initialize Add `data-equal="MYELEMENTS"` to the parent container, where MYELEMENTS is div, section, li, whatever you'd like. [See the example](https://github.com/mattbanks/jQuery.equalHeights/blob/master/example/example.html) for more information. -You can optioanlly specify the options by setting `data-equal-wait="true"` and `data-equal-watch="true"`. +You can specify options by setting them as a data-attribute, for example: `data-watch="true"`. ### Manually Initialize @@ -33,13 +33,19 @@ Select whatever elements need equal height. You can optionally pass in an object If you pass in `{wait: true}` your elements' height will only be equalized as soon as they have layout. - $('.yourelements').equalHeights({wait: true}) + $('.yourelements').equalHeights({wait: true}); #### Option: `watch` Pass in `{watch: true}` if you want to execute `equalHeights` on resize. This can improve the responsiveness of the elements with equalized heights. - $('.yourelements').equalHeights({watch: true}) + $('.yourelements').equalHeights({watch: true}); + +#### Option: `unwatch` + +Pass in `{unwatch: true}` to remove a set of elements that are currently watched. + + $('.yourelements').equalHeights({unwatch: true}); ### Caveats From da22373ac257c6f569d9d91e60de54cae170d694 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Tue, 1 Dec 2015 22:45:54 +0100 Subject: [PATCH 19/27] Changing irritating phrasing --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7195d13..6060308 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ Pass in `{watch: true}` if you want to execute `equalHeights` on resize. This ca #### Option: `unwatch` -Pass in `{unwatch: true}` to remove a set of elements that are currently watched. +Pass in `{unwatch: true}` to unwatch a set of elements that are currently watched. $('.yourelements').equalHeights({unwatch: true}); From b924916def2b5b54f0323deb25b83d7232481aa3 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Tue, 1 Dec 2015 22:52:28 +0100 Subject: [PATCH 20/27] Improving minifaction process --- jquery.equalheights.js | 9 +++++---- jquery.equalheights.min.js | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/jquery.equalheights.js b/jquery.equalheights.js index a7e920a..5412377 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -19,6 +19,7 @@ }); return maxHeight; }, + height = 'height', docEl = document.documentElement; $(window).on('resize', function () { @@ -30,7 +31,7 @@ // Don't waste time on elements that aren't in the DOM if (elems.length && $.contains(docEl, elems[0]) ) { _w.push(elems); - elems.css('height', 'auto'); + elems.css(height, 'auto'); } } @@ -38,7 +39,7 @@ for (i = 0, l = _w.length; i < l; i++) { m[i] = calcMaxHeight(_w[i]); } // Set max height - for (i = 0; i < l; i++) { _w[i].css('height', m[i]); } + for (i = 0; i < l; i++) { _w[i].css(height, m[i]); } }); $.fn.equalHeights = function(options) { @@ -71,13 +72,13 @@ loop = setInterval(function() { if(maxHeight > 0) { clearInterval(loop); - return $this.css('height', maxHeight); + return $this.css(height, maxHeight); } maxHeight = calcMaxHeight($this); }, 100); return this; } else { - return $this.css('height', maxHeight); + return $this.css(height, maxHeight); } }; diff --git a/jquery.equalheights.min.js b/jquery.equalheights.min.js index 128e039..723a407 100644 --- a/jquery.equalheights.min.js +++ b/jquery.equalheights.min.js @@ -8,4 +8,4 @@ * * @version 1.5.2 */ -!function(a){var b=[],c=function(b){var c,d=0;return b.each(function(){c=a(this).innerHeight(),c>d&&(d=c)}),d},d=document.documentElement;a(window).on("resize",function(){for(var e,f=0,g=b.length,h=[],i=[];g>f;f++)e=b[f],e.length&&a.contains(d,e[0])&&(h.push(e),e.css("height","auto"));for(f=0,g=h.length;g>f;f++)i[f]=c(h[f]);for(f=0;g>f;f++)h[f].css("height",i[f])}),a.fn.equalHeights=function(d){var e,f,g,h,i,j,k=a(this);if(d=d||{},e=c(k),d.watch){for(f=0,g=b.length,h;g>f;f++)if(k.is(b[f])){h=!0;break}h||b.push(k)}if(d.unwatch){for(f=0,g=b.length,i=[];g>f;f++)k.is(b[f])||i.push(b[f]);return b=i,this}return d.wait?(j=setInterval(function(){return e>0?(clearInterval(j),k.css("height",e)):void(e=c(k))},100),this):k.css("height",e)},a(document).on("ready",function(){a("[data-equal]").each(function(){var b=a(this),c=b.data(),d=c.equal;b.find(d).equalHeights(c)})})}(jQuery); \ No newline at end of file +!function(a){var b=[],c=function(b){var c,d=0;return b.each(function(){c=a(this).innerHeight(),c>d&&(d=c)}),d},d="height",e=document.documentElement;a(window).on("resize",function(){for(var f,g=0,h=b.length,i=[],j=[];h>g;g++)f=b[g],f.length&&a.contains(e,f[0])&&(i.push(f),f.css(d,"auto"));for(g=0,h=i.length;h>g;g++)j[g]=c(i[g]);for(g=0;h>g;g++)i[g].css(d,j[g])}),a.fn.equalHeights=function(e){var f,g,h,i,j,k,l=a(this);if(e=e||{},f=c(l),e.watch){for(g=0,h=b.length,i;h>g;g++)if(l.is(b[g])){i=!0;break}i||b.push(l)}if(e.unwatch){for(g=0,h=b.length,j=[];h>g;g++)l.is(b[g])||j.push(b[g]);return b=j,this}return e.wait?(k=setInterval(function(){return f>0?(clearInterval(k),l.css(d,f)):void(f=c(l))},100),this):l.css(d,f)},a(document).on("ready",function(){a("[data-equal]").each(function(){var b=a(this),c=b.data(),d=c.equal;b.find(d).equalHeights(c)})})}(jQuery); \ No newline at end of file From e6aaa00e2a8f0d97d3f096bf19d7f6e53fe6461d Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Tue, 1 Dec 2015 22:57:47 +0100 Subject: [PATCH 21/27] Adding to the list of contributors --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 6060308..35630f6 100644 --- a/README.md +++ b/README.md @@ -66,6 +66,7 @@ See `example.html` in examples folder. * [betweenbrain](https://github.com/betweenbrain) * [Korri](https://github.com/Korri) * [pafnuty](https://github.com/pafnuty) +* [osartun](https://github.com/osartun) ### Changelog From 4f9081986061f5c3eed29a620f0ce3fd0600cd02 Mon Sep 17 00:00:00 2001 From: Oliver Sartun Date: Tue, 1 Dec 2015 23:16:24 +0100 Subject: [PATCH 22/27] Fallback width for older browsers --- example/example.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/example.html b/example/example.html index 69a5c31..c812921 100644 --- a/example/example.html +++ b/example/example.html @@ -17,7 +17,7 @@ .row { display: block; margin: 20px 0;} @media screen and (max-width: 960px) { body { width: 90%; } - .column1, .column2, .column3 { width: calc(30% - 40px); } + .column1, .column2, .column3 { width: 20%; width: calc(30% - 40px); } } From 8389886c859770dfd4b345a3018590a17746c8aa Mon Sep 17 00:00:00 2001 From: Matt Banks Date: Wed, 2 Dec 2015 08:43:15 -0500 Subject: [PATCH 23/27] version bump, add changelog --- README.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 35630f6..4f3b8c2 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # jQuery Simple Equal Heights -Version 1.5.2 +Version 1.5.3 ## Summary @@ -40,7 +40,7 @@ If you pass in `{wait: true}` your elements' height will only be equalized as so Pass in `{watch: true}` if you want to execute `equalHeights` on resize. This can improve the responsiveness of the elements with equalized heights. $('.yourelements').equalHeights({watch: true}); - + #### Option: `unwatch` Pass in `{unwatch: true}` to unwatch a set of elements that are currently watched. @@ -70,6 +70,11 @@ See `example.html` in examples folder. ### Changelog +#### Version 1.5.3 + +* major rewrite (props [osartun](https://github.com/osartun)) +* add `watch`, `unwatch`, and `wait` options + #### Version 1.5.2 * version bump for bower From e07c0f06bff99195540e34623e04abe69682ce40 Mon Sep 17 00:00:00 2001 From: Matt Banks Date: Wed, 2 Dec 2015 08:43:21 -0500 Subject: [PATCH 24/27] bump packages --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 1265d9a..b085e0d 100644 --- a/package.json +++ b/package.json @@ -2,12 +2,12 @@ "name": "jquery.equalHeights", "version": "1.5.3", "dependencies": { - "load-grunt-tasks": "~0.1.0" + "load-grunt-tasks": "~3.3.0" }, "devDependencies": { - "grunt": "~0.4.1", - "grunt-contrib-jshint": "~0.6.4", - "grunt-contrib-uglify": "~0.2.4", - "grunt-contrib-watch": "~0.5.3" + "grunt": "~0.4.5", + "grunt-contrib-jshint": "~0.11.3", + "grunt-contrib-uglify": "~0.11.0", + "grunt-contrib-watch": "~0.6.1" } } From 4609d3b6621de978dcc3bfd36aa24c84f6970e17 Mon Sep 17 00:00:00 2001 From: Matt Banks Date: Wed, 2 Dec 2015 08:43:32 -0500 Subject: [PATCH 25/27] version bump, copyright year bump --- jquery.equalheights.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.equalheights.js b/jquery.equalheights.js index 5412377..cc94212 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -1,12 +1,12 @@ /*! * Simple jQuery Equal Heights * - * Copyright (c) 2013 Matt Banks + * Copyright (c) 2015 Matt Banks * Dual licensed under the MIT and GPL licenses. * Uses the same license as jQuery, see: * http://docs.jquery.com/License * - * @version 1.5.2 + * @version 1.5.3 */ (function($) { From 1e50dc032afdfb9c93314bd657a7636ea4d52e10 Mon Sep 17 00:00:00 2001 From: Matt Banks Date: Wed, 2 Dec 2015 08:46:56 -0500 Subject: [PATCH 26/27] version bump --- jquery.equalheights.min.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/jquery.equalheights.min.js b/jquery.equalheights.min.js index 723a407..ee5b3e9 100644 --- a/jquery.equalheights.min.js +++ b/jquery.equalheights.min.js @@ -1,11 +1,15 @@ /*! * Simple jQuery Equal Heights * - * Copyright (c) 2013 Matt Banks + * Copyright (c) 2015 Matt Banks * Dual licensed under the MIT and GPL licenses. * Uses the same license as jQuery, see: * http://docs.jquery.com/License * - * @version 1.5.2 + * @version 1.5.3 */ -!function(a){var b=[],c=function(b){var c,d=0;return b.each(function(){c=a(this).innerHeight(),c>d&&(d=c)}),d},d="height",e=document.documentElement;a(window).on("resize",function(){for(var f,g=0,h=b.length,i=[],j=[];h>g;g++)f=b[g],f.length&&a.contains(e,f[0])&&(i.push(f),f.css(d,"auto"));for(g=0,h=i.length;h>g;g++)j[g]=c(i[g]);for(g=0;h>g;g++)i[g].css(d,j[g])}),a.fn.equalHeights=function(e){var f,g,h,i,j,k,l=a(this);if(e=e||{},f=c(l),e.watch){for(g=0,h=b.length,i;h>g;g++)if(l.is(b[g])){i=!0;break}i||b.push(l)}if(e.unwatch){for(g=0,h=b.length,j=[];h>g;g++)l.is(b[g])||j.push(b[g]);return b=j,this}return e.wait?(k=setInterval(function(){return f>0?(clearInterval(k),l.css(d,f)):void(f=c(l))},100),this):l.css(d,f)},a(document).on("ready",function(){a("[data-equal]").each(function(){var b=a(this),c=b.data(),d=c.equal;b.find(d).equalHeights(c)})})}(jQuery); \ No newline at end of file +!function(a){var b=[],c=function(b){var c,d=0;return b.each(function(){c=a(this).innerHeight(),c>d&&(d=c)}),d},d="height",e=document.documentElement;a(window).on("resize",function(){ +for(var f,g=0,h=b.length,i=[],j=[];h>g;g++)f=b[g],f.length&&a.contains(e,f[0])&&(i.push(f),f.css(d,"auto")); +for(g=0,h=i.length;h>g;g++)j[g]=c(i[g]); +for(g=0;h>g;g++)i[g].css(d,j[g])}),a.fn.equalHeights=function(e){var f,g,h,i,j,k,l=a(this);if(e=e||{},f=c(l),e.watch){for(g=0,h=b.length,i;h>g;g++)if(l.is(b[g])){i=!0;break}i||b.push(l)}if(e.unwatch){for(g=0,h=b.length,j=[];h>g;g++)l.is(b[g])||j.push(b[g]);return b=j,this}return e.wait?(k=setInterval(function(){return f>0?(clearInterval(k),l.css(d,f)):void(f=c(l))},100),this):l.css(d,f)}, +a(document).on("ready",function(){a("[data-equal]").each(function(){var b=a(this),c=b.data(),d=c.equal;b.find(d).equalHeights(c)})})}(jQuery); From bc879d4f13cbc90c52afc1106764b06fa67d49fe Mon Sep 17 00:00:00 2001 From: Matt Banks Date: Thu, 3 Dec 2015 12:43:37 -0500 Subject: [PATCH 27/27] add info and change name for npm publishing --- package.json | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b085e0d..97ef162 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,30 @@ { - "name": "jquery.equalHeights", + "name": "jquery.equalheights", "version": "1.5.3", + "description": "Simple equal heights jQuery plugin", + "main": "jquery.equalheights.min.js", "dependencies": { - "load-grunt-tasks": "~3.3.0" + "load-grunt-tasks": "~3.3.0", + "jquery": ">=1.7" }, "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.11.3", "grunt-contrib-uglify": "~0.11.0", "grunt-contrib-watch": "~0.6.1" + }, + "repository": { + "type": "git", + "url": "https://github.com/mattbanks/jQuery.equalHeights" + }, + "keywords": [ + "JavaScript", + "jQuery", + "equal heights" + ], + "author": "Matt Banks <@mattbanks> (mattbanks.me)", + "license": "Dual licensed under the MIT and GPL licenses", + "bugs": { + "url": "https://github.com/mattbanks/jQuery.equalHeights/issues" } }