By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,148 Members | 779 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,148 IT Pros & Developers. It's quick & easy.

document.getElementById works in IE as expected, but not in Firefox

P: 5
Hi All,

Expand|Select|Wrap|Line Numbers
  1. function getWindowSize() {
  2.   var myWidth = 0, myHeight = 0;
  3.   if( typeof( window.innerWidth ) == 'number' ) {
  4.     //Non-IE
  5.     myWidth = window.innerWidth;
  6.     myHeight = window.innerHeight;
  7.   } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
  8.     //IE 6+ in 'standards compliant mode'
  9.     myWidth = document.documentElement.clientWidth;
  10.     myHeight = document.documentElement.clientHeight;
  11.   } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
  12.     //IE 4 compatible
  13.     myWidth = document.body.clientWidth;
  14.     myHeight = document.body.clientHeight;
  15.   }
  16.   window.alert( 'Width = ' + myWidth );
  17.   window.alert( 'Height = ' + myHeight );
  18.  
  19.   //call resize
  20.     resizeContent(myHeight, myWidth)
  21. }
  22.  
  23. function resizeContent(windowHeight, windowWidth){
  24.     document.getElementById('content').style.height = windowHeight-107;
  25.     window.alert(document.getElementById('content').style.height);
  26. }
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.getElementById('content').style.heig ht" returns null for firefox and the correct value for IE.

Any help would be appreciated.

Cheers
Sep 4 '07 #1
Share this Question
Share on Google+
5 Replies


dmjpro
100+
P: 2,476
Hi All,

Expand|Select|Wrap|Line Numbers
  1. function getWindowSize() {
  2.   var myWidth = 0, myHeight = 0;
  3.   if( typeof( window.innerWidth ) == 'number' ) {
  4.     //Non-IE
  5.     myWidth = window.innerWidth;
  6.     myHeight = window.innerHeight;
  7.   } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
  8.     //IE 6+ in 'standards compliant mode'
  9.     myWidth = document.documentElement.clientWidth;
  10.     myHeight = document.documentElement.clientHeight;
  11.   } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
  12.     //IE 4 compatible
  13.     myWidth = document.body.clientWidth;
  14.     myHeight = document.body.clientHeight;
  15.   }
  16.   window.alert( 'Width = ' + myWidth );
  17.   window.alert( 'Height = ' + myHeight );
  18.  
  19.   //call resize
  20.     resizeContent(myHeight, myWidth)
  21. }
  22.  
  23. function resizeContent(windowHeight, windowWidth){
  24.     document.getElementById('content').style.height = windowHeight-107;
  25.     window.alert(document.getElementById('content').style.height);
  26. }
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.getElementById('content').style.heig ht" 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 ....
Expand|Select|Wrap|Line Numbers
  1. alert(windowHeight+"\t"+windowWidth);
  2.  
Best of Luck.

Kind regards,
Dmjpro.
Sep 4 '07 #2

P: 5
dmk
Welcome to TSDN!
Please one thing Do.
Test the value of windowHeight or windowWidth passed as parameters to resizeContent function, using ....
Expand|Select|Wrap|Line Numbers
  1. alert(windowHeight+"\t"+windowWidth);
  2.  
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

Expand|Select|Wrap|Line Numbers
  1. 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.
Sep 4 '07 #3

dmjpro
100+
P: 2,476
Yes, this does work, however it is not what is wrong, you may notice that in the resizeContent function I have the following line

Expand|Select|Wrap|Line Numbers
  1. 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.
Sep 4 '07 #4

P: 5
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

Expand|Select|Wrap|Line Numbers
  1. 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:

Expand|Select|Wrap|Line Numbers
  1. function resizeContent(windowHeight, windowWidth){
  2.     pageElement = document.getElementById("content");
  3.     calcHeight = windowHeight - 113;
  4.     pageElement.style.height =  calcHeight + "px";
  5. }
Note that you do not need to write it out on two lines (i.e. you can use document.getElementById("content").style.height if you want to.
Sep 4 '07 #5

gits
Expert Mod 5K+
P: 5,333
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
Sep 4 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.