View Full Version : Shoutbox: Move to bottom of div

01-13-2007, 02:42 PM
Hey all,

I developed a shoutbox for my website. After 20 messages the old ones disappear from view, and those 20 messages I have put in a div with overflow on auto. My database records are shown descending, so that the newer ones are at the top. So you can scroll down in the div to see the latest messages. This method is rather confusing for the user, though, since the newer messages are on top and a normal human being reads from top to bottom.

I would like to make it so that there is still a scroll bar, but the position is moved to the bottom of the div. So that the user can scroll up to see the previous messages. On page load, however, he should be able to see the newest message, ie. the bottom of the div. In other words, I need the div to be "turned upside down" and scroll up instead of down to see further messages. Kind of how a chatbox works.

I believe this can be done with Javascript, but I wouldn't remember how. Can anyone help me?

EDIT: Looked around a bit more, and I totally forgot about the scrollTo() method... but that's a window method, no? Can I use that in a div with overflow? And if yes, how do I determine what the last position is, work with the current height of the div?

01-13-2007, 03:12 PM
Nevermind, found it! For reference:
var objDiv = document.getElementById("nameofthediv");
objDiv.scrollTop = objDiv.scrollHeight;Firing up that function on page load makes the div scroll down automatically. :thumbsup: