Ccna final exam - java, php, javascript, ios, cshap all in one. This is a collaboratively edited question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
Thursday, April 12, 2012
Get the browser viewport dimensions with Javascript
I want to provide my visitors the ability to see images in high quality, is there any way I can detect the window size (or better yet, the viewport size - see green area ) of the browser with Javascript?
If you aren't using jQuery, it gets ugly. Here's a snippet that should work on all new browsers. The behavior is different in Quirks mode and standards mode in IE. This takes care of it.
var elem = (document.compatMode === "CSS1Compat") ? document.documentElement : document.body;
var height = elem.clientHeight; var width = elem.clientWidth;
jQuery dimension functions
ReplyDelete$(window).width() and $(window).height()
If you aren't using jQuery, it gets ugly. Here's a snippet that should work on all new browsers. The behavior is different in Quirks mode and standards mode in IE. This takes care of it.
ReplyDeletevar elem = (document.compatMode === "CSS1Compat") ?
document.documentElement :
document.body;
var height = elem.clientHeight;
var width = elem.clientWidth;
You can use the window.innerWidth and window.innerHeight properties.
ReplyDeleteSee: responsejs.com/labs/dimensions/
ReplyDelete// pure JavaScript
var viewportWidth = document.documentElement.clientWidth
, viewportHeight = document.documentElement.clientHeight
;
// jQuery
var viewportWidth = $(window).width()
, viewportHeight = $(window).height()
;
// hybrid
var viewportWidth = document.documentElement.clientWidth || $(window).width()
, viewportHeight = document.documentElement.clientHeight || $(window).height()
;