CODEWITHSUNDEEP
javascriptjquerycss
Ron
Ron

Reputation: 1731

A way to change a CSS value when another CSS value changes?

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.

Upvotes: 2

Views: 719

Answers (5)

HADEV
HADEV

Reputation: 447

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

Upvotes: 1

Stegrex
Stegrex

Reputation: 4024

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.

Upvotes: 1

Chris
Chris

Reputation: 4368

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
});

Upvotes: 1

pozs
pozs

Reputation: 36244

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

Upvotes: 0

Lix
Lix

Reputation: 47976

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

Upvotes: 3

Related Questions