From 6d9a6a7241261d092f7db9a044ca3cc28d03c3f2 Mon Sep 17 00:00:00 2001 From: liabru Date: Tue, 20 May 2014 16:57:49 +0100 Subject: [PATCH] added updated throttling --- README.md | 8 +++++++- jquery.matchHeight-min.js | 6 +++--- jquery.matchHeight.js | 20 +++++++++++++++----- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 9336848..ab393dd 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ See the [jquery.matchHeight.js demo](http://brm.io/jquery-match-height-demo). ### Features - row aware, handles floating elements -- responsive, automatically updates on window resize +- 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) @@ -103,6 +103,12 @@ If you need to manually trigger an update of all currently set equal heights gro Use the apply function directly if you wish to avoid the automatic update functionality. + $.fn.matchHeight._throttle = 80; + +By default, the `_update` method is throttled to execute at a maximum rate of once every `80ms`. +Decreasing the above `_throttle` property will update your layout quicker, appearing smoother during resize, at the expense of performance. +If you experience lagging or freezing during resize, you should increase the `_throttle` property. + ### Why not use CSS? Making robust, responsive equal height columns for _arbitrary content_ is [difficult or impossible](http://filamentgroup.com/lab/setting_equal_heights_with_jquery/) to do with CSS alone (at least without hacks or trickery, in a backwards compatible way). diff --git a/jquery.matchHeight-min.js b/jquery.matchHeight-min.js index 1e003fc..764a3c6 100644 --- a/jquery.matchHeight-min.js +++ b/jquery.matchHeight-min.js @@ -4,6 +4,6 @@ * 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":"0","border-bottom":"0",height:"100px"}), -e=k(c),c.css({display:"","padding-top":"","padding-bottom":"","border-top":"","border-bottom":"",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+=f(a.css("border-top-width"))+f(a.css("border-bottom-width")),c+=f(a.css("padding-top"))+f(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=[];var g=-1;b.fn.matchHeight._update=function(a){if(a&&"resize"===a.type){a=b(window).width();if(a===g)return;g=a}b.each(b.fn.matchHeight._groups,function(){b.fn.matchHeight._apply(this.elements,this.byRow)})};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),g=a.offset().top-f(a.css("margin-top")),h=0=Math.floor(Math.abs(d-g))?c[c.length-1]=h.add(a):c.push(a);d=g});return c},f=function(a){return parseFloat(a)||0}})(jQuery); \ No newline at end of file +e=k(c),c.css({display:"","padding-top":"","padding-bottom":"","border-top":"","border-bottom":"",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 diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js index 6ff0065..d776a9a 100644 --- a/jquery.matchHeight.js +++ b/jquery.matchHeight.js @@ -141,11 +141,12 @@ */ $.fn.matchHeight._groups = []; + $.fn.matchHeight._throttle = 80; - var previousResizeWidth = -1; + var previousResizeWidth = -1, + updateTimeout = -1; $.fn.matchHeight._update = function(event) { - // prevent update if fired from a resize event // where the viewport width hasn't actually changed // fixes an event looping bug in IE8 @@ -156,9 +157,18 @@ previousResizeWidth = windowWidth; } - $.each($.fn.matchHeight._groups, function() { - $.fn.matchHeight._apply(this.elements, this.byRow); - }); + // throttle updates + if (updateTimeout === -1) { + updateTimeout = setTimeout(function() { + + $.each($.fn.matchHeight._groups, function() { + $.fn.matchHeight._apply(this.elements, this.byRow); + }); + + updateTimeout = -1; + + }, $.fn.matchHeight._throttle); + } }; /*