title: How do I get the height of the page after an ajax load?
body: <p>I setting one of 2 elements to be whichever is the greatest height.  I'm checking the height of window, sidebar and #primary container and making sure whichever is the greatest is the height all elements i set to.  However, on this page, on interaction with a select button, there is an ajax load.  My page height then increases.  I expected the new height to be picked up by my function, but it still returns the old height pre-ajax load.</p>
  
  <p>My code is below:</p>
  
  <pre><code>//on change of the select button load ajax content, then run changeSidebarHeight()
  $('#choose-pathway').change(function() {
          var url=$(this).val();
          $('#ajax-pathway-container').load(url + ' #pathway',changeSidebarHeight);
  });
  
  
  function changeSidebarHeight(){
          var primaryHeight=$('#primary').height();
          var sidebarHeight=$('#sidebar').height();
          var windowHeight=$(window).height();    
              //this always returns the same value, before the ajax load and after, despite the page being about 600 pixels taller
              console.log($('html').height());        
          if(primaryHeight &gt; sidebarHeight){
               $('#sidebar').height(primaryHeight );
  
          }else{
                $('#sidebar').height(windowHeight );
                $('#primary').height(windowHeight);
          }
  
  }
  </code></pre>