Help needed: document true width and height?


V

VK

Do current DOM implementations having any methods to get the document
true width and height?
By "true width" and "true height" I mean the real dimensions of a
document, not just the current viewport size. Other words if a
document 2200px width is displayed in browser where say 1020px are
visible in the browser window and to see other 1180px one needs to use
horizontal window scroll : I need to know that the document is 2200px
width - not 1020 or something around.

From my quick tests and search currently DOM specs do not provide such
mechanics: contentWidth, offsetWidth etc. are all made to operate with
the current viewport but not with the document itself.

I am on a time limit with a business project right now, so I cannot
spend as much time as I'd like to the TransModal project. Could anyone
either confirm my conclusion about the current DOM method or to prove
me wrong with some hint to a usable technique.

Such technique must be reliable working for
FF 2.x
IE 7.x

Highly desirable to have it adjustable to IE 6.x

It would be nice if it also will work with Opera 9.x and Safari 3.x

Page for quick test:
--------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!-- setting Strict (CSS1Compat) mode for testing -->
<html lang="la">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-1">
<title>Demo</title>
<style type="text/css">

html {
width: 100%;
height: 100%;
padding: 0px 0px;
background-color: #DCDCDC;
}

body {
/* A narrow width is set for testing purposes
* to get scroll bars on the window:
*/
width: 40%;
height: auto;
margin: 0px auto;
padding: 0.5em 2em;
background-color: #FFFFFF;
border-left: thin solid black;
border-right: thin solid black;
}

form * {
font: 1em Times New Roman, Times, serif;
}

p {
font: 1em Georgia, serif;
line-height: 1.4;
}

p#HScroll {
position: absolute;
left: 1200px;
top: 10px;
}

div#TransModalDialog {
border: thick solid yellow;
padding: 10px 10px;
background-color: white;
}
</style>

<script type="text/javascript">
function test() {
// do what?
}
</script>
</head>
<body>
<form name="config" action="" onsubmit="return false;">
<fieldset>
<legend>Demo</legend>
<select name="color">
<optgroup label="Color:">
<option value="#000000" selected>Black</option>
<option value="#FF0000">Red</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
</optgroup>
</select>
<select name="opacity">
<optgroup label="Opacity:">
<option value="0">0%</option>
<option value="0.1">10%</option>
<option value="0.2">20%</option>
<option value="0.3">30%</option>
<option value="0.4" selected>40%</option>
<option value="0.5">50%</option>
<option value="0.6">60%</option>
<option value="0.7">70%</option>
<option value="0.8">80%</option>
<option value="0.9">90%</option>
<option value="1">100%</option>
</optgroup>
</select>
<a href="#"
style="color:blue; font-weight:bold;"
onclick="test(); return false;">Test</a>
</fieldset>
</form>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque eu est. Morbi laoreet, diam at interdum pharetra,
tellus pede posuere massa, fermentum scelerisque enim elit
in felis. Donec auctor, libero non rhoncus mattis, dui sapien
faucibus quam, ut pulvinar elit est ac tortor. Quisque molestie.
Donec eu lorem. Integer semper suscipit ipsum. Phasellus et
justo sed dolor blandit lobortis. Morbi a urna eu dolor bibendum
fermentum. Phasellus adipiscing blandit nisi. Aenean urna est,
adipiscing eu, pellentesque eget, egestas sit amet, nibh.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur id mauris non elit consectetuer
semper. Nam nec nunc. Nulla facilisi. Suspendisse nec nibh.
Cras vitae felis.</p>
<p style="text-align: right;"><a href="#"
style="color:blue; font-weight:bold;"
onclick="test(); return false;">Test</a></p>
<p>Integer mi libero, adipiscing at, congue vulputate, dictum et,
lectus. Sed ipsum. Proin scelerisque lacinia lorem. Etiam non mi
ac quam pharetra egestas. Quisque est. Proin venenatis consequat
augue.
Curabitur suscipit, leo quis pretium egestas, lorem tellus imperdiet
mauris, at adipiscing sapien orci at magna. Sed vitae nunc gravida
orci
dictum dapibus. Mauris porttitor viverra orci. Donec volutpat
fringilla
nibh. In nibh arcu, interdum et, tristique quis, semper nec, ante.</
p>
<p>Etiam congue gravida urna. Curabitur quam. Etiam congue commodo
tellus.
Phasellus eget dui quis urna iaculis accumsan. Integer suscipit
sapien.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
gravida, ipsum id molestie molestie, massa urna tempus purus, sit
amet
bibendum metus lacus non quam. Sed nunc. Nam libero arcu, hendrerit
vel,
posuere sed, consectetuer sit amet, diam. Curabitur egestas. Nulla
suscipit
justo nec libero. Quisque suscipit vehicula dolor. Fusce in massa.</
p>
<p><a href="#"
style="color:blue; font-weight:bold;"
onclick="test(); return false;">Test said:
Getting horisontal scroll</p>
</body>
</html>
 
Ad

Advertisements

M

Martin Honnen

VK said:
Do current DOM implementations having any methods to get the document
true width and height?

Mozilla has
document.height
document.width
IE has scrollHeight/scrollWidth, depending on compatMode you will need
these properties of document.documentElement or document.body
 
G

GTalbot

Mozilla has
document.height
document.width

Martin,

as far as I know, document.width and document.height are not useful,
helpful. One would instead/rather use
window.innerWidth and window.innerHeight for browsers that support
these properties (Safari 2+, Firefox 1+, Seamonkey 1+, Opera 7+).

Regards, Gérard
 
V

VK

Mozilla has
document.height
document.width

That is of no use. It is just an extremely buggy "beta version" of
document.body.contentWidth inherited from the Netscape 4.x code. No
one is suggested to ever use it. One my check on the posted test page.
IE has scrollHeight/scrollWidth, depending on compatMode you will need
these properties of document.documentElement or document.body

That was a valuable hint. Correction: scrollWidth / scrollHeight is
supported by all current browsers of my interest, not by IE only.

document.documentElement.scrollWidth
document.documentElement.scrollHeight
seem to do what we need in Strict mode for FF 2.0.0.14, IE 6.0, Opera
9.27 (tested under Windows XP SP2)
Of course Safari 3.0 is broken : more basic feature one needs - more
probability that Safari has a bug on it : this long standing tradition
never got broken yet from my experience :-(
In this particular case Safari gets
document.documentElement.scrollHeight right, but
document.documentElement.scrollWidth reports viewport width instead of
document width. Demo follows below. Any known workaround for Safari
3.x? - so far only for Strict mode in consideration.

------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!-- setting Strict (CSS1Compat) mode for testing -->
<html lang="la">
<head>
<meta http-equiv="Content-type"
content="text/html; charset=iso-8859-1">
<title>Demo</title>
<style type="text/css">

html {
width: 100%;
height: 100%;
padding: 0px 0px;
background-color: #DCDCDC;
}

body {
/* A narrow width is set for testing purposes
* to get scroll bars on the window:
*/
width: 40%;
height: auto;
margin: 0px auto;
padding: 0.5em 2em;
background-color: #FFFFFF;
border-left: thin solid black;
border-right: thin solid black;
}

form * {
font: 1em Times New Roman, Times, serif;
}

p {
font: 1em Georgia, serif;
line-height: 1.4;
}

p#HScroll {
position: absolute;
left: 1200px;
top: 10px;
}

div#TransModalDialog {
border: thick solid yellow;
padding: 10px 10px;
background-color: white;
}
</style>

<script type="text/javascript">
function test() {
var d = document.createElement('DIV');
d.style.position = 'absolute';
d.style.left = '0px';
d.style.top = '0px';
d.style.zIndex = '1000';
d.style.backgroundColor = '#C0C0C0';
d.style.width = document.documentElement.scrollWidth + 'px';
d.style.height = document.documentElement.scrollHeight + 'px';
document.body.appendChild(d);
}
</script>
</head>
<body>
<form name="config" action="" onsubmit="return false;">
<fieldset>
<legend>Demo</legend>
<select name="color">
<optgroup label="Color:">
<option value="#000000" selected>Black</option>
<option value="#FF0000">Red</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
</optgroup>
</select>
<select name="opacity">
<optgroup label="Opacity:">
<option value="0">0%</option>
<option value="0.1">10%</option>
<option value="0.2">20%</option>
<option value="0.3">30%</option>
<option value="0.4" selected>40%</option>
<option value="0.5">50%</option>
<option value="0.6">60%</option>
<option value="0.7">70%</option>
<option value="0.8">80%</option>
<option value="0.9">90%</option>
<option value="1">100%</option>
</optgroup>
</select>
<a href="#"
style="color:blue; font-weight:bold;"
onclick="test(); return false;">Test</a>
</fieldset>
</form>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque eu est. Morbi laoreet, diam at interdum pharetra,
tellus pede posuere massa, fermentum scelerisque enim elit
in felis. Donec auctor, libero non rhoncus mattis, dui sapien
faucibus quam, ut pulvinar elit est ac tortor. Quisque molestie.
Donec eu lorem. Integer semper suscipit ipsum. Phasellus et
justo sed dolor blandit lobortis. Morbi a urna eu dolor bibendum
fermentum. Phasellus adipiscing blandit nisi. Aenean urna est,
adipiscing eu, pellentesque eget, egestas sit amet, nibh.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur id mauris non elit consectetuer
semper. Nam nec nunc. Nulla facilisi. Suspendisse nec nibh.
Cras vitae felis.</p>
<p style="text-align: right;"><a href="#"
style="color:blue; font-weight:bold;"
onclick="test(); return false;">Test</a></p>
<p>Integer mi libero, adipiscing at, congue vulputate, dictum et,
lectus. Sed ipsum. Proin scelerisque lacinia lorem. Etiam non mi
ac quam pharetra egestas. Quisque est. Proin venenatis consequat
augue.
Curabitur suscipit, leo quis pretium egestas, lorem tellus imperdiet
mauris, at adipiscing sapien orci at magna. Sed vitae nunc gravida
orci
dictum dapibus. Mauris porttitor viverra orci. Donec volutpat
fringilla
nibh. In nibh arcu, interdum et, tristique quis, semper nec, ante.</
p>
<p>Etiam congue gravida urna. Curabitur quam. Etiam congue commodo
tellus.
Phasellus eget dui quis urna iaculis accumsan. Integer suscipit
sapien.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
gravida, ipsum id molestie molestie, massa urna tempus purus, sit
amet
bibendum metus lacus non quam. Sed nunc. Nam libero arcu, hendrerit
vel,
posuere sed, consectetuer sit amet, diam. Curabitur egestas. Nulla
suscipit
justo nec libero. Quisque suscipit vehicula dolor. Fusce in massa.</
p>
<p><a href="#"
style="color:blue; font-weight:bold;"
onclick="test(); return false;">Test said:
Getting horisontal scroll</p>
</body>
</html>
 
G

GTalbot

On May 7, 9:45 pm, Martin Honnen <[email protected]> wrote:
Correction: scrollWidth / scrollHeight is
supported by all current browsers of my interest, not by IE only.

document.documentElement.scrollWidth
document.documentElement.scrollHeight
seem to do what we need in Strict mode for FF 2.0.0.14, IE 6.0, Opera
9.27 (tested under Windows XP SP2)
Of course Safari 3.0 is broken : more basic feature one needs - more
probability that Safari has a bug on it : this long standing tradition
never got broken yet from my experience :-(

Yes, you're right.
document.documentElement.scrollWidth
document.documentElement.scrollHeight
is not correctly supported in Safari 3.1.1

VK, why do you keep posting again and again the whole code of your
webpage? Why not just post an URL?

Regards, Gérard
 
G

GTalbot

Martin,

as far as I know, document.width and document.height are not useful,
helpful. One would instead/rather use
window.innerWidth and window.innerHeight for browsers that support
these properties (Safari 2+, Firefox 1+, Seamonkey 1+, Opera 7+).

Regards, Gérard

Sorry, I totally misread this. window.innerWidth and
window.innerHeight would give content area, client area, not whole
document width and whole document height. Sorry again about that.

Regards, Gérard
 
Ad

Advertisements

V

VK

Yes, you're right.
document.documentElement.scrollWidth
document.documentElement.scrollHeight
is not correctly supported in Safari 3.1.1

VK, why do you keep posting again and again the whole code of your
webpage? Why not just post an URL?

Regards, Gérard

First of all sorry for that.
Besides my customers' websites in development which I'd like do not
use for personal purposes out of obvious considerations - besides that
I have my Yahoo! personal page but because of auto-insertions Yahoo!
does it is not possible to get Strict mode for the page.

Sourceforge just approved TransModal project for hosting, so I'm going
to use it for further test postings. Their SSH / SFTP setup procedure
is the most convoluted in the Web world-wide, I know it since JSONet
project, so I cannot do it right at this second as at this second I
have not a second, really.

Just copy, paste into text file, save as anything.html, open in your
browser. I agree it is not as easy as to click a link, but right at
this moment one could donate extra 15-30sec of their time to save me
an hour (?)
 
V

VK

document.documentElement.scrollWidth
document.documentElement.scrollHeight
is not correctly supported in Safari 3.1.1

document.documentElement.scrollHeight in Strict works fine. The broken
feature is document.documentElement.scrollWidth that seems to work as
a plain alias to document.documentElement.contentWidth (see the posted
sample)

Overall it is a 10 years old mystery to me why all size-related
methods are targeted to work with the viewport which is rarely of
anyone interest - and nearly useless for the actual HTML container
sizing itself which is what in ~ 90% of cases one needs to know. A
wild guess would be the programmer's laziness: it is a trivia to get
current values from the application window and it is much more hard to
write an algorithm for container size calculations.

Any way I guess we'll stick for now with
document.documentElement.scrollWidth
document.documentElement.scrollHeight
and see if they are still usable for the standard border-box box
model.

And Safari just has to keep trying to become a modern browser. One day
they may finally succeed though the chances are getting lower every
year onward.
 
G

GTalbot

Any way I guess we'll stick for now with
document.documentElement.scrollWidth
document.documentElement.scrollHeight
and see if they are still usable for the standard border-box box
model.

And Safari just has to keep trying to become a modern browser. One day
they may finally succeed though the chances are getting lower every
year onward.

VK,
you can file a bug for support of
document.documentElement.scrollWidth
document.documentElement.scrollHeight
at
https://bugs.webkit.org/index.cgi?GoAheadAndLogIn=1

Regards, Gérard
 
V

VK

VK,
you can file a bug for support of
document.documentElement.scrollWidth
document.documentElement.scrollHeight
at https://bugs.webkit.org/index.cgi?GoAheadAndLogIn=1

Maybe some later - or you are welcome to do it on my behalf - I am not
so concerned about bug copyrights :)

With all these offset/content/scroll Width/Height/Top/Left one may get
quickly exhausted by filing bugs to different UA producers. It just
happened that scrollWhatever is broken for Safari but "only" buggy on
others. IMO the best would be to trash out all these properties all
together as no one reliably does what claimed and never did ever since
IE4/NN4. Instead I would file a bug to W3C, CC to Microsoft and
Mozilla asking to stop this nonsense and to define

.trueWidth
true width of the container if it would be shown
without scrollbars

.trueHeight
true height of the container if it would be shown
without scrollbars

.viewportWidth
the width of the container currently shown

.viewportHeight
the height of the container currently shown

.absoluteX
X distance from the trueWidth left border in px

.absoluteY
Y distance from the trueHeight right border in px

.vewportX
X distance from the viewport left border in px

.vewportY
Y distance from the viewport right border in px

Yes, I know - silly dreams. But can we dream at least sometimes...
 
Ad

Advertisements

G

GTalbot

[snipped]
With all these offset/content/scroll Width/Height/Top/Left one may get
quickly exhausted by filing bugs to different UA producers. It just
happened that scrollWhatever is broken for Safari but "only" buggy on
others.

I have checked several of my webpages and it's not clear.

DHTML object model properties
http://www.gtalbot.org/BugzillaSection/DocumentAllDHTMLproperties.html

Safari 3.1.1 for windows supports everything, except maybe clientLeft
when the direction is rtl (and even there, D. Hyatt told me that in
Mac, the scrollbar is always on the left; in Windows, it's different).
Do this: scroll all the way down and calculate clientHeight plus
scrollTop and it will give you the scrollHeight value. So, the
implementation is correct. I double-checked when increasing font-size.

scrollHeight for document.documentElement is correctly reported at
http://www.gtalbot.org/DHTMLSection/ListAllAttributesAndMethodsOfObjects.html
You have to click twice the DOCUMENT.DOCUMENTELEMENT button because
the generated content affects the scrollHeight property as it
populates document content box with the text of properties and
methods.
scrollHeight is at position 82 in the generated list.

document.documentElement.scrollHeight does not seem to be correctly
reported at
http://www.gtalbot.org/DHTMLSection/WindowEventsNS6.html
I think - just a guess - it misses absolutely positioned blocks (which
must be taken out of normal flow) and only considers static blocks...
This may be a bug... depends on how you define scrollHeight for the
root element.
IMO the best would be to trash out all these properties all
together as no one reliably does what claimed and never did ever since
IE4/NN4. Instead I would file a bug to W3C, CC to Microsoft and
Mozilla asking to stop this nonsense and to define

.trueWidth
true width of the container if it would be shown
without scrollbars

.trueHeight
true height of the container if it would be shown
without scrollbars

.viewportWidth
the width of the container currently shown

.viewportHeight
the height of the container currently shown

.absoluteX
X distance from the trueWidth left border in px

.absoluteY
Y distance from the trueHeight right border in px

.vewportX
X distance from the viewport left border in px

.vewportY
Y distance from the viewport right border in px

Yes, I know - silly dreams. But can we dream at least sometimes...

Why start all over when things have already been defined:
W3C CSSOM View Module (Draft)
http://www.w3.org/TR/cssom-view/#toc

Regards, Gérard
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top