Nice javascript to set window size for popups

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!

0 Comments