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.Co mments.scrollHe ight = 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="backgrou nd-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]

Re: scrolling a div



Simon Wigzell wrote:

[color=blue]
> 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?[/color]

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.scrollT op != 'undefined' &&
typeof element.scrollH eight != 'undefined')
{
element.scrollT op = element.scrollH eight;
}


--

Martin Honnen

http://JavaScript.FAQTs.com/

[Simon Wigzell]

Re: scrolling a div

<snip>

Thanks, that is exactly what I needed.

[Gérard Talbot]

Re: scrolling a div

Simon Wigzell wrote :[color=blue]
> 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.Co mments.scrollHe ight = 10000;
>[/color]

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.getEle mentById("Comme nts") when accessing that div.

http://www.mozilla.org/docs/web-developer/upgrade_2.html#dom_access

[color=blue]
> 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="backgrou nd-color: #FFFFDD; border: inset 2px
> #999999; overflow:auto; width=200; height=100;">[/color]

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

[color=blue]
> 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>
>[/color]

document.getEle mentById("Comme nts").scrollTo p =
document.getEle mentById("Comme nts").scrollHei ght -
document.getEle mentById("Comme nts").clientHei ght;

Gérard
--
remove blah to email me