jQuery window height is not correct


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://code.jquery.com/jquery-1.10.1.js'></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.


Comments

Post a Comment

Popular posts from this blog

Swift Learning Roadmap

Image
Recently one of my email subscribers wrote me this: What I find is that I’m learning the various steps but I do not understand the “big picture”. For me, a guideline, would be helpful. I know Swift is available but I do not even know object oriented programming. I’d really like to see a “roadmap” that says: if you know or do not know this, start here and learn this, then this, etc. He is not alone. Talking to people and reading comments online I found that many share the same feeling. There is a huge amount of information about iOS development and so many things to learn. It is easy to get lost and not know what is important to know and what should be learned first. I know that feeling myself. When I started adventuring into Mac OS X programming in 2005 (the iPhone did not exist yet) I found myself in the same situation. Back then, resources were scarcer than nowadays. I relied a lot on Apple’s documentation and started venturing into the world of Cocoa and...
Read more

How to Apply for an iOS Developer Job

This is the first part of a three part series on applying and interviewing for an iOS developer job. In this first part of the series, you will focus on the applying part of the equation – i.e. preparing your resume and cover letter. In this second part of the series, Ray will show you a few examples of some iOS resumes and cover letters he likes that might be useful for reference or models. In the third part of the series, you will focus on the interviewing part of the equation – i.e. what types of questions to expect and prepare for, and how to do your best in an interview. Note that none of these articles will focus on how to get the required iOS skills (although that might be a good follow-up article some day). Let’s assume you’re already a seasoned iOS developer. After all, if you’re reading this blog, that’s a good sign that honing your iOS skills is important to you! :] Also, none of these articles will focus on where to find iOS jobs (although that’s another...
Read more

Partitioning and Naming Drives (Windows 8)

Image
Understanding drives, partitions, and volumes A partition is an area of a hard disk that can be formatted and assigned a drive letter. On a hard disk, a volume is a formatted primary partition or logical drive. The terms partition and volume are often used interchangeably. HP and Compaq computers with Windows 8 have hard disk drives that contain at least two partitions: the main partition for Windows and your work, and a recovery partition to restore the computer back the way it came from the factory. Here is a list of some of the partitions you might find on your hard drive: The main partition, usually labeled with the letter C, contains the system files, program files, and usable file storage space. A recovery partition, usually drive letter D and labeled RECOVERY, contains system recovery information in case the files on the C partition are damaged or unusable. A hidden partition might exist called SYSTEM. A SYSTEM partition is used by Wind...
Read more