Why does Firefox return 0 as the value of $(window).height()

Question

It seems to me that Firefox ought to be better equipped to return the proper value when using $(window).height().

I am using jQuery 1.8.2. Is this a bug in that particular build? Every other browser I have tested returns an appropriate value when calculating viewport height.

To work around this, I've used snip below to apply a pixel value to a div.

$(window).bind('cwsObjectsShown', function() {
  var height = $(window).height();
  if (height === 0) {
     height = window.innerHeight;
  }
  height = height - '120';
  $('#game_objects').css('height', height + 'px');
});

Are you calling this before there is any content on the page? $(window).height() works fine on firefox. Try calling it in the console to see what result you get. — jholloman, Oct 17 '12 at 15:11
Using jQuery 1.8.2, I can get the window height even in the `` of the document, before anything has loaded: http://jsfiddle.net/bdukes/HDrnx/ — bdukes, Oct 17 '12 at 15:18

score 47 · Accepted Answer · answered Nov 06 '12 at 20:46

jQuery's $(window).height() is sensitive to doctype. Try <!doctype html> ?

The jQuery 1.8.1 release notes say

Don’t use Quirks mode! jQuery has never supported Quirks mode and we do not perform any testing in Quirks. This can affect values like $("window").height(), and the jQuery 1.8 Quirks mode results did change in order to support some modern browser features. The majority of problem cases we’ve seen are from developers that wanted to be in Standards mode but had an invalid doctype or extraneous markup before their tag. When in doubt, use the simple and short <!doctype html>.

For example, with jQuery 1.8.2 and Firefox 16, I get a valid $(window).height() with doctype html, but height 0 with doctype html5. In Chromium 20, both work. (The W3C HTML5 spec does say to use doctype html, not html5.)

Igor Krupitsky · Answer 2 · 2016-09-13T06:05:05.247

4

Try this function:

function GetBrowserDim() {
    if (window.innerHeight) {
        return { w: window.innerWidth, h: window.innerHeight};
    } else {
        return { w: document.body.clientWidth, h: document.body.clientHeight };
    }
}

edited Sep 13 '16 at 06:05

answered Sep 03 '16 at 11:22

Igor Krupitsky

787
6
9

score 3 · Answer 3 · answered Apr 14 '16 at 09:52

3

$(window).height() and also $(window).width() return 0 in IE when in compatibility mode. Not check this in FireFox, may be the same. try to use $(document).height() or $(document).width() instead.

answered Apr 14 '16 at 09:52

flap13

379
3
14

score 2 · Answer 4 · answered Jan 22 '15 at 05:23

2

in my case i had to delete the attributes in the html element

<html lang="en-US" prefix="og: http://ogp.me/ns#">

changed to just

<html>

now i get the correct document width and height

answered Jan 22 '15 at 05:23

Milo Timbol

141
1
4

score 1 · Answer 5 · answered Jun 11 '13 at 16:22

I found the answer to this strange render of height by jquery in Firefox...

I used class="no-js" in my html tag with doctype... when I removed this, FF calculated correctly... so I added this class with jquery like this $('html').addClass('no-js');

now the calulated is same in all browsers..

score 1 · Answer 6 · edited Apr 21 '19 at 13:33

1

You have to use <!DOCTYPE html> tag at the beginning, and everything will be fine.

edited Apr 21 '19 at 13:33

Zoe

27,060
21
118
148

answered Apr 21 '19 at 13:20

Dénes

11
1

score 0 · Answer 7 · answered Oct 17 '12 at 15:17

0

Try the following code:

$(function(){
  $(window).on('cwsObjectsShown', function() {
    alert($(this).height());
  });   
});

answered Oct 17 '12 at 15:17

Dave L.

9,595
7
43
69

I've run it from console, using $(document).ready(), $(window).load(), and every time, the result is 0. I will try to create a test case for this at a url, though I'm beginning to suspect that this problem is very specific to other code occurring on the page. – killtheliterate Oct 18 '12 at 02:04

Why does Firefox return 0 as the value of $(window).height()

7 Answers7

Linked

Related