Consistent Row Heights for Dynamic Width Elements

Question

Consistent Row Heights for Dynamic Width Elements

I've relied on Chris Coyier's Equal Height Blocks in Rows jQuery script for various projects, and it has consistently delivered great results.

However, this time I am facing a new challenge as I work on a responsive website with a fluid width main container. Unlike my previous projects with fixed resolutions, the fluid nature of the layout is causing an issue that I can't seem to resolve.

In his tutorial, Chris mentions adapting the script for fluid widths:

What About Fluid Width? One of the main advantages of using floated divs over tables is the ability to rearrange based on available horizontal space, especially useful for fluid layouts. The code can be modified to handle this by measuring block heights initially and retaining them with jQuery's data() method, then adjusting based on the original sizes rather than the resized dimensions during window resizes.

While the tutorial specifically addresses fluid width containers, my challenge lies with child elements within these fluid containers. These same elements with fluid widths are what need to be equalized, but their varying sizes depending on the container dimensions seem to disrupt the script's functionality.

I suspect that the changing 'originalHeight' property of the elements due to container resizing is causing the script to malfunction.

It's possible that my assumptions are incorrect, but regardless, the script does not seem to be effective with fluid width elements. Any assistance would be greatly appreciated!

For reference, here is a jsfiddle showcasing the issue. Simply adjust the window width to see that the container heights do not update accordingly.

To trigger the function on window resize, I'm using the following code:

$(window).resize(function() {
    columnConform();
});

Thank you in advance for your help.

jquery html css height

Answer 1

Answer №1

When you need to equalize the heights of columns within a row, consider using this simplified jQuery code:

$.fn.extend({
    equalHeights: function(options){
      var maxHeight = Math.max.apply(null, $(this).map(function(){ return $(this).height(); }).get());
      if (typeof maxHeight == 'number') $(this).height(maxHeight);
    }
 });

To execute this, you can simply use:

$(document).ready(function() {
    $(window).resize(function() {
        $('.equalize').equalHeights();
    }).trigger('resize');
})

If you want to apply this per pseudo row, check out this working demo:

<ul class="eqme">
  <li><h1>One</h1></li>
  <li><h2>Two</h2></li>
  ....
</ul>

For handling multiple elements within the same parent element, even across rows based on screen size changes, you can use this more complex script:

$.fn.extend({
equalHeights: function(){
    var topOffset = 0;
    var className = ('equalHeights' + Math.random()).replace('.','');
    $(this).each(function(){
      if ($(this).is(':visible')){
        var thisTop = $(this).offset().top;
        if (thisTop > topOffset) {
            $('.' + className).removeClass(className); 
            topOffset = thisTop;
        }
        $(this).addClass(className);
        $(this).height('auto');
        var maxHeight = Math.max.apply(null, $('.' + className).map(function(){ return $(this).outerHeight(); }).get());
        $('.' + className).height(maxHeight);
      }
    }).removeClass(className); 
}       
});

$(function(){
  $(window).resize(function(){
    $('.eqme li').equalHeights();
  }).trigger('resize');
});

A few notes to consider: Using outerHeight() may provide better results in some cases. Also, adding a clearTimeout and setTimeout within the window.resize function can prevent slowdowns during resizing.

Answer 2

When you need to equalize the heights of columns within a row, consider using this simplified jQuery code:

$.fn.extend({
    equalHeights: function(options){
      var maxHeight = Math.max.apply(null, $(this).map(function(){ return $(this).height(); }).get());
      if (typeof maxHeight == 'number') $(this).height(maxHeight);
    }
 });

To execute this, you can simply use:

$(document).ready(function() {
    $(window).resize(function() {
        $('.equalize').equalHeights();
    }).trigger('resize');
})

If you want to apply this per pseudo row, check out this working demo:

<ul class="eqme">
  <li><h1>One</h1></li>
  <li><h2>Two</h2></li>
  ....
</ul>

For handling multiple elements within the same parent element, even across rows based on screen size changes, you can use this more complex script:

$.fn.extend({
equalHeights: function(){
    var topOffset = 0;
    var className = ('equalHeights' + Math.random()).replace('.','');
    $(this).each(function(){
      if ($(this).is(':visible')){
        var thisTop = $(this).offset().top;
        if (thisTop > topOffset) {
            $('.' + className).removeClass(className); 
            topOffset = thisTop;
        }
        $(this).addClass(className);
        $(this).height('auto');
        var maxHeight = Math.max.apply(null, $('.' + className).map(function(){ return $(this).outerHeight(); }).get());
        $('.' + className).height(maxHeight);
      }
    }).removeClass(className); 
}       
});

$(function(){
  $(window).resize(function(){
    $('.eqme li').equalHeights();
  }).trigger('resize');
});

A few notes to consider: Using outerHeight() may provide better results in some cases. Also, adding a clearTimeout and setTimeout within the window.resize function can prevent slowdowns during resizing.

Answer 3

Answer №2

After carefully considering your inquiry, the following code snippet is proposed as a solution:

$(document).ready(function() {

    $(window).on('resize', function() {
        $('.equalize').css('height', determineHighest($('p')));
    }).trigger('resize');

});

function determineHighest(element) {
    var highestHeight = 0;
    element.each(function() {
        var heightVal = $(this).height();
        if(heightVal > highestHeight) {
          highestHeight = heightVal;
        }
    });
    return highestHeight;   
}

Fiddle

Answer 4

After carefully considering your inquiry, the following code snippet is proposed as a solution:

$(document).ready(function() {

    $(window).on('resize', function() {
        $('.equalize').css('height', determineHighest($('p')));
    }).trigger('resize');

});

function determineHighest(element) {
    var highestHeight = 0;
    element.each(function() {
        var heightVal = $(this).height();
        if(heightVal > highestHeight) {
          highestHeight = heightVal;
        }
    });
    return highestHeight;   
}

Fiddle

Consistent Row Heights for Dynamic Width Elements

Answer №1

Answer №2

Similar questions

How can I store a value or text to track view counts or a counter efficiently?

Auto-fill input field with URL parameter values using JavaScript or jQuery

How can I prevent an endless loop in jQuery?

How can JSON-loaded scripts be executed using jQuery?

Inaccurate rendering of border widths on IOS platform

Delete the CSS class if the element with the class ".dropdown" does not currently have the class

How can HTML text be highlighted even when it's behind a transparent div?

Updating the Facebook Comment Plugin with Jquery once it has finished loading

Is it possible to load a Twitter widget from dynamically loaded HTML using AJAX?

Use regular expressions and JavaScript to enclose a series of English letters within a wrapper

How can I add page transitions to my simple HTML website?

Tips for avoiding content appearing beneath overlapping elements

Vue.js fails to display multiple uploaded images

I'm working with Angular 12, Bootstrap 5, and ngPrime, and I'm looking to overlap a p-dialog with another element in my project

Retrieve the child element that is being clicked

Is there a way to automatically click the 'next' arrow on my image slider?

The functionality of the jQuery program is compromised when used on the Google Chrome browser

Identify when a div reaches the end of the screen using CSS

mandatory data fields for an HTML form

Provide two values and complete the third one