I have a problem using $(window).height(). When I first load the page, it shows 0, I can only get the right number after refreshing it.

I tried to put it in $(document).ready(function(){}), in the beginning of JavaScript, in the $('[data-role="page"]').live('pageshow', function () {}) (it's a jquery mobile site), but nothing works.

How can I get the window height on loading the file without refreshing it?

I have a problem using $(window).height(). When I first load the page, it shows 0, I can only get the right number after refreshing it.

I tried to put it in $(document).ready(function(){}), in the beginning of JavaScript, in the $('[data-role="page"]').live('pageshow', function () {}) (it's a jquery mobile site), but nothing works.

How can I get the window height on loading the file without refreshing it?

• javascript
• jquery
• jquery-mobile

Share Improve this question Follow edited Jan 17, 2013 at 12:30 phant0m 16.9k66 gold badges5151 silver badges8484 bronze badges asked Jan 17, 2013 at 12:29 the_summer_beethe_summer_bee 49355 gold badges1010 silver badges2323 bronze badges 2

• It is possible to write some HTML-Code that has content with a height but it's container (e.g. the body or window) has a height of 0. Give me some more code, some HTML and/or CSS. – algorhythm Commented Jan 17, 2013 at 12:34
• Try to alert it on some button click as shown here api.jquery./height if it is working correctly then there might be some other problem. wait for expert to e up with solid answer. – Saurabh Bayani Commented Jan 17, 2013 at 12:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Try the following:

$(window).load(function(){ 
    console.log( $(this).height() )
});

but the window height is basically always the same. you might want the document body height :

$(window).load(function(){ 
    console.log( $(document).height() )
});

Well, you passed an empty function to ready(), which is why it doesn't do anything.

You can use this shortcut for $(document).ready(handler):

$(function() {
  console.log($(window).height());
});

You probably have an error somewhere in your code.

$(window).height();

should return you real height.

$('#index').live('pagebeforeshow',function(e,data){    
    alert($(window).height());
});

Here's an working example: http://jsfiddle/Gajotres/JmqX6/

Now mobile phones are something pletely different, for this to correctly work on mobile phones you also need a vireport tag inside your HEAD:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />