On May 7, 9:45 pm, Martin Honnen <mahotr...@[EMAIL PROTECTED]
> wrote:
> VK wrote:
> > Do current DOM implementations having any methods to get the do***ent
> > true width and height?
>
> Mozilla has
> do***ent.height
> do***ent.width
That is of no use. It is just an extremely buggy "beta version" of
do***ent.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 do***ent.do***entElement or do***ent.body
That was a valuable hint. Correction: scrollWidth / scrollHeight is
sup****ted by all current browsers of my interest, not by IE only.
do***ent.do***entElement.scrollWidth
do***ent.do***entElement.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
do***ent.do***entElement.scrollHeight right, but
do***ent.do***entElement.scrollWidth re****ts view****t width instead of
do***ent 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 = do***ent.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 = do***ent.do***entElement.scrollWidth + 'px';
d.style.height = do***ent.do***entElement.scrollHeight + 'px';
do***ent.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 ****ttitor 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 ac***san. 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>
|
