PDA

Click to See Complete Forum and Search --> : Automatically scrolling to bottom of a DIV

Zena1m
10-24-2003, 07:16 AM
I am writing a chat room using Javascript, Coldfusion and HTML and a SQL database. The problem is that my DIV tag, that displays what has been written, has to be a set height and when the conversation gets longer, when the page is loaded each time another bit of text is added, you can not see the last line of text as the top of the DIV is shown. Does anyone know how to force the bottom of the DIV to be shown? I have seen this done with a TEXTAREA but I can't use this as then I can't format the conversation text as I want to.

Thanks!
fredmv
10-24-2003, 07:27 AM
Welcome to the forums.

This can be done quite easily actually. At the very bottom of the content inside of your <div> element, make an anchor with a name attribute defined. Something like this:<a name="bottom"></a>Then, somewhere else in your code (ideally in your <head>, but can go anywhere), use JavaScript to relocate to that section of the document. This will make it so the <div> will scroll to the bottom. Here's the code you want to be using:<script type="text/javascript">
onload = function()
{
location.href = "#bottom";
}
</script>
Again, put that into the <head> portion or the <body> portion of your code, it doesn't matter where it goes but the <head> section is preferred. One more thing: make sure you don't have any functions that are executed on the onload event, if you do, it will not work correctly. However this can be easily fixed by making all of the functions execute inside of one onload event. Well, that's all there really is to it.

I hope that helps you out.
gil davis
10-24-2003, 07:30 AM
Use
scrollTo(x, y);
See http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/scrollto.asp

Or
object.scrollIntoView(false);
See http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/scrollintoview.asp
Zena1m
10-27-2003, 08:50 AM
Thanks for your help guys - got it going to the bottom of the div tag now - the only thing is that I refresh the page every couple of seconds to check if any more conversation has been added to the database for that thread and the div jumps to the top and then to the bottom straight away every time the page refreshes! Any idea how to stop it jumping from the top to the bottom?