Question

I have divs structured like this:

<div id='head'>
    <div class='graphData'>
        <table>...</table>
    </div>
    <div class='graph'>...</div>
</div>

EDIT:

Sorry, I forgot to several important parts of the structure.

head, graphData and graph all have their min-heights set to 300px.

My problem is how do I change head and graph's min-height to match graphData's min-height when graphData's min-height increases or decreases? Any way to detect a css style change via jQuery or javascript?

graphData’s height changes because of dynamically generated rows from my DB.

Answer 1

There is no built-in way with CSS or jQuery to detect a change of this nature.
What you might think of doing is checking the height of the element at intervals and comparing them to the last known value. If there are differences, that means the height has changed.

var oldHeight = $("#graph").height();

var heightChangeTimer = setInterval(function(){
  var newHeight = $("#graph").height();
  if (newHeight != oldHeight){
   oldHeight = newHeight;
   // do some actions on height change...
  }
},100);

For now, I’ve set the interval to every 100 milliseconds but you can tweak that value to suit your needs – perhaps make it slightly smaller IE. run the check more often…