Email conversation
| From | Tyler Rasmussen |
|---|
| To | Me |
|---|
| Subject | Finding the size of the browser window |
|---|
| Date | 20 March 2008 20:35 |
|---|
Mark,
Your function alertSize() (
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow) is a great
function, but I want to get the size of the browser window without the
scrollbar. The [Gecko documentation site] states innerHeight includes the
scrollbar ([URL]), and
Firefox, Opera, and Safari all retrieve the size of the browser window with
the scrollbar (IE, like always, is behind on standards - but this means it
gets the number I want it to get). Any ideas on how to find the browser
window size excluding the scrollbars?
I looked at how the [brand] function detects browser window size as well (
[URL], lines
447-493, bug fix the final if by changing the sign from lessthan to
greaterthan), and it runs into the same problem. But I did notice there
that if you test all the different else's separately, some of the numbers
seem to come out properly on Firefox, but I don't know enough about the
standards and javascript and whatnot to know how backwards and forwards
compatible everything is or which browsers support what.
~Tyler
| From | Me |
|---|
| To | Tyler Rasmussen |
|---|
| Subject | Re: Finding the size of the browser window |
|---|
| Date | 21 March 2008 10:46 |
|---|
Tyler,
> but I want to get the size of the browser window without the scrollbar.
In theory, the clientFoo properties return the size inside the scrollbar.
But not all browsers provide them, and even in those that do, some return
the same value as for innerFoo. Some include the scrollbar, some do not.
It's basically a big mess and I have not found a good solution, which is why
I say on that page that I do not cover any way to work with these
differences.
There is a possible solution, but it is quite a messy hack, and should be
used sparingly, since it is slow compared with the normal approach.
1. make sure the DOCTYPE triggers standards rendering (ignore IE 5)
2. make sure the <html> and <body> do not have the position style set to
anything (except the default value static)
3. create a div and append it to the body
4. give the div these styles:
position:absolute;top:0;bottom:0;left:0;right:0;
or if you need support for IE 6 (also make sure the <html> and <body> do not
have their width or height set to anything except the default auto):
position:absolute;top:0;height:100%;left:0;width:100%;
5. get the offsetWidth and offsetHeight of the div.
6. remove the div (or set it to display:none;) so it doesn't overlap
anything
Generally, the best approach is to assume that the size is the size outside
the scrollbar (if the browser provides innerWidth) and just subtract a
nominal 16 pixels (most browsers have a 16 pixel wide scrollbar, but this is
not a rule). If the browser actually gave the value inside the scrollbar
then your measurement will be too narrow, but in most cases, this does not
hurt. What you should use will depend on how critical it is that you get the
perfect width.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/