More IE trouble (window height and width)

Discussion in 'JavaScript' started by James McMurray, Nov 24, 2007.

0
  1. #1
    The following code works great unless called in the <head> section from Internet Explorer. It returns the proper height and width every time except there, when it returns 0 for both. Is it possible to access the proper window height and width inside IE's <head>?

    
function getSizes() {
  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;
  }
  return new Array(myWidth, myHeight);
}
    Code (markup):

     
    James McMurray, Nov 24, 2007 IP
  2. ajsa52

    ajsa52 Well-Known Member

    Messages:
    3,426
    Likes Received:
    125
    Best Answers:
    0
    Trophy Points:
    160
    #2
    You should call your getSizes function when your window has been fully loaded including pictures, because they can affect width and height.
    Try defining your function in HEAD section, and calling onLoad event on BODY section.
    
<head>
...
function getSizes()
{
  ...
}
...
</head>
<body onLoad="getSizes();">
...
</body>
    Code (markup):
     
    ajsa52, Nov 25, 2007 IP
  3. James McMurray

    James McMurray Peon

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The width and heioght are being used to determine where to put a progress bar that displays the percentage of the page that's been loaded. An example is here. If you view it in anything but IE, window.innerWidth and innerHeight are used to center the bar. In IE I'm having to use screen.height and screen.width. Most of the time this will work fine, because the page is setup so it's best viewed full screen. But if the user goes there and their browser window is not maximized, the bar may be oddly spaced or not visible.
     
    James McMurray, Nov 25, 2007 IP