document.getEle mentById works in IE as expected, but not in Firefox

[dmk]

Hi All,

function getWindowSize() {
  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 );
 
  //call resize
    resizeContent(myHeight, myWidth)
}
 
function resizeContent(windowHeight, windowWidth){
    document.getElementById('content').style.height = windowHeight-107;
    window.alert(document.getElementById('content').style.height);
}

The function getWindowSize() is run at "onload" and "onresize" on the body tag.

It works as expected on Internet Explorer 7, however I also need it to work on Firefox. Basically the getWindowSize() function gets the innerWidth and innerHeight of the window and then calls the resizeContent function which resizes the DIV with the ID "content". this is required as the page is for an assignment and I need to rewrite an original frames page (i know, i know, why?????) and i want to make it exactly the same.

The window.alert in the resizeContent function shows that "document.getEl ementById('cont ent').style.hei ght" returns null for firefox and the correct value for IE.

Any help would be appreciated.

Cheers

[dmjpro]

Hi All,

function getWindowSize() {
  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 );
 
  //call resize
    resizeContent(myHeight, myWidth)
}
 
function resizeContent(windowHeight, windowWidth){
    document.getElementById('content').style.height = windowHeight-107;
    window.alert(document.getElementById('content').style.height);
}

The function getWindowSize() is run at "onload" and "onresize" on the body tag.

It works as expected on Internet Explorer 7, however I also need it to work on Firefox. Basically the getWindowSize() function gets the innerWidth and innerHeight of the window and then calls the resizeContent function which resizes the DIV with the ID "content". this is required as the page is for an assignment and I need to rewrite an original frames page (i know, i know, why?????) and i want to make it exactly the same.

The window.alert in the resizeContent function shows that "document.getEl ementById('cont ent').style.hei ght" returns null for firefox and the correct value for IE.

Any help would be appreciated.

Cheers

Welcome to TSDN!
Please one thing Do.
Test the value of windowHeight or windowWidth passed as parameters to resizeContent function, using ....

alert(windowHeight+"\t"+windowWidth);
 

Best of Luck.

Kind regards,
Dmjpro.

[dmk]

Welcome to TSDN!
Please one thing Do.
Test the value of windowHeight or windowWidth passed as parameters to resizeContent function, using ....

alert(windowHeight+"\t"+windowWidth);
 

Best of Luck.

Kind regards,
Dmjpro.

Yes, this does work, however it is not what is wrong, you may notice that in the resizeContent function I have the following line

window.alert(document.getElementById('content').style.height);

This is returning null in Firefox and the correct value in IE... this is where the problem is occuring.

[dmjpro]

Yes, this does work, however it is not what is wrong, you may notice that in the resizeContent function I have the following line

window.alert(document.getElementById('content').style.height);

This is returning null in Firefox and the correct value in IE... this is where the problem is occuring.

Actually that's why i told you to check before set the value of Height.
Now without set the height you check your own alert, and see what it returns.
If windowHeight and windowWidth returns numeric digit then it would be no problem.
If the windowHeight is String then try to covert it using parseInt.

Kind regards,
Dmjpro.

[dmk]

Yes, this does work, however it is not what is wrong, you may notice that in the resizeContent function I have the following line

window.alert(document.getElementById('content').style.height);

This is returning null in Firefox and the correct value in IE... this is where the problem is occuring.

This issue was solved because firefox does not automatically add "px" to the end of the value entered while IE does.

The code was changed to the following:

function resizeContent(windowHeight, windowWidth){
    pageElement = document.getElementById("content");
    calcHeight = windowHeight - 113;
    pageElement.style.height =  calcHeight + "px";
}

Note that you do not need to write it out on two lines (i.e. you can use document.getEle mentById("conte nt").style.heig ht if you want to.

[gits]

hi ...

yep ... this is due to the correct behaviour of firefox here ... the units has to be applied by the programmer ... and IE guesses that you wanted 'px'. So the best way - and i would always recommend that - is to develop with FF/MOZ and then test it in other browsers too ...

initial development with IE mostly gets you to adapt the entire code for standards-compliant browsers (you find a lot of this problems here in the forum too) in case you use IE-specifics in your code ... but using the standards methods that the other browsers support ... will mostly work in IE too ... and you have much less adaptions to do ...

conclusion: develop to the standards and test with standards-compliant browsers such as firefox ... after that ... get it to work with IE and other browsers too ... that will save you a lot of time ... i promise ;)

kind regards