title: jQuery dynamically change element height
body: <p>I'm working on a fluid layout project. I have some fixed height DIVs in my document, and the heights are different for all of them. I need to proportionally change these DIVs height on browser resize. Here is the markup.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="a" class="target"&gt;&lt;/div&gt;
  &lt;div id="b" class="target"&gt;&lt;/div&gt;
  &lt;div id="c" class="target"&gt;&lt;/div&gt;
  &lt;/body&gt; 
  </code></pre>
  
  <p>And css:</p>
  
  <pre><code>&lt;style&gt;
      body { width: 90%; margin: 0 auto;} 
      .target { width:30%; float:left; margin:1.6%; cursor:pointer; }
      #a { height: 200px; background-color: yellow;}
      #b { height: 400px; background-color: green;}
      #c { height: 600px; background-color: grey;}
  &lt;/style&gt;
  </code></pre>
  
  <p>Sounds easy!
  The main condition is that i <strong>don't know the precize amount of target DIVs and their IDs</strong>, that's why i'm using .each(function()). 
  Here is script i wrote:  </p>
  
  <pre><code>$(document).ready(function(){
  //set the initial body width
  var originalWidth = 1000; 
  /*I need to go through all target divs because i don't know 
  how many divs are here and what are their initial height*/
  $(".target").each(function() 
  {
      //get the initial height of every div
      var originalHeight = $(this).height(); 
      //get the new body width
      var bodyWidth = $("body").width(); 
      //get the difference in width, needed for hight calculation 
      var widthDiff = bodyWidth - originalWidth; 
      //new hight based on initial div height
      var newHeight = originalHeight + (widthDiff / 10); 
      //sets the different height for every needed div
      $(this).css("height", newHeight); 
  });
  </code></pre>
  
  <p>});</p>
  
  <p>This script perfectly works when user reload the page. 
  How can i get the same results dinamically, when user resizes browser without reloading?
  I know i should apply $(window).resize event listener. But the problem is that DIV's initial height will be calculated inside the event and the result will be almoust like endless loop- that is the final height will increase or decrease in huge progression. I don't need that!
  How can i make <strong>each</strong> DIV initial height calculation outside event function and then use these heights inside event function? Or may be there is another aproach to get the same result?</p>