Best IT Recipes

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

I have a page where I need to dynamically load ajax contents when the user scrolls down. The problem is that jQuery does not return the correct window height. I have used this function before and have never seen it crash, but for some reason it will return the same value as the height of the document. I have a test page here: bangstyle.com/test-images

I encoded a warning to display when the page loads, and also every time the user scrolls 500 pixels below:

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 since I didn’t get the solution. I hope you can post a link to my test page. BTW I tested this on Mac Safari and Mac FF. I ran the same code on other pages and it works great. I feel that there should be something in the home of this page that makes JS fail, but I don't know what it would be.

+22
javascript jquery height window
Oct 08 '12 at 18:27
source share
7 answers

Look at your HTML code. The first line should be <!DOCTYPE html> , and instead you use the <style> .

So it seems that your document is running in Quirks mode, and jQuery cannot calculate the correct window sizes.

+72
Oct 08 '12 at 18:58
source share
 //works in chrome $(window).bind('scroll', function(ev){ //get the viewport height. ie 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'); } });
+3
Oct 08 '12 at 19:17
source share

I had the same problem. I found some things:

1) the problem occurs when you try to get the actual height before the document is completed; 2) the problem occurs in Google Chrome when you do not use the DOCTYPE tuple (mentioned above) 3) this always happens in google chrome even after the document is fully displayed.

For google chrome, I found a workaround here: get-document-height-cross-browser I use this solution only for google chrome and it solved my problem, I expect this to help someone who still has the problem.

+3
Mar 27 '13 at 14:51
source share

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

I found that IE10 applies 75% of the default scaling and twists the window and document dimensions.

So, if you have the wrong width or height, make sure the scaling value is set to 100%.

+1
Apr 27 '14 at 7:50
source share

Some looked back and stumbled upon it, I do not know if this helps, but it is worth to get up.

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

0
Oct 08 '12 at 18:58
source share

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

  • Add doctype html at the top of the page (as indicated in the “correct” answer) or
  • Use window.innerHeight, window.innerWidth if the first parameter is not a parameter.

Hope this helps.

0
Aug 13 '15 at 2:54
source share

I moved my scripts from the footer and solved it for me.

0
Oct 27 '17 at 22:57
source share


More articles:


All Articles