Question

I need some usage examples for how to accomplish this. I have some HTML:

<div id="chatDisplay">
</div>
<input type="text" id="message" /><input type="button" id="send" value="Send" />

Then I have some JQuery:

// This function sets up the ajax that posts chat messages to the server.
$(function()
{
     $('#send').click(function ()
     {
          $.ajax(
          {
               url: "chat/postmsg",,
               data: { msg: $('#message').val(); },
               type: "POST",
               success: function (response)
               {
                    // Server sends back formated html to append to chatDisplay.
                    $('#chatDisplay').append(response);
                    //scroll to bottom of chatDisplay
               }
          });
     });
});

// This function periodically checks the server for updates to the chat.
$(function ()
{
     setInterval(function()
     {
          $.ajax(
          {
               url: "chat/getupdates",
               type: "POST",
               success: function (response)
               {
                         // Server sends back any new updates since last check.
                         // Perform scroll and data display functions. Pseudo-code to follow:

                         // If (chatDisplay is scrolled to bottom)
                         // {
                         //     append response to chatDisplay
                         //     scroll to bottom of chatDisplay
                         // }
                         // else if (chatDisplay is scrolled up from bottom by any amount)
                         // {
                         //     append response to chatDisplay, but do not scroll to bottom.
                         // }
               }
          });
     }, 7000);
});

This is just an example of basic chat features, excluding server-side code of course. What I need is a usage sample of how to accomplish what the pseudo-code describes. How do I detect if the user is scrolled to the bottom of the DIV, and how do I scroll them to the bottom? I don’t want them to be jumped to the bottom of the DIV if they are scrolling up to look at chat history.

I have heard of JQuery’s ScrollTo plugin, but just need some examples.

Thanks in advance!

EDIT: Here is the solution for those interested.

success: function (response)
{
     var elem = $('#chatDisplay');
     var atBottom = (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight());
     $('#chatDisplay').append(response);
     if (atBottom)
          $('#chatDisplay').scrollTop($('#chatDisplay')[0].scrollHeight);
}

Go to http://www.jsfiddle.net/f4YFL/4/ for an example of this in action.

Answer 1

Seems like you can refactor your pseudo-code to this:

append response to chatDisplay
if(chatDisplay at the bottom){ scroll to the bottom }

Here is a link of how to determine if you are scrolled to the bottom:

http://yelotofu.com/2008/10/jquery-how-to-tell-if-youre-scroll-to-bottom/

Hope that helps.

Bob