Menu
I have a page that I need to dynamically load ajax content when the user scrolls to the bottom. The problem is that JQuery is not returning the correct window height. I have used this function before and have never seen it fail, but for some reason it will return the same value as the document height. I have the test page here: bangstyle.com/test-images
I have coded the alert to display at page load, and also whenever the user scrolls 500px below the top:
function scroller() { if($(window).scrollTop() > 500){ delay(function(){ //200ms wait pagecounter++; sideshow(); alert("window height: " + $(window).height() + " scrolltop: " + $(window).scrollTop() + " document height: " + $(document).height()); return false; }, 200 ); } } I tried posting this before but I deleted it as I didn't get a solution. I hope it is ok to post a link to my test page. BTW I have tested this on Mac Safari and Mac FF. I have run this same code on other pages and it works fine. I feel there must be something in the dom of this page that causes JS to fail, but no idea what that would be.
635
jQuery height() Method The height() method sets or returns the height of the selected elements. When this method is used to return height, it returns the height of the FIRST matched element.
Basically, $(window). height() give you the maximum height inside of the browser window (viewport), and $(document). height() gives you the height of the document inside of the browser.
$(document). height() returns an unit-less pixel value of the height of the document being rendered. However, if the actual document's body height is less than the viewport height then it will return the viewport height instead.
Getting the Height of a Document To get the height of a document, we can get the max of the scrollHeight , offsetHeight , or clientHeight properties. The document can be stored in the document.
Look at your HTML souce code. The first line should be <!DOCTYPE html> and you have <style> tag instead.
So it seems that your document is running in Quirks Mode and jQuery can't calculate correct window dimensions.
158
//works in chrome $(window).bind('scroll', function(ev){ //get the viewport height. i.e. this is the viewable browser window height var clientHeight = document.body.clientHeight, //height of the window/document. $(window).height() and $(document).height() also return this value. windowHeight = $(this).outerHeight(), //current top position of the window scroll. Seems this *only* works when bound inside of a scoll event. scrollY = $(this).scrollTop(); if( windowHeight - clientHeight === scrollY ){ console.log('bottom'); } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
