implemented target option

4 files changed, 114 insertions, 50 deletions

diff --git a/jquery.matchHeight-min.js b/jquery.matchHeight-min.js
index 11ce52f..599cd36 100644
--- a/jquery.matchHeight-min.js
+++ b/jquery.matchHeight-min.js
@@ -3,9 +3,9 @@
 * http://brm.io/jquery-match-height/
 * License: MIT
 */
-(function(c){var n=-1,f=-1,r=function(a){var b=null,d=[];c(a).each(function(){var a=c(this),k=a.offset().top-h(a.css("margin-top")),l=0<d.length?d[d.length-1]:null;null===l?d.push(a):1>=Math.floor(Math.abs(b-k))?d[d.length-1]=l.add(a):d.push(a);b=k});return d},h=function(a){return parseFloat(a)||0},p=function(a){var b={byRow:!0,remove:!1,property:"height"};if("object"===typeof a)return c.extend(b,a);"boolean"===typeof a?b.byRow=a:"remove"===a&&(b.remove=!0);return b},b=c.fn.matchHeight=function(a){a=
-p(a);if(a.remove){var e=this;this.css(a.property,"");c.each(b._groups,function(a,b){b.elements=b.elements.not(e)});return this}if(1>=this.length)return this;b._groups.push({elements:this,options:a});b._apply(this,a);return this};b._groups=[];b._throttle=80;b._maintainScroll=!1;b._beforeUpdate=null;b._afterUpdate=null;b._apply=function(a,e){var d=p(e),g=c(a),k=[g],l=c(window).scrollTop(),f=c("html").outerHeight(!0),m=g.parents().filter(":hidden");m.each(function(){var a=c(this);a.data("style-cache",
-a.attr("style"))});m.css("display","block");d.byRow&&(g.each(function(){var a=c(this),b="inline-block"===a.css("display")?"inline-block":"block";a.data("style-cache",a.attr("style"));a.css({display:b,"padding-top":"0","padding-bottom":"0","margin-top":"0","margin-bottom":"0","border-top-width":"0","border-bottom-width":"0",height:"100px"})}),k=r(g),g.each(function(){var a=c(this);a.attr("style",a.data("style-cache")||"")}));c.each(k,function(a,b){var e=c(b),f=0;d.byRow&&1>=e.length?e.css(d.property,
-""):(e.each(function(){var a=c(this),b={display:"inline-block"===a.css("display")?"inline-block":"block"};b[d.property]="";a.css(b);a.outerHeight(!1)>f&&(f=a.outerHeight(!1));a.css("display","")}),e.each(function(){var a=c(this),b=0;"border-box"!==a.css("box-sizing")&&(b+=h(a.css("border-top-width"))+h(a.css("border-bottom-width")),b+=h(a.css("padding-top"))+h(a.css("padding-bottom")));a.css(d.property,f-b)}))});m.each(function(){var a=c(this);a.attr("style",a.data("style-cache")||null)});b._maintainScroll&&
-c(window).scrollTop(l/f*c("html").outerHeight(!0));return this};b._applyDataApi=function(){var a={};c("[data-match-height], [data-mh]").each(function(){var b=c(this),d=b.attr("data-match-height")||b.attr("data-mh");a[d]=d in a?a[d].add(b):b});c.each(a,function(){this.matchHeight(!0)})};var q=function(a){b._beforeUpdate&&b._beforeUpdate(a,b._groups);c.each(b._groups,function(){b._apply(this.elements,this.options)});b._afterUpdate&&b._afterUpdate(a,b._groups)};b._update=function(a,e){if(e&&"resize"===
-e.type){var d=c(window).width();if(d===n)return;n=d}a?-1===f&&(f=setTimeout(function(){q(e);f=-1},b._throttle)):q(e)};c(b._applyDataApi);c(window).bind("load",function(a){b._update(!1,a)});c(window).bind("resize orientationchange",function(a){b._update(!0,a)})})(jQuery);
\ No newline at end of file
+(function(d){var n=-1,f=-1,g=function(a){return parseFloat(a)||0},r=function(a){var b=null,c=[];d(a).each(function(){var a=d(this),k=a.offset().top-g(a.css("margin-top")),l=0<c.length?c[c.length-1]:null;null===l?c.push(a):1>=Math.floor(Math.abs(b-k))?c[c.length-1]=l.add(a):c.push(a);b=k});return c},p=function(a){var b={byRow:!0,property:"height",target:null,remove:!1};if("object"===typeof a)return d.extend(b,a);"boolean"===typeof a?b.byRow=a:"remove"===a&&(b.remove=!0);return b},b=d.fn.matchHeight=
+function(a){var e=p(a);if(e.remove){var c=this;this.css(e.property,"");d.each(b._groups,function(a,b){b.elements=b.elements.not(c)});return this}if(1>=this.length&&!a.target)return this;b._groups.push({elements:this,options:e});b._apply(this,e);return this};b._groups=[];b._throttle=80;b._maintainScroll=!1;b._beforeUpdate=null;b._afterUpdate=null;b._apply=function(a,e){var c=p(e),h=d(a),k=[h],l=d(window).scrollTop(),f=d("html").outerHeight(!0),m=h.parents().filter(":hidden");m.each(function(){var a=
+d(this);a.data("style-cache",a.attr("style"))});m.css("display","block");c.byRow&&!c.target&&(h.each(function(){var a=d(this),b="inline-block"===a.css("display")?"inline-block":"block";a.data("style-cache",a.attr("style"));a.css({display:b,"padding-top":"0","padding-bottom":"0","margin-top":"0","margin-bottom":"0","border-top-width":"0","border-bottom-width":"0",height:"100px"})}),k=r(h),h.each(function(){var a=d(this);a.attr("style",a.data("style-cache")||"")}));d.each(k,function(a,b){var e=d(b),
+f=0;if(c.target)f=c.target.outerHeight(!1);else{if(c.byRow&&1>=e.length){e.css(c.property,"");return}e.each(function(){var a=d(this),b={display:"inline-block"===a.css("display")?"inline-block":"block"};b[c.property]="";a.css(b);a.outerHeight(!1)>f&&(f=a.outerHeight(!1));a.css("display","")})}e.each(function(){var a=d(this),b=0;a.is(c.target)||("border-box"!==a.css("box-sizing")&&(b+=g(a.css("border-top-width"))+g(a.css("border-bottom-width")),b+=g(a.css("padding-top"))+g(a.css("padding-bottom"))),
+a.css(c.property,f-b))})});m.each(function(){var a=d(this);a.attr("style",a.data("style-cache")||null)});b._maintainScroll&&d(window).scrollTop(l/f*d("html").outerHeight(!0));return this};b._applyDataApi=function(){var a={};d("[data-match-height], [data-mh]").each(function(){var b=d(this),c=b.attr("data-mh")||b.attr("data-match-height");a[c]=c in a?a[c].add(b):b});d.each(a,function(){this.matchHeight(!0)})};var q=function(a){b._beforeUpdate&&b._beforeUpdate(a,b._groups);d.each(b._groups,function(){b._apply(this.elements,
+this.options)});b._afterUpdate&&b._afterUpdate(a,b._groups)};b._update=function(a,e){if(e&&"resize"===e.type){var c=d(window).width();if(c===n)return;n=c}a?-1===f&&(f=setTimeout(function(){q(e);f=-1},b._throttle)):q(e)};d(b._applyDataApi);d(window).bind("load",function(a){b._update(!1,a)});d(window).bind("resize orientationchange",function(a){b._update(!0,a)})})(jQuery);
\ No newline at end of file
diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js
index 0f55b6c..25d0e6a 100644
--- a/jquery.matchHeight.js
+++ b/jquery.matchHeight.js
@@ -13,6 +13,16 @@
         _updateTimeout = -1;

 

     /*

+    *  _parse

+    *  value parse utility function

+    */

+

+    var _parse = function(value) {

+        // parse value and convert NaN to 0

+        return parseFloat(value) || 0;

+    };

+

+    /*

     *  _rows

     *  utility function returns array of jQuery selections representing each row

     *  (as displayed after float wrapping applied by browser)

@@ -51,16 +61,6 @@
     };

 

     /*

-    *  _parse

-    *  value parse utility function

-    */

-

-    var _parse = function(value) {

-        // parse value and convert NaN to 0

-        return parseFloat(value) || 0;

-    };

-

-    /*

     *  _parseOptions

     *  handle plugin options

     */

@@ -68,8 +68,9 @@
     var _parseOptions = function(options) {

         var opts = {

             byRow: true,

-            remove: false,

-            property: 'height'

+            property: 'height',

+            target: null,

+            remove: false

         };

 

         if (typeof options === 'object') {

@@ -110,8 +111,9 @@
             return this;

         }

 

-        if (this.length <= 1)

+        if (this.length <= 1 && !options.target) {

             return this;

+        }

 

         // keep track of this group so we can re-apply later on load and resize events

         matchHeight._groups.push({

@@ -162,7 +164,7 @@
         $hiddenParents.css('display', 'block');

 

         // get rows if using byRow, otherwise assume one row

-        if (opts.byRow) {

+        if (opts.byRow && !opts.target) {

 

             // must first force an arbitrary equal height so floating elements break evenly

             $elements.each(function() {

@@ -196,37 +198,48 @@
 

         $.each(rows, function(key, row) {

             var $row = $(row),

-                maxHeight = 0;

+                targetHeight = 0;

 

-            // skip apply to rows with only one item

-            if (opts.byRow && $row.length <= 1) {

-                $row.css(opts.property, '');

-                return;

-            }

+            if (!opts.target) {

+                // skip apply to rows with only one item

+                if (opts.byRow && $row.length <= 1) {

+                    $row.css(opts.property, '');

+                    return;

+                }

 

-            // iterate the row and find the max height

-            $row.each(function(){

-                var $that = $(this),

-                    display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';

+                // iterate the row and find the max height

+                $row.each(function(){

+                    var $that = $(this),

+                        display = $that.css('display') === 'inline-block' ? 'inline-block' : 'block';

 

-                // ensure we get the correct actual height (and not a previously set height value)

-                var css = { 'display': display };

-                css[opts.property] = '';

-                $that.css(css);

+                    // ensure we get the correct actual height (and not a previously set height value)

+                    var css = { 'display': display };

+                    css[opts.property] = '';

+                    $that.css(css);

 

-                // find the max height (including padding, but not margin)

-                if ($that.outerHeight(false) > maxHeight)

-                    maxHeight = $that.outerHeight(false);

+                    // find the max height (including padding, but not margin)

+                    if ($that.outerHeight(false) > targetHeight) {

+                        targetHeight = $that.outerHeight(false);

+                    }

 

-                // revert display block

-                $that.css('display', '');

-            });

+                    // revert display block

+                    $that.css('display', '');

+                });

+            } else {

+                // if target set, use the height of the target element

+                targetHeight = opts.target.outerHeight(false);

+            }

 

             // iterate the row and apply the height to all elements

             $row.each(function(){

                 var $that = $(this),

                     verticalPadding = 0;

 

+                // don't apply to a target

+                if ($that.is(opts.target)) {

+                    return;

+                }

+

                 // handle padding and border correctly (required when not using border-box)

                 if ($that.css('box-sizing') !== 'border-box') {

                     verticalPadding += _parse($that.css('border-top-width')) + _parse($that.css('border-bottom-width'));

@@ -234,7 +247,7 @@
                 }

 

                 // set the height (accounting for padding and border)

-                $that.css(opts.property, maxHeight - verticalPadding);

+                $that.css(opts.property, targetHeight - verticalPadding);

             });

         });

 

@@ -245,8 +258,9 @@
         });

 

         // restore scroll position if enabled

-        if (matchHeight._maintainScroll)

+        if (matchHeight._maintainScroll) {

             $(window).scrollTop((scrollTop / htmlHeight) * $('html').outerHeight(true));

+        }

 

         return this;

     };

@@ -262,7 +276,8 @@
         // generate groups by their groupId set by elements using data-match-height

         $('[data-match-height], [data-mh]').each(function() {

             var $this = $(this),

-                groupId = $this.attr('data-match-height') || $this.attr('data-mh');

+                groupId = $this.attr('data-mh') || $this.attr('data-match-height');

+

             if (groupId in groups) {

                 groups[groupId] = groups[groupId].add($this);

             } else {

@@ -282,15 +297,17 @@
     */

 

     var _update = function(event) {

-        if (matchHeight._beforeUpdate)

+        if (matchHeight._beforeUpdate) {

             matchHeight._beforeUpdate(event, matchHeight._groups);

+        }

 

         $.each(matchHeight._groups, function() {

             matchHeight._apply(this.elements, this.options);

         });

 

-        if (matchHeight._afterUpdate)

+        if (matchHeight._afterUpdate) {

             matchHeight._afterUpdate(event, matchHeight._groups);

+        }

     };

 

     matchHeight._update = function(throttle, event) {

@@ -299,8 +316,9 @@
         // fixes an event looping bug in IE8

         if (event && event.type === 'resize') {

             var windowWidth = $(window).width();

-            if (windowWidth === _previousResizeWidth)

+            if (windowWidth === _previousResizeWidth) {

                 return;

+            }

             _previousResizeWidth = windowWidth;

         }

 

diff --git a/test.css b/test.css
index 575c384..b0e9485 100644
--- a/test.css
+++ b/test.css
@@ -85,7 +85,8 @@ a, a:link, a:visited, a:active, a:hover {
 /* test items */
 
 .items-container,
-.data-test-items {
+.data-test-items,
+.target-items {
     overflow: hidden;
     margin: 0 -1%;
 }
@@ -221,6 +222,12 @@ a, a:link, a:visited, a:active, a:hover {
     height: 250px;
 }
 
+/* test target */
+
+.target-items .item {
+    overflow-y: auto;
+}
+
 /* test responsive */
 
 @media only screen and (max-width: 1024px) {
@@ -251,6 +258,14 @@ a, a:link, a:visited, a:active, a:hover {
     visibility: hidden;
 }
 
+.test-hidden .hidden-items .items-container {
+    display: none;
+}
+
+.hidden-items .items-container .item {
+    width: 48%;
+}
+
 /* test inline-block */
 
 .inline-block-items {
diff --git a/test.html b/test.html
index 5ccadcd..c066466 100644
--- a/test.html
+++ b/test.html
@@ -28,14 +28,20 @@
                     $('.items-container').each(function() {
                         $(this).children('.item').matchHeight({
                             byRow: byRow
-                            //property: 'min-height'
+                        });
+                    });
+
+                    // test target
+                    $('.target-items').each(function() {
+                        $(this).children('.item-0, .item-2, .item-3').matchHeight({
+                            target: $(this).find('.item-1')
                         });
                     });
 
                     // example of removing matchHeight
                     $('.btn-remove').click(function() {
-                        $('.items-container').each(function() {
-                            $(this).children('.item').matchHeight('remove');
+                        $('.item').matchHeight({ 
+                            remove: true 
                         });
                     });
 
@@ -216,6 +222,31 @@
                 </div>
             </div>
 
+            <div class="target-items">
+                <div class="item item-0">
+                    <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam.</p>
+                    <p>Aenean semper felis ipsum, vulputate consequat dui elementum vel.</p>
+                    <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis. Phasellus hendrerit erat sed porta imperdiet. Vivamus viverra ipsum tortor, et congue mauris porttitor ut.</p>
+                    <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis.</p>
+                    <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis. Phasellus hendrerit erat sed porta imperdiet. Vivamus viverra ipsum tortor, et congue mauris porttitor ut.</p>
+                    <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis.</p>
+                </div>
+                <div class="item item-1">
+                    <h3>Target</h3>
+                    <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis.</p>
+                </div>
+                <div class="item item-2">
+                    <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis. Phasellus hendrerit erat sed porta imperdiet. Vivamus viverra ipsum tortor, et congue mauris porttitor ut.</p>
+                    <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis. Phasellus hendrerit erat sed porta imperdiet. Vivamus viverra ipsum tortor, et congue mauris porttitor ut.</p>
+                    <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis.</p>
+                </div>
+                <div class="item item-3">
+                    <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam.</p>
+                    <p>Aenean semper felis ipsum, vulputate consequat dui elementum vel.</p>
+                    <p>Phasellus ut nibh fermentum, vulputate urna vel, semper diam. Nunc sollicitudin felis ut pellentesque fermentum. In erat mi, pulvinar sit amet tincidunt vitae, gravida id felis.</p>
+                </div>
+            </div>
+
             <div class="items-container fixed-items">
                 <div class="item item-0">
                     <p>Fixed height</p>