Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts

    Shoutbox: Move to bottom of div

    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?
    Last edited by snowieken; 01-13-2007 at 01:53 PM.
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • #2
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Nevermind, found it! For reference:
    Code:
    var objDiv = document.getElementById("nameofthediv");
    objDiv.scrollTop = objDiv.scrollHeight;
    Firing up that function on page load makes the div scroll down automatically.
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •