Prev: Pop-up menu in Dreamweaver
Next: javascript stopped working?
From: VK on 7 May 2008 13:30
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</a></p>
<p id="HScroll" style="white-space: nowrap; text-align: center;"
>Getting horisontal scroll</p>
</body>
</html>


From: Martin Honnen on 7 May 2008 13:45
VK wrote:
> 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


--

Martin Honnen
http://JavaScript.FAQTs.com/
From: GTalbot on 7 May 2008 14:06
On 7 mai, 13:45, Martin Honnen <mahotr...(a)yahoo.de> wrote:
> VK wrote:
> > Do current DOM implementations having any methods to get the document
> > true width and height?
>
> 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


From: VK on 7 May 2008 14:34
On May 7, 9:45 pm, Martin Honnen <mahotr...(a)yahoo.de> wrote:
> VK wrote:
> > Do current DOM implementations having any methods to get the document
> > true width and height?
>
> 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</a></p>
<p id="HScroll" style="white-space: nowrap; text-align: center;"
>Getting horisontal scroll</p>
</body>
</html>

From: GTalbot on 7 May 2008 14:49
On 7 mai, 14:34, VK <schools_r...(a)yahoo.com> wrote:
> On May 7, 9:45 pm, Martin Honnen <mahotr...(a)yahoo.de> 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
 |  Next  |  Last
Pages: 1 2
Prev: Pop-up menu in Dreamweaver
Next: javascript stopped working?