Claire
Claire

Reputation: 3773

How do I get the height of the page after an ajax load?

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

}

Upvotes: 0

Views: 1429

Answers (3)

kleinohad
kleinohad

Reputation: 5912

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

Upvotes: 0

Uttam Kadam
Uttam Kadam

Reputation: 458

Please try $(document).height(); code for getting the height of the window.

Upvotes: 1

Aaron Lee
Aaron Lee

Reputation: 362

I think you should be using $(window) or $(document) instead of $(html)

Upvotes: 0

Related Questions