Get total outside height and width of browser

Forum Moderators: open

Message Too Old, No Replies

Get total outside height and width of browser

In Firefox and Internet Explorer

physics

6:28 pm on Jan 29, 2007 (gmt 0)

I'm trying to get the outerWidth and outerHeight of a browser window. In Firefox I have access to outerWidth and outerHeight via window.outerHeight... However, even these don't seem to give me the real outer height. For example, the bar at the top of the window (with the open/close/resize buttons) doesn't seem to be included in the calculation.
I even found a tricky way to get this information in IE: set the window to a predefined size and then use window.document.body.offsetWidth to find the difference between the size of the page and the outside size you set. But I'm having similar problems with this method, i.e. that the top bar isn't included in the size.
The reason this is an issue is that I'm trying to position windows relative to each other and don't want them to overlap or have spaces between them.
I'd like to find a solution that works on IE/Firefox on Windows and at least Firefox on the Mac.
Any ideas?

References:
[quirksmode.org...]

physics

2:33 am on Feb 4, 2007 (gmt 0)

I think the solution might be to do OS detection and add the size of the top bar to the window height depending on whether the user has Windows or Mac (I'm assuming that bar is a fixed number of pixels, someone please correct me if this is wrong).

p.s. On my Mac the bar is 22 pixels, according to a pixel ruler program.

penders

1:12 am on Feb 5, 2007 (gmt 0)

I'm assuming that bar is a fixed number of pixels, someone please correct me if this is wrong

Unfortunately, I think the window title/header bar is of variable height (Windows), depending on the users Control Panel > Display Properties. Classic Style / XP Style, Text Size and Theme can all have an effect on the height of the title bar.

DrDoc

10:51 pm on Feb 9, 2007 (gmt 0)

I can't think of a reliable way to get the outer dimensions of the browser window. So, perhaps there's a way of doing what you need with just the inner dimensions. Care to expand on the usage scenario?

<added> And, yes ... the title bar is of variable height depending on a number of factors such as font size, theme, etc.

[edited by: DrDoc at 10:52 pm (utc) on Feb. 9, 2007]

physics

11:00 pm on Feb 9, 2007 (gmt 0)

What I really wanted to know was the height diff (i.e. the difference between the inside height and the total outside height). I was able to do what I wanted by opening a popup window with a size of self.screen.availWidth and a height of self.screen.availHeight and then using this code:


[pre]
if(self.innerHeight){
 hdiff = self.screen.availHeight - self.innerHeight;
 wdiff = self.screen.availWidth - self.innerWidth;
} else {
 hdiff = self.screen.availHeight - document.documentElement.offsetHeight;
 wdiff = self.screen.availWidth - document.documentElement.offsetWidth;
}
[/pre]

Now hdiff holds the actual number of pixels you need to add to the size of a window positioned at (0,0) to find the location to place another window so it is directly below it (so you can position windows relatively to each other).
For me this works on Windows with IE 6 and 7 and FF 2.0, also on Mac with FF and Safari.

Untested note: I think this method can be altered/used as long as you are able to maximize your browser window to fit the avail width and height. Note that if you're not opening a new window you will have to put your detect code into onLoad I think because otherwise it will try to detect the size differences before the window resizes itself...