scrolling a div

[Simon Wigzell]

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>

[Martin Honnen]

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/

[Simon Wigzell]

<snip>

Thanks, that is exactly what I needed.

[Gérard Talbot]

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