CODEWITHSUNDEEP
javascriptjquerycsshaml
Justin Miller
Justin Miller

Reputation: 13

How to find the rendered height of a DIV with jQuery?

I am attempting to find the rendered height of two div. They have the same class (.defense) but are within separate containers (side-1 and side-2). I need to use these heights, as the height is set to auto in the CSS, to use in my jQuery to decide which should the be the height of both divs when loaded.

Here is my jQuery code: $(document).ready(function() { $(window).load(function() {

      var sideOneDefense = $('.side-1 .defense').height();
      var sideTwoDefense = $('.side-2 .defense').height();

      if (sideOneDefense >= sideTwoDefense) {
        $('.defense').css("height",sideOneDefense)
      }
      else {
        $('.defense').css("height",sideTwoDefense)
      }
    });
});

Upvotes: 0

Views: 372

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You are using the code on load by the way after dom is ready the value is not what you expect. Use the code inside ready handler instead:

$(document).ready(function() {

  var sideOneDefense = $('.side-1 .defense').height();
  var sideTwoDefense = $('.side-2 .defense').height();

  if (sideOneDefense >= sideTwoDefense) {
    $('.defense').css("height",sideOneDefense)
  }
  else {
    $('.defense').css("height",sideTwoDefense)
  }
});

Upvotes: 1

Related Questions