asked on

Internet Explorer 8 clientWidth property for document body returning zero

I have an existing web page that builds a dynamic section (division) depending on the size of the frame. This has been running fine on IE5, 6 and 7. On IE8, the initial calls to the routine that determines the frame width using the JavaScript clinetWidt property on the document body returns a zero. When I subtract out a constant that is reserverd for a fixed area, I get a negative value that causes the function that sets the division size dynamically to be in error. If I refresh the screen at this point, all runs fine. If I add alerts() to the JavaScript code to try to catch it, the delay causes the problem to go away. It acts like the frame size is not being set by IE8 until after some delay. Once set to non-zero, it works fines.

Sample:
// This routine is called while initializing the form to determine the current frame size.
function getFrameSize(fbody) {
fWidth = fbody.clientWidth;
}
// This routine is called to set the division size for the dynamic area based on the current frame size.
function setDivSize() {
mWidth = fWidth - 355;
document.all.dMonth.style.width = mWidth;
}

If there is no delay via an alert, then getFrameSize is returning zero. If I delay the code or do a refresh, it is not zero and reflects the current window size. I have tried setting the form using the meta tag to run in IE7 compatability mode with no effect.

Something changed on IE8 and the question is was I violating some rule/standard that is now being enforced on IE 8 or is there a problem with IE 8? Also, any suggestions on how to get around the problem?

Thanks

Michel Plungjan

You do not tell when you do this.
If onLoad then strange, but if inline, the body tag may not even be there yet

Show some more code

Also do

document.getElementById('dMonth').style.width=mWidth+'px'
to have it work in all browsers including FF

JohnSixkiller

Hi,

use: document.documentElement.clientWidth

More info:
http://www.codingforums.com/showthread.php?t=138407
http://www.webmasterworld.com/forum21/11096.htm

Michel Plungjan

or better
if (document.documentElement) ... document.documentElement.clientWidth ....

SCMGR3

ASKER

Thanks for the suggestions. I will check them. However, as stated in the original note, the code has been running on IE release 5, 6 and 7 with no problems. It started to fail with IE 8. This, to me, means either there is a problem in IE 8 or I was getting away with something that worked but was outside the specifications and IE is now enforcing the rules.

Hopefully one of the suggestions about changing the code will solve the problem and I can not worry whether it is something that worked because of a loophole in prior IE releases. I will update this with status once I can try the suggested changes.

SCMGR3

ASKER

OK, I tried the suggestions with no change. The failure does occur during the onLoad processing. The <body> tag defines the onLoad routine as startInit.

function startInit() {
if (document.refreshCheck.reLoaded.value=="0") {
document.refreshCheck.reLoaded.value = "1";
} else {
location.reload();
};
setTotalFldsRead();
getFrameSize(docBody);
if (runType=="U") {
calcUpdateMonth();
};
if (window.location.protocol=="file:") {
if (validMonth!=curMonth && runType=="U") {
var dFMonth = validMonth.substr(0,4) + "/" +
validMonth.substr(4,2)
alert("The forecast file you are viewing " +
"is out of date." +
"\n\n\r" +
"The file was created for use only " +
"during " + dFMonth + "." +
"\n\n\r" +
"You can review this data but cannot "+
"use it to modify the forecast.");
runType="R";
}
}
alert('trap1');
buildTable('monthData');
dMonth.style.visibility='visible';
alert('trap2');
setWarningMsg();
setControls();
if (runType=="U") {
setUpdateMethod();
};
setCatTotals();
}

If the 'trap 1' alert is in place, then when OK is pressed for it, the next thing is the 'trap 2' alert and all is as it should be. If I remove 'trap 1' then the error occurs before 'trap 2' as it is the buildTable routine that calls the function to set the division size based on the setting of the frame width. This definitely appears to be a timing condition as it works when the process is halted using the 'trap 1' alert but fails if it is not there. The first thing in buildTable function is the call to setDivSize that is shown in the original post. which is trying to set the division size based on the frame width captured by the getFrameSize function called earlier in the startInit routine. I tried a test where I inserted another call to getFrameSize in the buildTable routine just prior to the call to the setDivSize function which is getting the error. There was no change in the behavior.

Here is the code for the setTotalFieldsRead function that is called in the startInit routine before any attempt is made to get the frame size.

function setTotalFldsRead() {
totColor = "black";
tObj = document.getElementById('t_1_0');
setRead(tObj);
tObj = document.getElementById('t_2_0');
setRead(tObj);
tObj = document.getElementById('t_3_0');
setRead(tObj);
tObj = document.getElementById('t_4_0');
setRead(tObj);
tObj = document.getElementById('t_5_0');
setRead(tObj);
tObj = document.getElementById('t_6_0');
setRead(tObj);
tObj = document.getElementById('t_7_0');
setRead(tObj);
tObj = document.getElementById('t_8_0');
setRead(tObj);
tObj = document.getElementById('t_11_0');
setRead(tObj);
}
function setRead(obj) {
obj.readOnly=true;
if (obj.value.indexOf("(") > -1) {
obj.style.color="red";
} else {
obj.style.color="black";
}
}

This has worked until I installed IE8. The form consists of multiple areas defined as division (<div>) all of which are fixed positions except for the one that shows monthly data. It is being dynamically built based on the current frame size. It contains as many months as will fit based on the frame size and is a scrollable "window" so the user can scroll left/right to see any months that would not fit. If the user changes the size of the window, this dynamic area is rebuilt. Everything works as it always has except for the initial attempt to set the division size during the onLoad. If a refresh is done after the form load hangs with the error, it will then load correctly. The body tab has onresize defined as the chgDivSize function which is doing exactly what is done during the initial load.

function chgDivSize() {
getFrameSize(docBody);
setDivSize();
}

Michel Plungjan

I have no idea based on some snippets.

Please post a URL or something

SCMGR3

ASKER

Unfortunately, I cannot post the full form or a link to one. This is form used by a major international corporation to forecast revenue/cost data for projects. It is dynamic in that it is built dynamically for each project and contains the current revenue and cost data for the project. The person it is sent to uses it to update the values and the submits it to update the master financial database. There is over 2500 lines of HTML/JavaScript in the form and the data is confidential to the corrporation so I am not able to do more than show generic snippits.

Michel Plungjan

Ok... If you could create a page with just the script and dummy data, then that would help.
If not, I am afraid I personally cannot help you.

SCMGR3

ASKER

I will see if I can build a simple form that gets a failure.

ASKER CERTIFIED SOLUTION

SCMGR3

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial