...

View Full Version : another document.body.scrollHeight issue



heki
12-11-2010, 07:13 PM
Hi,

thanks for reading, I have to admit, I'm a noob, but what my code does drives me nuts, eternal thanks to whoever tries to help me out!

In short my problem is that document.body.scrollHeight does not give me the correct pagesize combined with the viewport.
I just want the parts of the page to be as long as the (in the original dynamicly entered) text in the middle.

Imho
pageheight = (document.body.scrollHeight+viewportheight);
should give me the correct height of the page, but does not, why?
It works and it is close, but not completely, I tried stuff like document.body.offsetHeight etc., but my guess is I miss facturing in a parameter, but I have not the slightest clue which...

Here the page:
http://buchenbergschule.de/ruh/depressingcode/test7.html

Here the JS Code:


<script type="text/javascript">
<!--
var viewportwidth;
var viewportheight;
var pageheight;

if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}


else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}


else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}

pageheight = (document.body.scrollHeight+viewportheight);

document.write('<style type=text/css> div#linksaussen');
document.write('{width:468px; height:'+(pageheight-896)+'px; position:absolute; top:896px; left:'+(((viewportwidth-948)*0.5084)-468)+'px; background-image:url(./images/back_links.png);}');
document.write('div#linksaussen1 {width:468px; height:897px; position:absolute; top:0px; left:'+(((viewportwidth-948)*0.5084)-468)+'px; background-image:url(./images/testlinks.png);}');
document.write('div#mitte {width:948px; height:'+pageheight+'px; position:absolute; top:0px; left:'+((viewportwidth-948)*0.5084)+'px; background-color:#FF0000;}');
document.write ('div#rechtsaussen1');
document.write ('{width:'+((viewportwidth-948)*0.4916)+'px; height:897px; position:absolute; top:0px; left:'+(948+((viewportwidth-948)/2))+'px; background-image:url(./images/testrechts.png); background-repeat:no-repeat;}');
document.write ('div#rechtsaussen');
document.write ('{width:'+((viewportwidth-948)*0.4916)+'px; height:'+(pageheight-896)+'px; position:absolute; top:896px; left:'+(948+((viewportwidth-948)/2))+'px; background-image:url(./images/back_rechts.png);}</style>');
alert (viewportwidth+'vpw'+viewportheight+'vph'+pageheight+'pgh')

//-->
</script>

Again please forgive my noobishness, my bad english and thanks again for any hint!

heki
12-17-2010, 01:04 AM
Please guys any hint is appreciated, do I do something wrong, did I ask wrong, is it impossible, is there a book link newspaper article ANYthing that could help me? How would you tackle the problem?

Old Pedant
12-17-2010, 11:52 PM
I'm sorry, but that doesn't make sense, to me.

document.body.scrollHeight *IS* the pageHeight. That is, it's the number of pixels from the top of the <body> to the bottom of the </body>.

Why would you then ADD ON the height of the window???



+-------------<body>-----------------+
==
==
== visible part of body, in the window
==
==
+--------------------------------------+

more body, only visible by scrolling down




+-------------</body>-----------------+

So the measurement from <body> to </body> is the body.scrollHeight.

The measurement of the part that is visible, where the == are, is the window.innerHeight, what you are calling viewportHeight.


Maybe if you told us what you are trying to *DO*, instead of showing code that doesn't seem to work, that would help??

Old Pedant
12-18-2010, 12:23 AM
Here...try this demonstration:


<html>
<head>
<script type="text/javascript">
function addOne( )
{
var div = document.createElement("div");
div.innerHTML = "This div added when document.body.scrollHeight was "
+ document.body.scrollHeight + "pixels";
document.body.appendChild( div );
}
</script>
<style type="text/css">
div {
border: solid blue 3px;
background-color: lightblue;
padding: 20px;
margin: 5px;
}
</style>
</head>
<body onload="setInterval(addOne,3000)">
<div>
This is the original content on the page.
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum