Forum Moderators: open
<HTML><HEAD>
<SCRIPT LANGUAGE=javascript>
function showHeight() {
document.write('<P>document.body.scrollHeight=' +document.body.scrollHeight);
document.write('<BR>document.body.clientHeight=' +document.body.clientHeight);
document.write('<BR>document.body.offsetHeight=' +document.body.offsetHeight);
document.write('<BR>document.documentElement.scrollHeight=' +document.documentElement.scrollHeight);
document.write('<BR>document.documentElement.clientHeight=' +document.documentElement.clientHeight);
document.write('<BR>document.documentElement.offsetHeight=' +document.documentElement.offsetHeight);}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT language=javascript>showHeight()</script>
<TABLE HEIGHT=950><TR></TD></TR></TABLE>
</BODY></HTML>
----------
IE6:
document.body.scrollHeight=15
document.body.clientHeight=413
document.body.offsetHeight=417
document.documentElement.scrollHeight=417
document.documentElement.clientHeight=0
document.documentElement.offsetHeight=417
Safari/Mac:
document.body.scrollHeight=652
document.body.clientHeight=0
document.body.offsetHeight=16
document.documentElement.scrollHeight=54
document.documentElement.clientHeight=70
document.documentElement.offsetHeight=86
IE5/Mac:
document.body.scrollHeight=630
document.body.clientHeight=630
document.body.offsetHeight=630
document.documentElement.scrollHeight=undefined
document.documentElement.clientHeight=undefined
document.documentElement.offsetHeight=100
----------
The funny thing is, not only does each browser return a different set of numbers for the different variables, not even ONE of them is close to 950!
Thanks for your help, -MBJ-
<snip>
[edited by: korkus2000 at 11:55 am (utc) on May 28, 2004]
[edit reason] no sigs please [/edit]
<html>
<head>
<script language="Javascript">
function getDocHeight(){
docHeight = document.getElementById("marker").offsetTop;
alert(docHeight);
}
</script>
</head>
<body onload="getDocHeight()" topmargin=0>
<table height=553>
<tr>
<td> </td>
</tr>
</table>
<div id="marker"/>
</body>
</html>
Would be interested in the results.
-George
What I'm trying to do is to get a set of 5 items to keep repeating on the page as long as there's room. For example, if there's room for eight more items then I want to print #1, #2, #3, #4, #5, then start over with #1, #2, and #3. Should be a piece of cake, right? The problem is that the first five items print just fine, but they won't repeat. What's weirder is that my debugging code shows that my script is executing all the code with the proper values properly.
Here's my code, with the debugging code commented out. I aplogize for the lack of formatting, I've never been able to get [ pre ] and [ code ] to work on WebmasterWorld to preserve spaces.
------------------------------
<HTML><HEAD>
<script language=javascript>
function fillerUp() {
pageLength = document.getElementById("marker").offsetTop;
stockHeight = 755;
itemHeights = new Array(30,125,125,125,225);
itemContent = new Array('a','b','c','d','e');
for (counter=0, item=0, usedHeight=stockHeight, theString="";
usedHeight <=pageLength; counter++, item++) {
if (usedHeight + itemHeights[counter] <=pageLength)
{ document.getElementById('filler'+counter).innerHTML = itemContent[item]; }
//theString += "document.getElementById('filler" +counter+ "').innerHTML = " +itemContent[item] + "<P>\n";
usedHeight += itemHeights[item];
if (item==itemHeights.length-1) { item=-1; }
}
//document.write(theString);
}
</script>
</HEAD>
<BODY onload="fillerUp()">
<TABLE HEIGHT=2000><TR><TD valign=top>
<div id=filler0></div>
<div id=filler1></div>
<div id=filler2></div>
<div id=filler3></div>
<div id=filler4></div>
<div id=filler5></div>
<div id=filler6></div>
<div id=filler7></div>
<div id=filler8></div>
<div id=filler9></div>
<div id=filler10></div>
<div id=filler11></div>
<div id=filler12></div>
<div id=filler13></div>
<div id=filler14></div>
<div id=filler15></div>
<div id=filler16></div>
</TD></TR></TABLE>
<div id=marker></BODY</HTML>
[/pre]
[/code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;}
</style>
</head>
<body id="pgBod" onload="alert(document.getElementById('pgBod').offsetHeight);">
</body>
</html>
<div id="marker"></div>
This may be preventing the return of a value for the page height.
This is a real stumper, that's for sure.
(Sorry, I don't have time to mess with it directly or really pick it apart, I'm just throwing out ideas.)
document.getElementById('filler0').innerHTML = a
document.getElementById('filler1').innerHTML = b
document.getElementById('filler2').innerHTML = c
document.getElementById('filler3').innerHTML = d
document.getElementById('filler4').innerHTML = e
document.getElementById('filler5').innerHTML = a
document.getElementById('filler6').innerHTML = b
document.getElementById('filler7').innerHTML = c
document.getElementById('filler8').innerHTML = d
document.getElementById('filler9').innerHTML = e
----------------
Ergo, if that code executes then it should work, but it doesn't. I've checked the math and the math works fine. Again, neither the math nor the page height is the problem. I worry that this thread will get so cluttered that no one will bother with it and I won't get any help. My code is there for anyone who wants to try it.
Thanks, -MBJ-
I don't have much time to figure out what you are trying to do, but, the problem you are having is that you are trying to loop around the array or items greater than 5 times which results in a NaN (not a number) JavaScript error. The hack i have in place might not assist you any further but it will show where the problem is. I have added another variable named extra, on the first entry to the for statement this value is an empty string and when the counter reaches 5 it resets it back to 0 along with item, it then adds the char 'a' to the extra which is then used to call on the document.getElem...
function fillerUp() {
pageLength = document.getElementById("marker").offsetTop;
extra = '';
stockHeight = 755;
itemHeights = new Array(30,125,125,125,225);
itemContent = new Array('a','b','c','d','e');
for (var counter=0, item=0, usedHeight=stockHeight, theString="";usedHeight <=pageLength; counter++, item++) {
if(counter==5){counter=0;item=0;extra='a';alert(extra);}
alert(usedHeight + itemHeights[counter]);
if (usedHeight + itemHeights[counter] <=pageLength){
alert(usedHeight + itemHeights[counter]);
document.getElementById('filler'+counter+''+extra).innerHTML = itemContent[item];
}
usedHeight += itemHeights[item];
if (item==itemHeights.length-1) {
item=-1;
}
}
}
<div id=filler0></div>
<div id=filler1></div>
<div id=filler2></div>
<div id=filler3></div>
<div id=filler4></div>
<div id=filler5></div>
<div id=filler0a></div>
<div id=filler1a></div>
<div id=filler2a></div>
<div id=filler3a></div>
<div id=filler4a></div>
<div id=filler5a></div>
Give that a run and see what you get and see where it breaks next, as I get time I shall check back and see if I can assist any further...
-George
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#main{height:2000px;}
</style>
<script type="text/javascript">
function fillPg(){
var pg_ht=document.getElementById("main").offsetHeight;
var cont_ht=new Array(200,300);
var cont_str=new Array("alpha","beta");
var ttl_ht=0;
var wrt_str="";
var arr_ln=cont_str.length;
while(ttl_ht<pg_ht){
for(var i=0;i<arr_ln;i++){
wrt_str+="<div>"+cont_str[i]+"</div>";
ttl_ht+=cont_ht[i];
}
}
document.getElementById("main").innerHTML=wrt_str;
}
</script>
</head>
<body onload="fillPg();">
<div id="main">
</main>
</body>
</html>
-George
In this line:
if (usedHeight + itemHeights[counter] <=pageLength)
... I should have said "item" instead of "counter".
The reason I didn't catch it with my debugging code was that I foolishly didn't put the debugging code *inside* the IF condition I was testing.
Thanks for everyone's help, sorry to waste your time when it came down to my using the wrong variable and not debugging it properly.
