JQuery Height not correct
JQuery have method to get the window height : - $(window).height() , and document height : - $(document).height() ;
By Mohd Zulkamal
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 =)
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 Mohd Zulkamal
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 =)
.bmp)
