CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Suraj
Suraj

Reputation: 930

Dynamically change the height of an element to another

Column A and B
Well here we have two columns A and B. The thing is column A generally contains more content so its height is more (in this case 126px) and column B has less content so it remains shorter (here 94px). Now I want to make the height of B = A, considering that height of column A might change dynamically by AJAX but to keep pace with column A, height of column B must also change.
<div id="A">filer text</div> | <div id="B">filler text2</div> Now may be by using jQuery or some js we can get the height of element with id #A and set it to #B but the problem lies when the content changes dynamically.

Upvotes: 4

Views: 642

Answers (2)

sprw
sprw

Reputation: 196

Without JQuery:

var d = document;
d.getElementById("B").style.height = d.getElementById("A").offsetHeight;

Upvotes: 0

Josh
Josh

Reputation: 12566

$("#a").css("height", $("#b").css("height") );

Which then could be put in the callback function of, say:

$.ajax({
  ...
  success:function(msg){
    // could be optimized by storing off of the comparision
    if( $("#a").height() > $("#b").height() ){
      $("#b").css("height", $("#a").css("height") );
    }
  }
});

Upvotes: 6

Related Questions