HTML DOM width + height of visible window

Question

How do I get the current height and width of the available space in the browser as it is open.

I don't want the height of the total document, just what's visible on the screen.

Answer 1

you can take a look at this blog post to see the method.

and in short in give that code

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 );
}

also have to be noted that most of js framework (jquery, ext, prototype) would provide a function for doing that (IMHO).

in jquery:

$(window).width();
$(window).height();