Why doesn't $(window).height(); return a value, but $(document).height(); does?

Question

I'm trying to use jQuery to get current window height. I intend to set a variable with this value, and update the value upon resize. For some reason, $(window).height(); always returns zero, but $(document).height(); returns a value. Why would this be?

(code snipped for brevity)

$(document).ready(function () {

function drawGrid() {

    var context = document.getElementById("gridCanvas").getContext("2d");

    var height = $(window).height();
    var width = height/2/8;
    alert(height);

    $(window).resize(function () {
        // do some stuff
    });

        // do some cool drawing stuff

    }

    drawGrid();

});

I get a height back in document.ready http://jsfiddle.net/zpu2c/3/ — John Koerner, Aug 18 '12 at 02:05
The alert I have right after asking for the window height reads 0.. — Dshiz, Aug 18 '12 at 02:09
@JohnKoerner because your code and contents are simple enough so that when document is ready, window is loaded already. — mask8, Aug 18 '12 at 02:14

mask8 · Accepted Answer · 2012-08-18T02:15:24.490

6

can you try

$(window).load(function () {

instead of

$(document).ready(function () {

and see if it works. I think you have to wait window finish loading if you want to get window's size.

edited Aug 18 '12 at 02:15

answered Aug 18 '12 at 02:03

mask8

3,560
25
34

I wasn't sure why either.. It worked right away with no problems.. Thanks for the help.. – Dshiz Aug 18 '12 at 02:19

score 0 · Answer 2 · answered Apr 14 '16 at 09:55

0

$(window).height() and also $(window).width() return 0 in IE when in compatibility mode. try to use $(document).height() or $(document).width() instead.

answered Apr 14 '16 at 09:55

flap13

379
3
14

Why doesn't $(window).height(); return a value, but $(document).height(); does?

2 Answers2

Linked