Question

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.

My code is below:

//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 > sidebarHeight){
             $('#sidebar').height(primaryHeight );

        }else{
              $('#sidebar').height(windowHeight );
              $('#primary').height(windowHeight);
        }

}

Answer 1

You can use $(document).height(); but keep in mind that with no doctype tag to your page chome reports the same value for both calls ($(window) and $(document)).
Adding a strict doctype causes the values to work as advertised.
But you can also use $(body).height();