This is some spiffy javascript to get the proper sizes of the window for say a nifty colorbox popup;
var myWidth = 0, myHeight = 0; function setWindowSize() { if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } };
An example of using it is like this;
$.fn.colorbox({ iframe: true, open: true, href: '/Controller/Action', width: myWidth - 40, // just a bit smaller than the window height: myHeight - 40 // just a bit smaller than the window });
Dont forget to bind the window resize to reset your size variables;
$(window).resize(function(e){ setWindowSize(); });
Enjoy!