Menu
I'm doing a simple test on $(window).height() and I'm getting a value of 2602 on a screen resolution of 1366 x 768.
jQuery(document).ready(function($){
var W = $(window).width();
var H = $(window).height();
console.log('W ' + W);
console.log('H ' + H);
}
Outputs:
W 1226 H 2602
Any tips on how to debug this or what I'm doing wrong?
EDIT: Using chrome and FF
I'm literally typing this in console: jQuery(window).height();
388
This can be just as simple as a missing or incorrect DOCTYPE (affected Chrome but not IE).
Interestingly this isn't even a jQuery issue - it affects document.documentElement.clientHeight too.
Without doctype:
With doctype:
<!DOCTYPE html>
I thought I had a layout template on my page, but it turned out I didn't - and therefore didn't have DOCTYPE.
168
You're doing everything right, and you're not getting the values you should. This is not how jQuery is supposed to behave.
In this very page, I tested out the functions you were calling to see what their values would be. They did represent accurately the actual width and height of the visible page in my window. Here's the results.
jQuery's $(window).height() is supposed to display the visible viewport. See the docs on jQuery's height function:
This method is also able to find the height of the window and document.
$(window).height(); // returns height of browser viewport $(document).height(); // returns height of HTML document
window.height is a settable value things can interfere with, but $(window).height() is unaffected by changes to it.
Whatever is going on, whatever function you're calling, you are not calling jQuery's implementation of $(window).height().
Using your browser's developer console, put a break point on the line where you call $(window).height() and step into the function call. What is actually being called when you call $(window).height()? You need to find this out.
A strong suspicion of mine is that some part of the code base you're working with has gone and done this:
// Replace jQuery's height function with a better one to fix bug XYZ
$(window).height = function brandNewHeightFunction() {
return someVeryWrongValue;
};
If so, when you step into the height function, it may in fact not enter into a part of the jQuery library, but another part of your own libraries. Find out what necessitated it and see what you can do about it. If you simply remove this functionality, other stuff depending on it working this way may start breaking.
Check to see if this has happened with whoever you can, and whatever history tools you have available. What version of jQuery are you using? Download the same one from the jQuery site if possible, and see the code you see when you step into the window height function is the same one as you see there.
Redownload jQuery and reference it. If your window height function suddenly starts working, someone may have done this. Find out why this was customised. If you repair it, other stuff depending on this behaviour might start breaking.
40
Actually, this was a result of a hidden div element on my page. I had a thickbox link that would pull this hidden content. Removing this fixed the jQuery.width()!
Surprising, not sure if helpful, but is the answer indeed.
43
Same problem here, it looks that jquery (and dom in general) is not calculating sizes correctly in quirksmode.
Two solutions:
Hope it helps.
43
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
