JQuery Height not correct

JQuery have method to get the window height : - $(window).height()  , and document height : - $(document).height() ;

Problem

window height and document height give the same result which is wrong. If you resize the browser , the window height  should give smaller or bigger than document height.

The Full HTML Code

<html>
<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>$(document).ready(function(){
    $('#windowheight').text($(window).height());
    $('#documentheight').text($(document).height());
});

</script>
</head>
<body>
  <div id="result">
    $(window).height() = <span id="windowheight"></span> <br/>
    $(document).height() = <span id="documentheight"></span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Sed vulputate faucibus orci sit amet iaculis. Etiam at libero mi.
 Cras aliquet leo in turpis sollicitudin, pellentesque tincidunt 
orci pellentesque. Aenean dictum lobortis aliquet. Nullam blandit 
rhoncus orci, posuere facilisis nibh placerat et. Etiam sed justo
 vel nisl molestie rutrum in eu ipsum. Etiam sed mattis erat, vitae
 malesuada metus. Nulla accumsan facilisis ligula, sit amet faucibus
 enim ullamcorper id. Praesent sodales dictum ipsum nec vehicula.


 In hac habitasse platea dictumst. Integer euismod ante euismod metus 
convallis consectetur. Aliquam id urna sit amet ligula tempor fermentum.
 Integer tincidunt elementum nunc, sit amet scelerisque enim iaculis a.
 Cras sed pharetra enim, sed bibendum massa. Aliquam laoreet elit ac placerat 
pellentesque.Pellentesque ullamcorper et lectus quis adipiscing.
 Phasellus fringilla diam augue, nec mattis ipsum porta ac. 
Nulla feugiat venenatis sapien, quis interdum nisi iaculis sit amet. 
Maecenas aliquet enim in arcu tincidunt, tincidunt porttitor arcu eleifend.
 Sed lobortis quam non purus interdum, eu lacinia lacus vehicula. 
Pellentesque et augue laoreet, mattis leo vel, congue enim. 
Ut fringilla erat vitae urna tincidunt porta. Curabitur scelerisque lorem
 id sagittis imperdiet.Ut convallis justo id urna congue ultrices. 
Integer placerat mollis sem, sit amet faucibus purus consectetur eget. 
Fusce porta pellentesque nisi id lacinia. Etiam bibendum tempus tortor, 
sit amet lobortis mi adipiscing vel. Curabitur feugiat, lacus nec ornare 
fermentum, velit leo pulvinar neque, eu fermentum eros orci a lectus. 
Quisque ligula erat, auctor lacinia neque id, aliquet eleifend magna. 
Aliquam iaculis placerat aliquet.Morbi a luctus nisl, commodo sagittis dolor.
 Proin sit amet libero quam. Fusce mattis egestas sapien, quis vulputate 
sapien commodo sed. Donec neque erat, feugiat nec quam nec, facilisis tempus leo.
 Vivamus auctor bibendum elit eu consequat. Mauris blandit est lectus, 
quis accumsan purus hendrerit a. Phasellus nec nisi in justo condimentum 
euismod. Pellentesque id arcu nunc. Phasellus in libero nec justo faucibus
 sollicitudin in eu massa. Vivamus faucibus purus libero, eu posuere orci 
tristique consectetur. Quisque urna sapien, sodales eget quam nec, sodales 
interdum felis. Vivamus dapibus justo eget augue malesuada, at laoreet nibh
 dapibus.Donec accumsan tellus dolor, in fermentum sem egestas non. Maecenas 
elementum eget metus eu consequat. Nulla vel ipsum non risus interdum consectetur.
 Phasellus convallis in leo rhoncus viverra. Mauris consectetur in diam et pretium.
 Etiam bibendum elit at iaculis cursus. Vestibulum ac ligula nec odio suscipit 
laoreet eu eget nisl. Quisque adipiscing nunc sed mi luctus faucibus. 
Ut quis nisi ac ipsum venenatis sodales. 
</body>
</html>

The Solution

HTML document doesn’t have DOCTYPE declaratio. So that the browser do not know what are the type of the document. So the solution is quite simple, just add <!DOCTYPE HTML> in the html file.

<!DOCTYPE HTML>
<html>

::

::

</html>


By
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)

Popular posts from this blog

Example to disable save as certain file type in SSRS Report Viewer

How to create DataGrid or GridView in JSP - Servlet

Control Webpart Visible/Enable using macro in Kentico