Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

innerWidth problem in Firefox

Status
Not open for further replies.
theniteowl

theniteowl

Programmer
May 24, 2005
1,975
US
Hi All,
Has anyone else experienced issues with innerHeight and innerWidth in Firefox?

It is supposed to return the height/width of the content window without including the scrollbars but for some reason I get values with the scrollbars included and it is throwing off my positioning code in Firefox.

I verified I am detecting the correct browser type and using innerHeight/Width and verified that the values indeed include the bars by checking the size of a screen shot of the page.

Thoughts?

Paranoid? ME?? Who wants to know????
 
Sort by date Sort by votes
I have been getting inconsistent results so I stripped out all javascript except to plug the values of innerHeight/Width and clientHeight/Width into the status bar so I could see them and tried again using different doctypes.

In the test I had both a horizontal and a vertical scrollbar on the page and all results came back including the space covered by the scrollbar. The screen size was kept static through all tests.

With transitional and strict HTML doctypes the numbers always came back the same for client and inner methods for Height and Width and the same was true with a partial doctype of: Partial: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Using no doctype at all or using a partial of: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
numbers for inner and client methods returned the same except that clientHeight always returned 0.

So, still no luck getting the display height/width without the dimensions of the scrollbars included.

It works fine in IE but not in Firefox though the details on innerHeight/Width I have read say it should return the value not including the scrollbars.

Frustrating. I did not want to hardcode offsets for scrollbars that just gets messy and can vary.





Paranoid? ME?? Who wants to know????
 
Upvote 0 Downvote
The site I read stated that the scrollbars were not included in the return value. Looking at the Mozilla specs they apparently ARE included for innerHeight/Width.
However, the clientHeight/Width values should NOT include the scrollbar according to the Mozilla specifications but it is returning the exact same value as the inner methods.

I am using document.documentElement.clientWidth to get the value if it makes a difference.


Paranoid? ME?? Who wants to know????
 
Upvote 0 Downvote
How would you address the body or html elements directly for this method? I have been trying various approaches but none so far have worked.


Paranoid? ME?? Who wants to know????
 
Upvote 0 Downvote
Hi

My FireFox 1.5.0.1 shows correct, scrollbarless sizes for [tt]document.documentElement.clientWidth[/tt] and [tt]~.clientHeight[/tt]. ( 1008*534 on my 1024*768 screen )

Feherke.
 
Upvote 0 Downvote
OK, been shooting myself in the foot here.

Original values were always off. I was displaying them in the status bar to make them easy to see.
When I simplified my code to try and figure out why the numbers were off I move the code to display to status outside of any functions since I deleted all the functions.
As a result the code was of course executing as the page loaded and the rendering of the scrollbars does not occur until after my code executed so of course I had the wrong numbers.

So, innerHeight/Width returns values WITH any rendered scrollbar and clientHeight/Width IS returning the value without. All of my testing was good up until I tried using the clientHeight/Width which was at the same time I made the other changes. *Sigh*

OK, here is the pertinent question to clientHeight/Width then.

I use this code to detect browser type and use the method appropriate. Will the use of clientHeight/Width instead of innerHeight/Width work in this setup? Or in other words do the browsers as identified by this code all support the clientHeight/Width property in the same way so that additional detection is not needed?
These browser incompatibilities are frustrating.
Code: 
  function setScrSize() {
    if (self.innerWidth) {
      scrWidth = self.innerWidth;
      scrHeight = self.innerHeight;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
      scrWidth = document.documentElement.clientWidth;
      scrHeight = document.documentElement.clientHeight;
    } else if (document.body) {
      scrWidth = document.body.clientWidth;
      scrHeight = document.body.clientHeight;
    }
  }


Paranoid? ME?? Who wants to know????
 
Upvote 0 Downvote
Not having any luck today.

clientHeight returns the full size of the page not just the current content window. clientWidth returns the content width, not the full width of the page.

My goal is to automatically re-position a box if the box is going to display off the viewable window but I cannot get a reliable dimension for the current content window to use in my calculations.



Paranoid? ME?? Who wants to know????
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

moveit
  • Locked
  • Question
Firefox will not let me sign in to my Tesco account
Replies
4
Views
371
teknance
teknance
Deniall
  • Locked
  • Question
Problem accessing Eng-Tips website 1
Replies
7
Views
795
Deniall
Deniall
Sebastian42
  • Locked
  • Question
Firefox library is blank and just an icon
Replies
2
Views
141
Sebastian42
Sebastian42
Tedwhite
  • Locked
  • Question
How To Fix Firefox Freezing Issue In Windows 10?
Replies
2
Views
226
Tedwhite
Tedwhite
krabban
  • Locked
  • Question
Firefox, can't &quot;Add to Firefox&quot;, Vue.js devtools
Replies
0
Views
120
krabban
krabban

Part and Inventory Search

Sponsor

Back
Top