Javascript viewport height detection

I want to determine the height of the viewport using Javascript. I have this 550 pixel DIV that I want to display in a browser. However, this height can cause the vertical scroll bar to appear on some browsers (depending on how many toolbars the user has installed). In this case, I want to detect this and warn the user about it.

I tried using document.body.clientHeight , but it doesn't seem to work ... gives me the same height when I tried to add new toolbars and refresh the page.

+6
javascript dom browser height
source share
3 answers
+6
source share

Extremely easy in jQuery (and works well on different platforms):

 <html> <head> <title>Heyo</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ alert($(window).height()); }); </script> </body> </html> 

Documentation here

+4
source share

Easy and with YUI.

 <html> <head> <title>Heya</title> <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0b1/build/yui/yui-min.js"></script> </head> <body> <script type="text/javascript"> YUI().use('node', function(Y) { alert(Y.get(document).get('winHeight')); }); </script> </body> </html> 

Documentation here

+1
source share

All Articles