Home > java, javascript > document & window by browser

document & window by browser

http://13thparallel.com/archive/viewport/example6.htm
http://www.howtocreate.co.uk/
JavaScript libraries
PHP libraries

Browser window.
innerHeight
document.
body.clientHeight
document.
documentElement.
clientHeight
Opera 9.5+ strict window document window
Opera 9.5+ quirks window window document
Opera 7-9.2 window window document
Opera 6 window window N/A
Mozilla strict window document window
Mozilla quirks window window document
KHTML window document document
Safari window document document
iCab 3 window document document
iCab 2 window window N/A
IE 6+ strict N/A document window
IE 5-7 quirks N/A window 0
IE 4 N/A window N/A
ICEbrowser window window document
Tkhtml Hv3 window window document
Netscape 4 window N/A N/A
  • window.innerHeight/Width
    Provided by most browsers, but importantly, not Internet Explorer.
  • document.body.clientHeight/Width
    Provided by many browsers, including Internet Explorer.
  • document.documentElement.­clientHeight/Width
    Provided by most DOM browsers, including Internet Explorer.
  • Most browsers provide window.pageXOffset/pageYOffset.
    Internet Explorer and some other browsers will provide document.body.scrollLeft/Top.
    IE 6 and a few other browsers, provide document.documentElement.scrollLeft/Top.
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 );
}
function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

  1. No comments yet.
  1. No trackbacks yet.