diff options
| author | Matt Banks <mjbanks@gmail.com> | 2015-12-02 08:35:51 -0500 |
|---|---|---|
| committer | Matt Banks <mjbanks@gmail.com> | 2015-12-02 08:35:51 -0500 |
| commit | 02c20fb28f9bd896d222a807e10d320e7c738a4a (patch) | |
| tree | f64de3a1a602e59f9edac2aee696c7e98eb3a577 | |
| parent | 69d5afef56d42f30eb4804e9e8dd0a213b61f56c (diff) | |
| parent | 4f9081986061f5c3eed29a620f0ce3fd0600cd02 (diff) | |
| download | jQuery.equalHeights-02c20fb28f9bd896d222a807e10d320e7c738a4a.zip jQuery.equalHeights-02c20fb28f9bd896d222a807e10d320e7c738a4a.tar.gz jQuery.equalHeights-02c20fb28f9bd896d222a807e10d320e7c738a4a.tar.bz2 | |
Merge pull request #15 from osartun/master
Adding `watch` option among other things
| -rw-r--r-- | README.md | 26 | ||||
| -rw-r--r-- | bower.json | 2 | ||||
| -rw-r--r-- | example/example.html | 33 | ||||
| -rw-r--r-- | jquery.equalheights.js | 88 | ||||
| -rw-r--r-- | jquery.equalheights.min.js | 4 | ||||
| -rw-r--r-- | package.json | 2 |
6 files changed, 129 insertions, 26 deletions
@@ -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,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 @@ -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 @@ <title>jQuery Simple Equal Heights Example</title> <style> body { width: 960px; margin: 20px auto; } + pre { display: inline; } .column1, .column2, .column3 { width: 250px; padding: 10px; margin: 0 20px 0 0; height: auto; float: left; color: #fff; } .column1 { background: red; } .column2 { background: blue; } @@ -13,6 +14,11 @@ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } + .row { display: block; margin: 20px 0;} + @media screen and (max-width: 960px) { + body { width: 90%; } + .column1, .column2, .column3 { width: 20%; width: calc(30% - 40px); } + } </style> </head> <body> @@ -59,10 +65,37 @@ </div> </div> + <div data-equal="div" data-watch="true" id="equalwatch" class="clearfix"> + <h3>Using equal heights with <pre>data-equal="div"</pre> und <pre>data-watch="true"</pre></h3> + <span class="row"> + <button id="unwatch">Click here to unwatch</button> + <button id="reset-heights">Click here to reset heights</button> + <button id="watch">Click here to watch</button> + </span> + <div class="column1"> + <p>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.</p> + </div> + <div class="column2"> + <p>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.</p> + </div> + <div class="column3"> + <p>Lorem ipsum dolor sit amet</p> + </div> + </div> + <script src="jquery-1.7.2.min.js"></script> <script src="../jquery.equalheights.js"></script> <script> $('#equalheight div').equalHeights(); + $('#unwatch').on('click', function () { + $('#equalwatch div').equalHeights({unwatch: true}); + }); + $('#reset-heights').on('click', function () { + $('#equalwatch div').removeAttr("style"); + }); + $('#watch').on('click', function () { + $('#equalwatch div').equalHeights({watch: true}); + }); </script> </body> diff --git a/jquery.equalheights.js b/jquery.equalheights.js index 94f0c9a..5412377 100644 --- a/jquery.equalheights.js +++ b/jquery.equalheights.js @@ -6,40 +6,90 @@ * Uses the same license as jQuery, see: * http://docs.jquery.com/License * - * @version 1.5.1 + * @version 1.5.2 */ (function($) { + 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 = 0, - $this = $(this), - equalHeightsFn = function() { - var height = $(this).innerHeight(); - - if ( height > maxHeight ) { maxHeight = height; } - }; + var maxHeight, $this = $(this), i, l, isContained, res, loop; options = options || {}; - $this.each(equalHeightsFn); + maxHeight = calcMaxHeight($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) { + 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) { - var loop = setInterval(function() { + if (options.wait) { + loop = setInterval(function() { if(maxHeight > 0) { clearInterval(loop); - return $this.css('height', maxHeight); + return $this.css(height, maxHeight); } - $this.each(equalHeightsFn); + maxHeight = calcMaxHeight($this); }, 100); + return this; } else { - return $this.css('height', maxHeight); + 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..723a407 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="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 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" }, |