Solved

Internet Explorer 8 clientWidth property for document body returning zero

Posted on 2009-07-07
10
1,178 Views
Last Modified: 2013-12-08
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
0
Comment
Question by:SCMGR3
  • 5
  • 4
10 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24803106
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
0
 
LVL 11

Expert Comment

by:JohnSixkiller
ID: 24803372
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24803571
or better
if (document.documentElement) ... document.documentElement.clientWidth ....
0
 

Author Comment

by:SCMGR3
ID: 24804315
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.
0
 

Author Comment

by:SCMGR3
ID: 24813763
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();
}              
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24813863
I have no idea based on some snippets.

Please post a URL or something
0
 

Author Comment

by:SCMGR3
ID: 24814006
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24814072
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.
0
 

Author Comment

by:SCMGR3
ID: 24814162
I will see if I can build a simple form that gets a failure.
0
 

Accepted Solution

by:
SCMGR3 earned 0 total points
ID: 24924883
I am closing this, at least for now.  I have a more serious problem with the form under Notes 8 and IE versions 6 and 7.  The form is used in a controlled environment and IE 8 will not be deployed for some time so this is a "future bug" that I can afford to ignore for the moment.

Thanks for the suggestions that people have posted thus far.  I am sure I will be back to this problem at some point.  With any luck, MS will have updated IE 8 with another critical fix and the problem will just disappear before I have to fix the form!  (grin)
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Several part series to implement Internet Explorer 11 Enterprise Mode
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now