I want to detect the height of the viewable area using Javascript. I have this DIV of height 550px which I want to display on the browser. However, this height might cause the vertical scrollbar to appear on some browsers (depending on how many toolbars the user has installed). In that case I want to detect that, and alert the user about it.
I tried using document.body.clientHeight but it doesnt seem to work... gives me the same height when I tried adding new toolbars and refreshed the page.
this should help you: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
Extremely easy in jQuery (and works well across 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>
It's easy with YUI as well.
<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>