diff --git a/README.md b/README.md index aa0c49f..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 @@ -21,16 +21,35 @@ 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 specify options by setting them as a data-attribute, for example: `data-watch="true"`. ### 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 + +#### Option: `wait` + +If you pass in `{wait: true}` your elements' height will only be equalized as soon as they have layout. + + $('.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}); + +#### Option: `unwatch` + +Pass in `{unwatch: true}` to unwatch a set of elements that are currently watched. + + $('.yourelements').equalHeights({unwatch: true}); ### 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 @@ -47,16 +66,22 @@ 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 +#### 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 #### 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 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" diff --git a/example/example.html b/example/example.html index a948bf2..c812921 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 d05c700..cc94212 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -1,33 +1,95 @@ /*! * 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.1 + * @version 1.5.3 */ (function($) { - $.fn.equalHeights = function() { - var maxHeight = 0, - $this = $(this); - - $this.each( function() { - var height = $(this).innerHeight(); - + var watched = [], + calcMaxHeight = function($elems) { + var height, maxHeight = 0; + $elems.each(function () { + height = $(this).innerHeight(); if ( height > maxHeight ) { maxHeight = height; } }); + return maxHeight; + }, + height = 'height', + docEl = document.documentElement; + + $(window).on('resize', function () { + // 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'); + } + } + + // 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]); } + }); + + $.fn.equalHeights = function(options) { + var maxHeight, $this = $(this), i, l, isContained, res, loop; + options = options || {}; + + maxHeight = calcMaxHeight($this); - return $this.css('height', maxHeight); + 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) { + 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) { + loop = setInterval(function() { + if(maxHeight > 0) { + clearInterval(loop); + return $this.css(height, maxHeight); + } + maxHeight = calcMaxHeight($this); + }, 100); + return this; + } else { + return $this.css(height, maxHeight); + } }; - // auto-initialize plugin - $('[data-equal]').each(function(){ - var $this = $(this), - target = $this.data('equal'); - $this.find(target).equalHeights(); + // Auto-initialize plugin + $(document).on('ready', function() { + $('[data-equal]').each(function(){ + var $this = $(this), + options = $this.data(), + target = options.equal; + $this.find(target).equalHeights(options); + }); }); })(jQuery); diff --git a/jquery.equalheights.min.js b/jquery.equalheights.min.js index 6bba224..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.1 + * @version 1.5.3 */ -!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="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); diff --git a/package.json b/package.json index ce7792d..97ef162 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,30 @@ { - "name": "jquery.equalHeights", - "version": "1.5.2", + "name": "jquery.equalheights", + "version": "1.5.3", + "description": "Simple equal heights jQuery plugin", + "main": "jquery.equalheights.min.js", "dependencies": { - "load-grunt-tasks": "~0.1.0" + "load-grunt-tasks": "~3.3.0", + "jquery": ">=1.7" }, "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" + }, + "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" } }