2

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.

Ron
  • 1,721
  • 1
  • 19
  • 43

5 Answers5

3

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...

Lix
  • 47,311
  • 12
  • 103
  • 131
  • 1
    Hmm, not a huge fan of the setInterval solution, although this certainly will work. – Stegrex Jul 08 '12 at 10:28
  • @ste - It all depends on how often the content changes it's size. This **is** more of a "brute force" solution I'll admit. – Lix Jul 08 '12 at 10:33
  • 1
    Yeah, it's more brute force but it's definitely a good start. Of course, it's hard to tell from the original question a sense of the whole page requirements, so it's also hard to tell which solution is "best." Maybe I just tend to have a strong reaction to the possibility of having many JS timers on one page. – Stegrex Jul 08 '12 at 10:37
  • 1
    Didn't go with the setInterval solution but your .height suggestion helped me. :) – Ron Jul 08 '12 at 15:40
1

In CSS there is no real event system (well, jQuery got one). It depends on the way your graph-element is changing. If its height is changing when the user interacts with any element, you can use the click-function of jQuery:

$("#myElement").click(function() {
  $("#head").addClass("higher"); // change height or something
});
Chris
  • 4,255
  • 7
  • 42
  • 83
  • Aha! This is very good to know about CSS not having an event system. Nice post and good solution. – Stegrex Jul 08 '12 at 10:26
  • @chr - rather use the newer jQuery 1.7+ `on('click')` syntax to bind event handlers... – Lix Jul 08 '12 at 10:31
  • This method could also be used if the height change is initiated from an AJAX callback... – Lix Jul 08 '12 at 10:41
1

jQuery: How to listen for DOM changes?

You'll probably want to read over this one.

Basically, what I think you want to do is this is to bind an event listener onto the div for the graph (the document will wait and listen for any events that happen to it). The event that it needs to listen for is a change in the CSS (could be the DOMSubtreeModified event, but I would look for a style attribute modification event, not sure if that exists).

When the change to the graph fires, handle the head div.

Community
  • 1
  • 1
Stegrex
  • 4,004
  • 1
  • 17
  • 19
1

you can use this plugin http://benalman.com/projects/jquery-resize-plugin/

HADEV
  • 437
  • 8
  • 19
  • 1
    Whilst this may theoretically answer the question, [it would be preferable](http://meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. We want to bring great content **to** this site as opposed to sending users elsewhere to get answers :) – Lix Jul 08 '12 at 10:29
0

You can set side by side, or you can set min-height: inherit to the inner div.

pozs
  • 34,608
  • 5
  • 57
  • 63