Reputation: 3773
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
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
Reputation: 458
Please try $(document).height();
code for getting the height of the window.
Upvotes: 1
Reputation: 362
I think you should be using $(window) or $(document) instead of $(html)
Upvotes: 0