title: How to detect div height after its content is loaded via ajax with jquery
body: <p>I've got this strange problem: I got two divs, a menu and a content</p>
  
  <pre><code>&lt;div id="menu"&gt;
    &lt;a href="#" id="link1"&gt; Link &lt;/a&gt;
    &lt;a href="#" id="link2"&gt; Link &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="content"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When you click on a link, the <strong>div is loaded</strong> with the content of different html files:</p>
  
  <pre><code>$('#link1').click(function() {
    $('#content').load('page1.html');
  }
  $('#link2').click(function() {
    $('#content').load('page2.html');
  }
  </code></pre>
  
  <p>...and it works :-)</p>
  
  <p>This way the <strong>#content</strong> changes its height because it is "filled" with the html files, and I want that <strong>#menu</strong> takes the same height of <strong>#content</strong>, so I appended</p>
  
  <pre><code>$("#menu").height($("#content").height());
  </code></pre>
  
  <p>on the click() functions, but the height of the <strong>#content is calculated before loading the files</strong>, so it doesn't work.
  How can I detect when the content is loaded and do the resize after that?</p>
  
  <hr>
  
  <p>PS: The problem is also on page loading: I added </p>
  
  <pre><code>$('#prod1').click();
  </code></pre>
  
  <p>within $(window).load, to simulate a click on the first menu item; #content is filled correctly, but the height is miscalculated.. I tried to debug with console.log, tracing the height of the div, but it gave 0, although i put it after the load function.</p>
  
  <p><em>The only (bad) solution was to use the <strong>setInterval</strong> function, watching continuously the #content's height and set the same height on the #menu.</em> </p>