Tech News Stop - Sharing by Wasim Akhtar

jquery window height same as document height I was working on a small jQuery snippet and got this weird issue. I was trying to get window height using jquery’s $(window).height() function.

Ideally $(window).height() returns the pixel less height of browser window. This is always the height of current browser window. If you resize browser this value should change.

Also you can get $(document).height(). $(document).height() returns an unit-less pixel value of the height of the document being rendered. If the actual document’s body height is less than the viewport height then it will return the viewport height instead. i.e. if you have less content in a page and window is sufficiently open to show this content then document height will be less than jquery window height.

Problem

However recently when I was playing with these values it seems both $(window).height() and $(document).height() gave me same value! Thus the $(window).height() was giving incorrect result.

Check out below source:


<html>
<head>
  <script type='text/javascript' src='http://ift.tt/JoZibN'></script>


<script type='text/javascript'>

$(document).ready(function(){
    $('#winheight').text($(window).height());
    $('#docheight').text($(document).height());
});

</script>
</head>
<body>
  <div id="console">
    $(window).height() = <span id="winheight"></span> <br/>
    $(document).height() = <span id="docheight"></span>
</div>

<p>Lorem ipsum dolor sit amet, ...
</body>
</html>

Output:

What! The output shows value of $(window).height() and $(document).height() same 750. The window height is not equal. It should be 200px. Clearly we can see document is bigger, there is a scroll bar right there.

So why JQuery gives same value for window and document height? We’ll it turns out we missed a simple thing.

Solution

Our HTML document doesn’t have DOCTYPE declaration. So it’s not a valid HTML so to speak. JQuery cannot calculate window height / document height correctly if doctype is not specified on window.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

So lets add DOCTYPE declaration to our HTML page and see the output.


<!DOCTYPE HTML>
<html>

//.. 
</html>

Output:

Voila! It worked.. Never forget DOCTYPE declaration in your HTML. Always try to create HTML files using some kind of IDE. That will automatically take care of this.

The post jQuery window height is not correct appeared first on ViralPatel.net.