3

jQuery documentation http://api.jquery.com/height/ says

// Returns height of browser viewport
$( window ).height();

// Returns height of HTML document
$( document ).height();

But I got the same value from both method. For example, (with html including overflowed div with height=about 3000px)

$( window ).height();
3588
$( document ).height();
3588
$("body").height();
3572
$("html").height();
3588
window.innerHeight;
667

It gave the same result both in Chrome and Firefox browser. (The value is slightly different because of different size of toolbar.)

What I expected for $( window ).height() was "height of browser viewport" which is window.innerHeight = 667. But it gave 3588 which is much bigger than I expected.

Did I understand something wrong? Does viewport mean something different?

Anyway, in Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery) , the way to get the height and width of the viewport is explained. In this document, "the viewport" is what I think, but not the one explained in jQuery documentation.

===============================================

Lately editted:

It only gives the wrong answer 3588 when I open the offline html file in my computer. When I uploaded the html file to my blog, and tested it, it gives the expected correct answer 667. Is there any differnce between openning an offline file (file://) and an online html file (http://) ?

Short version of my test html file.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div style="height:3500px; background:rgb(200,200,255)" id="result"></div>

<script>
$("#result").html("$(window).height():? "+$(window).height());
</script>

It gives still

$(window).height():? 3516

in offline only.

Community
  • 1
  • 1
kipid
  • 585
  • 1
  • 8
  • 19
  • 1
    Create a page that needs to be scrolled to view its contents. window is what you can see, document is the whole page. – Popnoodles May 28 '14 at 17:00
  • "window is what I can see". But why does `$(window).height()` give so big number (3588) bigger than my screen height? @Popnoodles – kipid May 28 '14 at 17:06
  • Was this running inside of an iframe or something? – James Montagne May 28 '14 at 17:10
  • I just run it in console and also tested with a html file. @JamesMontagne – kipid May 28 '14 at 17:11
  • Can you reproduce this in a jsfiddle? I can't http://jsfiddle.net/4Xw7D/ – James Montagne May 28 '14 at 17:12
  • There is not enough information given to answer the question as we don't know if the window you're referring to is the only window on the page or a frame. – Popnoodles May 28 '14 at 17:16
  • @JamesMontagne It works fine in jsFiddle. But not in a html file. Hmm. I tested it with a offline file. And I uploaded it to show you. But it gives the expected answer 667. Is there any difference between openning it with file:// and http:// ?? – kipid May 28 '14 at 17:21
  • 1
    Nope. unless you're using IE and it's going to compatibility mode. – Kevin B May 28 '14 at 17:40
  • IE gives `$(window).height():? 673`. Strange... What is compatibility mode? @KevinB I will leave this issue. This is just strange. – kipid May 28 '14 at 17:53
  • It makes newer versions of IE perform as if they were older versions. usually in intranet environments, such as the filesystem. – Kevin B May 28 '14 at 17:54

1 Answers1

0

I am not sure whether it is a bug or an intended change in behavior, but what you describe does happen in the newer jquery releases. You can use window.innerHeight instead. Its is cross-browser (IE 6+)

Emma
  • 1,061
  • 9
  • 10