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(); }); ```

Accepted Answer

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.

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

Solution

Problem