Auto scroll to the bottom

[lynxus]

Hi guys,

 

I have a message system on my site

 

So when people talk it shows like:

Username: blaaa

Another name: blaa

Someone else: blaaaa

 

Anyway.

The way it works is the latest message is posted at the bottom of a div with scrolling enabled so it doesnt auto stretch.

However when talking this is annoying because these vanish as the scrollbar stays at the top.

 

currently i have javascript that moves to the bottom every second or so. However this is annoying as hell as you cant scroll up etc because it will shoot back down the bottom.

 

How do i get it so by default the scrollbar will stay at the bottom so new messages are visible, however if someone scrolls up it wont shoot back to the bottom?

and if they scroll to the bottom again to see the latest messages it stays scrolling at the bottom again so new messages are visible.

 

I hope you understand what im trying to achieve?

 

Ideally like a normal MSN message box always seems to insert at the bottom and have the scollbar at the bottom

 

Thanks

G

[rhodesa]

I would think something like this:

<style type="text/css">
  #chat {
    width: 300px;
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #333;
    padding: 3px;
  }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    setInterval('addMessage()',3000);
  });
  function addMessage ( ) {
    var msg = '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum dolor non dui facilisis pulvinar.</p>'; 
    var chat = $('#chat');
    var scrollToBottom = (chat.attr('scrollHeight') == chat.innerHeight() + chat.scrollTop());
    chat.append(msg);
    if(scrollToBottom){
      chat.scrollTop(chat.attr('scrollHeight') - chat.innerHeight());
    }
  }
</script>
<div id="chat">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum dolor non dui facilisis pulvinar.</p>
</div>