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;"
</html>
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;"
</body>onclick="test(); return false;">Test said:
</html>
