CODEWITHSUNDEEP
jqueryresizeheight
ttmt
ttmt

Reputation: 4984

Jquery make element as taller as tallest element on resize

I have a jsfiddle here - https://jsfiddle.net/mx3sqksn/1/

I have two element (p tags here)

They have different heights but I don't know what the heights will be.

I need both elememts to be as tall as the tallest of the two.

I also need it be responsive so when the window is smaller and the element is taller both staye the same height.

I know there are other ways of doing this like with display: table; but I can't do that in the actual code.

        var fluid_box = function() {
          var highest = 0;
          var hi = 0;
          $(".text").each(function(){
            var h = $(this).height();
            if(h > hi){
               hi = h;
               highest = $(this).height(); 
            }

            $(".text").css('height', highest);

          });

        }

         // Fire on DOM ready
        fluid_box();

        // Fire upon resize
        $atj(window).resize(fluid_box);

Upvotes: 1

Views: 392

Answers (2)

KnightIn
KnightIn

Reputation: 18

$(".text").css('height', highest); call this outside the loop and height of both div will be equal.

Upvotes: -1

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93601

As you want this to work on resize, you need to clear the inline height styles added, then check for the tallest.

You can clear a style by setting it to an empty string. e.g. $(".text").css('height', '') which will remove the inline height="" completely. Then the height will be that of the content, until you set it inline again.

JSFiddle: https://jsfiddle.net/mx3sqksn/6/

var fluid_box = function () {
    var highest = 0;
    var hi = 0;
    $(".text").css('height', '').each(function () {
        var h = $(this).height();
        if (h > hi) {
            hi = h;
            highest = $(this).height();
        }

    });
    $('#output').html(highest);
    $(".text").css('height', highest);
}

// Fire on DOM ready
fluid_box();

// Fire upon resize
$(window).resize(fluid_box);

Note: Your JSFiddle was not firing the resize event, so changed that to $(window).resize(fluid_box);.

Upvotes: 2

Related Questions