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

Question

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.

You should use "Infinite Scrolling" JQuery plugins to do that. Some projects here : http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/#.UHMd8vmorhU — sdespont, Oct 08 '12 at 18:40
Thanks. I have looked at those, but I am really wanting to figure this out on my own. I can get it to work if I know the sizes, but for whatever reason window.height() fails and I am really really really trying to understand why. This code works fine on other pages I have used it on. — Joel Joel Binks, Oct 08 '12 at 18:43
Tested what? How do you know the window height is incorrect? It's not only okay to post a link to your test, but it's actually extremely useful (and shows others you've tried to solve the problem); a picture is worth a thousand words, an example is worth two thousand. — Kato, Oct 08 '12 at 19:15
Kato, I will get values for window height that match the document height as ajax content loads. For example, the document height may be 2200px and the window height value I get matches this, even though my window height is less than 1000px. In the link I posted, I have set js alerts for when the page loads and for any time the user scrolls beyond 500px from the top. http://www.bangstyle.com/test-images — Joel Joel Binks, Oct 08 '12 at 20:30

score 80 · Accepted Answer · answered Oct 08 '12 at 18:58

80

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.

answered Oct 08 '12 at 18:58

Inferpse

4,135
1
31
39

1

I will try this out, although it seems strange doctype would mess up js trying to get window.height. BUT I will try it out. – Joel Joel Binks Oct 08 '12 at 20:32
YOU GOT IT! What a silly mistake! I had my php header in the wrong place! – Joel Joel Binks Oct 08 '12 at 20:41
4

Solution works perfectly. I had the same problem by having an incorrect DOCTYPE tag. Thank you – DreamWave Mar 07 '13 at 08:44
1

You sir are a live saver, I had spent the last two hours trying every possibly solution and just couldn't figure out why it wasn't working for me. – The Digital Ninja Mar 25 '13 at 10:33
Great catch! I was pretty confused by this until I came across your answer. – Don May 11 '13 at 22:15
None of this is working for me. I've tried all browsers WITH the doctype defined. – Mark Löwe Sep 17 '14 at 00:17
@MarkLöwe what's the value of global variable `window.innerHeight` comparing to real window height? Can you provide the example so we can reproduce your problem? – Inferpse Sep 17 '14 at 11:52

score 3 · Answer 2 · answered Oct 08 '12 at 19:17

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

});

score 3 · Answer 3 · answered Mar 27 '13 at 14:51

I had the same problem. I've found some things:

1) the problem happens when you try to get the actual height before document is completed rendered; 2) the problem happens in google chrome when you does not use corret DOCTYPE (mentioned above) 3) it always happens in google chrome even after the document is rendered completly.

For google chrome, I've found a workaround here: get-document-height-cross-browser I'm using this solution only for google chrome and it resolved my problem, I expect helps someone that still have the problem.

score 2 · Answer 4 · answered Apr 27 '14 at 07:50

This is an old question but I recently struggled with not getting the correct window height in IE10 by a few pixels.

I discovered that IE10 applies a 75% zoom by default and that screws the window and document measurements.

So, if you're getting wrong width or height, make sure zoom is set to 100%.

score 0 · Answer 5 · edited May 23 '17 at 12:31

0

Did some looking around and stumbled upon this, don't know if it helps but it's worth bringing up.

why is $(window).height() so wrong?

edited May 23 '17 at 12:31

Community

1
1

answered Oct 08 '12 at 18:58

westlywright

75
9

score 0 · Answer 6 · answered Aug 13 '15 at 02:54

Since jquery (and dom in general) is not calculating sizes correctly in quirksmode, two solutions:

Add doctype html at the top of your page (like mentioned in "correct" answer), or
Use window.innerHeight, window.innerWidth if first option is not an option.

Hope it helps.

score 0 · Answer 7 · answered Oct 27 '17 at 22:57

0

I moved my scripts from to footer and that resolved it for me.

answered Oct 27 '17 at 22:57

harrykirsten

1

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

7 Answers7

Linked