470,849 Members | 1,371 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,849 developers. It's quick & easy.

scrolling a div

I have a simple page where the user adds a comment to a form that gets saved
in a database, the page refreshes and reads the contents of the database and
displays them inside a scrolling div.

The following piece of code simulates some text inside a div where the text
is longer than the div is high. I would like to force the display to the end
of the - as if the user had scrolled to the end - when the page refreshes.

What is the property of the div that controls the position of the text
inside it and how do I set this to the end with javascript? IF this was a
text area then I could just say:

document.all.Comments.scrollHeight = 10000;

I think. I am using a div instead of a text area because the text I am
displaying will contain html.

Thanks!

<div id="Comments" style="background-color: #FFFFDD; border: inset 2px
#999999; overflow:auto; width=200; height=100;">
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
</div>


Aug 28 '05 #1
3 2666


Simon Wigzell wrote:

What is the property of the div that controls the position of the text
inside it and how do I set this to the end with javascript?


IE introduced the properties
scrollTop
scrollLeft
scrollHeight
scrollWidth
for element objects, see
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/scrolltop.asp>
so in browser that support that you can do
if (typeof element.scrollTop != 'undefined' &&
typeof element.scrollHeight != 'undefined')
{
element.scrollTop = element.scrollHeight;
}
--

Martin Honnen
http://JavaScript.FAQTs.com/
Aug 28 '05 #2
<snip>

Thanks, that is exactly what I needed.
Aug 28 '05 #3
Simon Wigzell wrote :
I have a simple page where the user adds a comment to a form that gets saved
in a database, the page refreshes and reads the contents of the database and
displays them inside a scrolling div.

The following piece of code simulates some text inside a div where the text
is longer than the div is high. I would like to force the display to the end
of the - as if the user had scrolled to the end - when the page refreshes.

What is the property of the div that controls the position of the text
inside it and how do I set this to the end with javascript? IF this was a
text area then I could just say:

document.all.Comments.scrollHeight = 10000;

1- scrollHeight is a read-only property. You can't just set it to an
arbitrary value.

2- as written your code will fail in many browsers

Try instead

document.getElementById("Comments") when accessing that div.

http://www.mozilla.org/docs/web-deve...tml#dom_access
I think. I am using a div instead of a text area because the text I am
displaying will contain html.

Thanks!

<div id="Comments" style="background-color: #FFFFDD; border: inset 2px
#999999; overflow:auto; width=200; height=100;">
<div id="Comments" style="background-color: #FFFFDD; border: inset 2px
#999999; overflow:auto; width: 200px; height: 100px;">

Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
Some Text<br>
</div>


document.getElementById("Comments").scrollTop =
document.getElementById("Comments").scrollHeight -
document.getElementById("Comments").clientHeight;

Gérard
--
remove blah to email me
Aug 28 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Midas NDT Sales | last post: by
1 post views Thread by Kirk | last post: by
1 post views Thread by Tim Frawley | last post: by
4 posts views Thread by Keith Bentrup | last post: by
1 post views Thread by atif | last post: by
5 posts views Thread by PythonistL | last post: by
3 posts views Thread by Chamnap | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.