Loans - Cheap Flights - Home Loan - Debt Help - Daily Horoscopes
PDA

View Full Version : document.body.scrollTop in IE

rickbkis
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:

<!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
Mar 23rd 2005, 4:21 pm
Post the JS, I'll try help.
rickbkis
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
Apr 11th 2005, 2:28 am
I have the same problem :( Can't using scrollTop when loose.dtd existed.

Mr. Prosiak
J.D.
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
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
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
Oct 1st 2005, 2:49 am
isn't it just mind blowing what varied treasures await you at Digital Point!!??
sebastianrs
Mar 29th 2006, 3:53 pm
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
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">
<!--

function scrollUp()
{
document.Layer1.scrollTop = Layer1.scrollHeight;
}


//-->
</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">
<!--

function scrollUp()
{
document.Layer1.scrollTop = 10000;
}


//-->
</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
Jun 29th 2007, 4:25 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

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
Aug 22nd 2007, 6:53 am
Thanks a lot for this shared info. Find it really interesting. :)
akrap
Mar 23rd 2008, 8:16 am
i know thats very old a topic, but it's usefull. so thaks for this info.
kmofo
Apr 4th 2008, 4:47 pm
now i know why doctype is so important. thanks!
baybossplaya
Apr 19th 2008, 8:49 pm
i know thats very old a topic, but it's usefull. so thaks for this info.

you mean thanks for the pr?