How can i dynamically update DIV block height?

Question

I have 2 divs. 1st div should automatically change own height if 2nd div height was changed.

var height = jQuery('#leftcol').height();
height += 20;   
jQuery('.rightcol-botbg').height(height);

There is no ability to change HTML markup :( I have many DHTML layout changes, so I can't run prev. code anytime. I want to run it dynamically. I need to do something like event/trigger.

I tried to use jQuery('#leftcol').resize(function(){}) or jQuery('#leftcol').change(function(){}). but it doesn't work. (resize triggers when window size changes.)

Answer 1

I don't understand JQuery, but seeming as this question is tagged Javascript I'll give you a Javascript solution

   document.getElementById("yourDivID").style.height = "300px";

Edit - You want to know when the height of the div has changed?

I don't know if there is a better way for that, but I would approach it with a function:

function changeBlockHeight(divID, newHeight)
{
    document.getElementById(divID).style.height = newHeight + "px";
    blockHeightChanged(divID);
}

function blockHeightChanged(divID)
{
    alert("Div " + divID + " has been changed in height!");
}

Somewhere in your code:

<div id="testBlock"></div>
<button onlcick="changeBlockHeight('testBlock')">Test</button>

Every time you change the blocks height, blockHeightChanged() is called.

Answer 2

I would monitor the other div using an interval then update accordingly

setInterval(function(){
    var height = $('#leftcol').height();
    if(height != $('#leftcol').data('oldHeight'))
    {
        $('.rightcol-botbg').height(height+20);
        $('#leftcol').data('oldHeight',height);
    }

},500)

(untested)

The above code checks for changes in height every 0.5 seconds, then updates .rightcol-botbg;

Answer 3

When does your 1st div change ? Whatever triggers that should get the new div height, add 20 to it and set the height of the other div. Can you post some code samples ? If the size changes happen really frequently, a timer/interval that repeatedly checks one size and set's the other should also work, but this is less efficient.

Answer 4

well there is not any generic triggers for an element resize.

what is the cause of div's size change at your case? you can check your heights righta after or in that cause.

only alternative that i can think of is setting up a timer with setInterval and check both div sizes every once in a while.

var myInterval = self.setInterval("myCheckFunction()",1000);

function myCheckFunction() {
    jQuery('.rightcol-botbg').height(jQuery('#leftcol').height());
}

Answer 5

Thank You all,

I didn't find a trigger too. In this case I'll update height after every AJAX call or block show/hide. Or, maybe I can set onclick event to document BODY and update height after that? It'll be more efficient than setTimeout. What do you think?

Answer 6

Using an interval is not very browser friendly. If you have a setup like this:

<div id="content">
   <div id="tree">should be full height</div>
   <div id="data">this one is half the height</div>
</div>

You could easily do this with css. I'm not sure if this is the case...

Otherwhise the solution proposed by Tom Gullen is the best one.

Answer 7

Use .bind() to create a custom event type, and then trigger that event using .trigger().

Here is a fiddle with an example (a bit contrived, but I think you will get the idea)