Email conversation
| From | Bryn Dyment |
|---|
| To | Me |
|---|
| Subject | problem with calculating browser window width |
|---|
| Date | 2 March 2004 23:40 |
|---|
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
Hi,
When I click 'Click here to test this script' for the browser window size
example, I get differing widths on IE6 versus Netscape 7 and Opera 7. I
have positioned my three browser windows so that the 'inner' (i.e., no
'chrome') window is identical in size. I've verified this by turning off
'body' margins/padding, setting the page background to red, and taking
screenshots to compare the size of the red rectangle in Photoshop.
The 'true' width (according to Photoshop, measuring the red background) was
1001 pixels. This was reported correctly in IE6 using your script, but
reported as 1016 in Netscape 7, and 1018 in Opera 7.
I'm just beginning to investigate this. But it appears that Netscape and
Opera are including the width of the scrollbars in the calculation, whereas
IE is only using the drawable area.
Anyway, wondering if you had any thoughts. I noticed that the page was
updated five days ago, so thought this all might still be fresh in your
mind.
Thanks,
Bryn Dyment
| From | Me |
|---|
| To | Bryn Dyment |
|---|
| Subject | Re: problem with calculating browser window width |
|---|
| Date | 3 March 2004 11:47 |
|---|
Bryn,
You are quite right, Netscape 6+ and Opera 7 (some versions - but not all)
add on the space behind the scrollbar. At the moment, I have informed the
Opera team of this, and they are hoping to fix it. I understand that the
Mozilla team are aware of it so no doubt, they will fix it at some point in
the future. Safari also does something strange, and v1.2 counts the width
of the space upto the scrollbar, and it assumes there is a scrollbar, even
if there isn't. ARGH!
When there is no scrollbar, everything works fine in all except Safari 1.2.
If I think there might be a scrollbar, I just subtract 16 pixels from the
width and hope it will look OK (usually used for falling snow effects or
edge detection menus - where it doesn't matter). If I need a perfect
response, I force the window not to have scrollbars and just ignore Safari
1.2 being strange.
In the mean time, if you desperately need the true size of the window,
create an empty absolutely positioned element, and set its 'right' style to
'0' and do not define the left position. Make sure it has no padding or
margins or border, and set its 'width' to (for example) '10px'.
Then use:
var theDiv = document.getElementById('idOfDiv');
var theWidth = theDiv.offsetLeft + theDiv.offsetWidth;
Not the best solution, but it depends on how perfect you need it to look.
The whole window size measurment is just a mess, but I think you will
understand why I stick to the simpler technique instead of this 'solution'.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Bryn Dyment |
|---|
| To | Me |
|---|
| Subject | Re: problem with calculating browser window width |
|---|
| Date | 3 March 2004 18:13 |
|---|
Hi Mark,
First, thanks for the detailed reply. A welcome change from the norm.
> Then use:
> var theDiv = document.getElementById('idOfDiv');
> var theWidth = theDiv.offsetLeft + theDiv.offsetWidth;
You mention that this is 'not the best solution'. I'm wondering why? Is it
because it's 'hackish'? Or because it causes problems in some browsers? I
don't mind the hackish aspect of it, so unless it breaks in some browsers,
I'd be inclined to go this way...
Once again, thanks for the detailed info!
...Bryn.
| From | Me |
|---|
| To | Bryn Dyment |
|---|
| Subject | Re: problem with calculating browser window width |
|---|
| Date | 4 March 2004 8:15 |
|---|
Bryn,
I don't consider it a good solution as it relies on creating a blank
element (and it relies on the browser supporting 'right' [not NS4 or IE4]),
and I feel that a good solution to a JavaScript problem should rely
entirely on JavaScript, and not creating arbitrary elements. So yes, it is
kind-of hackish, but if you are happy with that, then I wouold say go ahead
and use it.
I have used only getElementById, as NS4 and IE4 (which require
document.layers and document.all respectively) cannot handle 'right' anyway.
However, all newer browsers can handle it, like IE5+, NS6+, Opera 5+,
Safari, Konqueror, IE5 Mac, etc. etc.
Tarquin