document.body.scrollTop in IE

rickbkis · #1 Mar 23rd 2005, 4:05 pm

I've been using html without the DOCTYPE spec. That worked fine, but I couldn't position a table correctly in css in IE.

From another discussion on the forum, it was recommended to use the following DOCTYPE specification, and tables would position correctly:

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

So, I did that. It worked great for positioning the table.

However, with this DOCTYPE, 'document.body.scrollTop' in IE reports zero, no matter where the body is scrolled.

Yeesh.

I can get around it because I need to position the table in one page (and can specify the DOCTYPE), and I rely on the scrollTop value on another page (and can leave the DOCTYPE off that page).

Not an optimal or elegant solution & besides, I'm going to need the scrollTop value in both pages, later on.

Sooo - Questions:

Is there a better construct/value to use to get the equivalent of 'document.body.scrollTop'
Is there another DOCTYPE that does both correctly?

Any thoughts appreciated.

rickb

nullbit · #2 Mar 23rd 2005, 4:21 pm

Post the JS, I'll try help.

rickbkis · #3 Mar 24th 2005, 2:19 pm

Here it is:

<script language="javascript">
function LoadIFrame(jpgfile)
{
var iframe = document.getElementById("bigframe");
iframe.src = "/scribi/lib/IFrameContents.php?fn=" + jpgfile;
iframe.style.left=10;
iframe.style.top = document.body.scrollTop + 10;
iframe.style.display = "block";
}

If I use the transitional 4.01 doctype, document.body.scrollTop always returns zero (in Win IE 6), no matter the scrolling of the page (works fine in FF, Opera.)

Actually, I got both situtations to work reasonably well by reverting to the 3.2 doctype. So, I'm moiving on.

rickb

prosiak · #4 Apr 11th 2005, 2:28 am

I have the same problem

Can't using scrollTop when loose.dtd existed.

Mr. Prosiak

J.D. · #5 Apr 11th 2005, 7:06 am

It seems that scrollTop only works if the overflow property is set:

<div style="height: 100px; width: 100px; overflow: scroll;" onclick="alert(this.scrollTop)">
0123456789 0123456789 0123456789 0123456789 0123456789 0123456789
</div>

J.D.

RandyTayler · #6 Jun 13th 2005, 9:24 am

THANK YOU ALL!

I never would have learned why document.body.scrollTop wasn't working right -- I changed it to a 3.2 doctype and all is well.

The wonders of search engines.

geckex · #7 Oct 1st 2005, 2:38 am

IE6 and DTD 4.01 requires you to use document.documentElement in stead of document.body, so u will need somthing like the below:

if (document.documentElement && !document.documentElement.scrollTop)
// IE6 +4.01 but no scrolling going on
else if (document.documentElement && document.documentElement.scrollTop)
// IE6 +4.01 and user has scrolled
else if (document.body && document.body.scrollTop)
// IE5 or DTD 3.2

AzAkers · #8 Oct 1st 2005, 2:49 am

isn't it just mind blowing what varied treasures await you at Digital Point!!??

sebastianrs · #9 Mar 29th 2006, 3:53 pm

Quote:

isn't it just mind blowing what varied treasures await you at Digital Point!!??

Umm... YES! This one just saved me a few hours for sure

dethlon · #10 Jun 18th 2006, 7:53 pm

hi..guys..
i have a problem here...

the problem is like this....
i have managed to create a chat application using PHP with the auto refresh...
for the chatting screen, i have used layer to contain all the user chatting messages..as u know..when user keep on typing and sending messages..the layer will eventually and automatically create a vertical scroll...
To retrieve the data from the database...i need to keep the chatting screen(layer page) to be frefreshed in every several seconds...
the problem is..when it is refreshing....the scroll bar in the layer will also be refreshed and the screen will scroll up back to the top of the messages...

so, i wanna ask who knows how to make the scrollbar not to back to top...but stay at the bottom (when page is refreshing)..so that the user can see the latest message they typed...

any javascript methods or other functions can help this?

thanks...
----------------------------------------------------------------------

i have heard some reccomendation to use the document.objectelement.scrollTop method n i try to use it...but i wont works...
this is the sample scenario...

(let's say i want to make the distance become 10000 from the top (scenario 2)

scenario 1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script language="JavaScript" type="text/JavaScript">

</script>

<title>Untitled Document</title>
<META HTTP-EQUIV="refresh" content="2;URL=http://localhost/project/ww.php">
</head>
<body onload = "scrollUp()">

<div id="Layer1" style="position:absolute; left:-1px; top:1px; width:600px; height:100px; z-index:1; overflow: scroll; visibility: visible; background-color: #CCFFFF; layer-background-color: #CCFFFF; border: 1px">
1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
</div>

</body>
</html>

scenario 2 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script language="JavaScript" type="text/JavaScript">

</script>

<title>Untitled Document</title>
<META HTTP-EQUIV="refresh" content="2;URL=http://localhost/project/ww.php">
</head>
<body onload = "scrollUp()">
<div id="Layer1" style="position:absolute; left:-1px; top:1px; width:600px; height:100px; z-index:1; overflow: scroll; visibility: visible; background-color: #CCFFFF; layer-background-color: #CCFFFF; border: 1px">

1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>

</div>
</body>
</html>

anyone can tell me how to properly use taht method? pls ....
thanks....

niklasringdahl · #11 Jun 29th 2007, 4:25 am

Quote:

Originally Posted by geckex

IE6 and DTD 4.01 requires you to use document.documentElement in stead of document.body, so u will need somthing like the below:

if (document.documentElement && !document.documentElement.scrollTop)
// IE6 +4.01 but no scrolling going on
else if (document.documentElement && document.documentElement.scrollTop)
// IE6 +4.01 and user has scrolled
else if (document.body && document.body.scrollTop)
// IE5 or DTD 3.2

Just wanted to thank you, you saved my day!

I struggled with non working js code to get the mouse position, but now it works like a charm!

- Niklas

Blinky82 · #12 Aug 22nd 2007, 6:53 am

Thanks a lot for this shared info. Find it really interesting.

akrap · #13 Mar 23rd 2008, 8:16 am

i know thats very old a topic, but it's usefull. so thaks for this info.

kmofo · #14 Apr 4th 2008, 4:47 pm

now i know why doctype is so important. thanks!

baybossplaya · #15 Apr 19th 2008, 8:49 pm

Quote:

Originally Posted by akrap

i know thats very old a topic, but it's usefull. so thaks for this info.

you mean thanks for the pr?

amoona · #16 May 26th 2008, 5:44 am

This is a useful post. I've learned something good

gullam18 · #17 Jun 4th 2008, 3:48 am

Can anybody tell... why is this not working in IE but Firefox?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Pure CSS Scrollable Table with Fixed Header</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="language" content="en-us" />

<style type="text/css">

</style>
<script language="javascript">

var speed = 5;
function scroll(theDiv) {
var div1 = document.getElementById(theDiv);
//alert(div1.scrollHeight);
div1.scrollTop = div1.scrollTop + speed;
//div.scrollTop = div.scrollHeight;
t1=setTimeout("scroll('"+theDiv+"')",1000);
}

function getval(theDiv) {
var div1 = document.getElementById(theDiv);
alert(div1.scrollTop);
}
</script>
</head>
<body onload="scroll('news')">

<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable" class="scrollTable">
<thead class="fixedHeader">
<tr>
<th><a href="#">Header 1</a></th>
<th><a href="#">Header 2</a></th>

<th><a href="#">Header 3</a></th>
</tr>
</thead>
<tbody class="scrollContent" id="news">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>

</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>

<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>

<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>

<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>

</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>

<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>

<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>

<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>

</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>

<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>

<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>

<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>

<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>

</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>

<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>

<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>

<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>

<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>

</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>

<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>

<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>

<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>

<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>

</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>

<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>

<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>

<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>

<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>

</tr>
<tr>
<td>End of Cell Content 1</td>
<td>End of Cell Content 2</td>
<td>End of Cell Content 3</td>
</tr>
</tbody>
</table>

</div>

<input type="button" value="Get ScrollTop" onclick="getval('news');">
<script language="javascript">document.getElementById("news").scrollTop = 1;</script>
</body></html>

crath · #18 Jun 4th 2008, 7:53 pm

please use [ code ] tags guys! its easier for us to help

andyoudontstop · #19 Jun 16th 2008, 11:37 pm

@gullam18 :

Internet Explorer does not understand the child selector command

html>body thead.fixedHeader tr {
display: block
}

You can read up more on hacks and tricks needed to get certain functionality to work in Internet Explorer here: http://www.webcredible.co.uk/user-fr...etection.shtml

yantomulia · #20 Jun 28th 2008, 3:31 pm

thanks for sharing this information