Email conversation
| From | Ariel Shkedi |
|---|
| To | Me |
|---|
| Subject | better way to get window size innerHeight, innerWidth |
|---|
| Date | 20 July 2007 05:34 |
|---|
Re: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
I just figured out a way to get accurate window innerHeight and width that
works on all browsers!
It works by making a full size image, and measuring it.
A little css and the process is invisible (don't forget to create the
spacer.gif):
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function getSize() {
var sizer = document.getElementById('sizer');
//deal with margin bug in IE:
//save it, set it to 0 and put it back later
var marginLeft = document.body.style.marginLeft;
var marginRight = document.body.style.marginRight;
var marginTop = document.body.style.marginTop;
var marginBottom = document.body.style.marginBottom;
document.body.style.marginLeft = '0px';
document.body.style.marginRight = '0px';
document.body.style.marginTop = '0px';
document.body.style.marginBottom = '0px';
sizer.parentNode.style.width='100%';
sizer.parentNode.style.height='100%';
sizer.style.height='100%';
sizer.style.width='100%';
var innerWidth = sizer.width; //non style, so it's a number
var innerHeight = sizer.height;
//restore old margin
document.body.style.marginLeft = marginLeft;
document.body.style.marginRight = marginRight;
document.body.style.marginTop = marginTop;
document.body.style.marginBottom = marginBottom;
//these are just to reduce memory usage:
sizer.style.width='1px';
sizer.style.height='1px';
sizer.parentNode.style.width='1px';
sizer.parentNode.style.height='1px';
alert(innerWidth);
alert(innerHeight);
}
</SCRIPT>
</HEAD>
<BODY onLoad="getSize()" onResize="getSize()">
<DIV STYLE="position: absolute; top: 0px; left: 0px; width: 1px;
height: 1px; visibility: hidden;">
<IMG SRC="spacer.gif" ID="sizer" WIDTH="1" HEIGHT="1">
<!-- don't forget to create spacer.gif -->
</DIV>
</BODY>
</HTML>
One note: it's sensitive to the scroll bars, giving the size _inside_ them!
But, if you run it before the page has scroll bars it will be off, so run it
at the end of the page, or via onLoad.
-Ariel Shkedi
| From | Me |
|---|
| To | Ariel Shkedi |
|---|
| Subject | Re: better way to get window size innerHeight, innerWidth |
|---|
| Date | 22 July 2007 09:48 |
|---|
Ariel,
> I just figured out a way to get accurate window innerHeight and width that
> works on all browsers!
>
> It works by making a full size image, and measuring it.
I am afraid this is not a better way to do it. It has numerous problems:
1. Safari and Konqueror cannot stretch an element to 100% height of the
viewport properly in quirks mode (which your test uses).
2. It cannot be used in strict rendering mode (so it will break with many
doctypes), because the body and HTML element are not given a height of 100%.
3. It cannot be used on a page with any other content in strict mode, or
that content will throw off the result.
4. Internet Explorer 6- will always stretch an element to fit its contents,
so the extra content in strict mode would make the height of the image
wrong.
5. It cannot work correctly if the user has disabled images.
6. It messes with the styles, and although it tries to clean up, there are
cases where it will break things.
7. Borders, paddings, and various other styles on the HTML or body elements
will all cause it to screw up.
[Ed. It also means molesting your markup to include the test image, which
can screw up your layout, and mess with the semantics. On top of that, the
idea of using onload to run the script before load is also flawed; most
browsers do not wait for onload, or even parsing to complete, before
displaying the page. Browsers that progressively render - Opera and
Firefox, for example, can lay parts of the page out while still parsing
other parts. By running the script, it forces the browsers to lay out the
page, creating the scrollbars it was attempting to avoid.]
There are various related hacks that could be used, such as measuring the
offsetHeight and offsetWidth of a fixed position element that has top,
bottom, left, right all set to 0 (won't work in IE 6-), but really, these
are worse than the original problem. It is much better to just use the
normal properties designed for the purpose, even if they do have a few odd
inconsistencies.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/