I'm trying to figure out the best way to estimate the maximum size of the browser viewable area. i.e. the screen dimensions less toolbars, bookmarks, etc. Obviously it wont be perfect for cases when the window isn't maximized and due to the fact that people do actually use different browsers - I'm just looking for a good estimate here.
The purpose is to then figure out the maximum size for an image.
In Firefox you can use this code
<html>
<body>
<script type="text/javascript">
document.write("<p>Width: " + window.innerWidth + "</p>")
document.write("<p>Height: " + window.innerHeight + "</p>")
</script>
</body>
</html>
For IE you may try document.body.offsetWidth and document.body.offsetHeight properties.
The screen object will get screen properties (it might help), check its properties here: link text
You can also use jQuery's width() function on anything: $(window).width(). Keep in mind though that if the window is resized, this will change and will probably through off whatever layout it was originally based on. You can watch for that event, but that could hurt performance if you're doing complicated things.
A cross browser function to determine the viewport. Returns an Array containing width, height, left- and top position of the browser screen.
function getViewport () {
var iWidth,iHeight,iTop,iLeft,
w = window, d = document;
iWidth = w.innerWidth || d.documentElement.clientWidth
|| d.body.clientWidth || 0;
iHeight = w.innerHeight || d.documentElement.clientHeight
|| d.body.clientHeight || 0;
iTop = w.pageYOffset || d.body.scrollTop
|| d.documentElement.scrollTop || 0;
iLeft = w.pageXOffset || d.body.scrollLeft
|| d.documentElement.scrollLeft || 0;
return [iWidth,iHeight,iLeft,iTop];
}