Detect browser window resize (height and width)

Allows you to trigger an evert when the browser window is resized and use the returned height and width to adjust other objects on the page. For example, you can use it to resize a div box on the page that you always want to be 30px less on each side of the window. Using width =100% and margin doesn't always display consistently across different browsers and edge borders skew the margins. This solution works regardless of margins, padding, and content. Will work for most browsers (IE, Firefox, Sarari, Chrome, etc...)
JavaScript

Add to your JS Header

function alertSize() {
  var myWidth = 0, myHeight = 0;
  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;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );
}

Add to the Body attributes of the page.

"onresize=\"alertSize();\""

Posted by fbrefere001 on Monday March 22, 2010