CODEWITHSUNDEEP
jquery
supernoob
supernoob

Reputation: 367

Jquery dynamically resize div based on height of another div

I have a div that is initially set to display:none, and uses .slideDown to become visible. It loads a table via ajax. Due to the slideDown, the height of the containing div increases. I want the height of two other divs to increase simultaneously.

Upvotes: 1

Views: 7297

Answers (3)

yycroman
yycroman

Reputation: 7611

Do you want the other divs heights to increase to MATCH the div that's growing? Or to respond to it in some other way?

If you're looking to match it, your function might look like this:

function matchHeight() {
    var newHeight = $("#grownDiv").height(); //where #grownDiv is what's growing
    $(".matchDiv").height(newHeight);    //where .matchDiv is the class of the other two
}

You can call this after your table loads. You can also set events like this:

jQuery.event.add(window,"load",matchHeight);
jQuery.event.add(window,"resize",matchHeight);

etc.

Hope this helps.

Upvotes: 0

adenizc
adenizc

Reputation: 421

If you want same height for the three divs; Add a css class to three divs like "simultaneously", after slidedown run the below code

var maxHeight = 0;

$('div.simultaneously').each(function(index){
if ($(this).height() > maxHeight)
{
maxHeight = $(this).height();
}
});

$('div.simultaneously').height(maxHeight);

Upvotes: 2

IsisCode
IsisCode

Reputation: 2490

$(document).ready(function(){
 //Put your code in here, it will run when the page loads
});

Select elements like this:

$(".slideDown")

Get CSS properties like this:

var height = $(".slideDown").css("height");

Set CSS properties like this:

$("#someElement").css("background-color", "#fff");

If you get stuck, read the docs, there might be mistakes in my code examples, I haven't tested them.

Upvotes: 1

Related Questions