Jquery $(window).height() function does not return actual window height

javascript jquery window height
Joel Joel Binks picture Joel Joel Binks · Oct 8, 2012 · Viewed 33.4k times · Source

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.

Answer

Inferpse picture Inferpse · Oct 8, 2012

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.

Related questions

$(window).scrollTop() vs. $(document).scrollTop()

What's the difference between: $(window).scrollTop() and $(document).scrollTop() Thanks.

Read More
Storing a variable in the JavaScript 'window' object is a proper way to use that object?

(Maybe) I just solved a my problem (How to update front-end content after that a form is successfully submitted from a dialog window?) by "storing" / "saving" a variable in the JavaScript window object. However, since I am newbie in JavaScript …

Read More
Difference between screen.availHeight and window.height()

I am executing the following Javascript on my browser (Firefox). console.debug("Screen height = "+ screen.availHeight); //outputs 770 console.debug("Window Height ="+ $(window).height()); //outputs 210 (I am using jQuery as well) What is the difference between the two? Is 770 in pixels …

Read More