implemented target option

liabru · Mar 29, 2015 · a01fb70 · a01fb70
1 parent 9239f4e
commit a01fb70
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 50 deletions.
diff --git a/jquery.matchHeight-min.js b/jquery.matchHeight-min.js
diff --git a/jquery.matchHeight.js b/jquery.matchHeight.js
@@ -12,6 +12,16 @@
  var _previousResizeWidth = -1,
  _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
@@ -50,16 +60,6 @@
  return rows;
  };
 
- /*
- * _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,45 +198,56 @@
 
  $.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'));
  verticalPadding += _parse($that.css('padding-top')) + _parse($that.css('padding-bottom'));
  }
 
  // 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
@@ -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
@@ -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 @@ <h3>data-mh="items-b"</h3>
  </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>