Question

I’m trying to set up a simple chat system with jQuery / Ajax, but I’m having a strange behaviour with the scroll part. When I post something, or when I receive something, the scroll goes up instead of going down as requestes. Here’s the code :

    $('form[name="iview-messages-chat"]').submit(function(e) {
        e.preventDefault();

        var data = {};
        data.msg = $('textarea', this).val();
        data.time = $('#iview-messages-pane .iview-messages-item:last').attr('data-time');
        data.uid = $('input[name="uid"]', this).val();

        $.ajax({
            type: 'POST',
            url: 'index.php?page=messages&action=send',
            data: data,
            dataType: 'json',
        }).done(function(data) {
            $.each(data, function(index,value) {
                var nm = '<div class="clearfix iview-messages-item" style="height:auto;min-height:60px;width:730px;margin:0;" data-cid="'+value.id+'" data-time="'+value.time+'">';
                nm += '<img style="margin-top: 5px;" src="'+value.picture+'" />';
                nm += '<div class="iview-messages-item-info" style="width:630px;">';
                nm += '<div class="iview-messages-item-info-row" style="width:inherit;">';
                nm += '<a href="'+value.profile+'">'+value.first_name+' '+value.last_name+'</a>';
                nm += '<span style="float:right;font-size:11px;">'+value.elapsed_time+'</span>';
                nm += '</div>';
                nm += '<div class="iview-messages-item-info-row">';
                nm += '<span>'+value.content+'</span>';
                nm += '</div>';
                nm += '</div>';
                nm += '</div>';
                $('#iview-messages-pane').append(nm);
            });

            $('form[name="iview-messages-chat"] textarea').val('');
            if (!$.isEmptyObject(data))
            {
                $('#iview-messages-pane').animate({scrollTop: $('#iview-messages-pane').height()}, 800);
            }
        }).fail(function() {
            console.log('error');
        });

        return false;
    });

markup

div id="iview-messages-pane">
<div id="iview-messages-pane-handler" class="clearfix">
    <div class="clearfix iview-messages-item" style="height:auto;min-height:60px;width:730px;margin:0;" data-cid="36" data-time="1340591805">
        <img style="margin-top: 5px;" src="http://myiview.me/upload/1/4fda8a23cb3c3_200_200.jpg" />
        <div class="iview-messages-item-info" style="width:630px;">
            <div class="iview-messages-item-info-row" style="width:inherit;">
                <a href="http://myiview.me/index.php?page=profile&uid=1">Filipe Matias</a>
                <span style="float:right;font-size:11px;">19 hours ago</span>
            </div>
            <div class="iview-messages-item-info-row">
                <span>Hmmmmmm yeeelloowww!</span>
            </div>
        </div>
    </div>
</div>
</div>

Any tips?

Answer 1

May be the hight is not getting the height you expect as @lbstr pointed out

$('#iview-messages-pane')
    .animate({
        scrollTop: (function(){
            var combinedHeightOfChildren = 0;
            $('#iview-messages-pane').children().each(function(){
                combinedHeightOfChildren += $(this).outerHeight();
            });
            return combinedHeightOfChildren - $('#iview-messages-pane').height();
        })(); // execute the function immediately
    }, 800);

As per @lbstr suggession:
The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area so when fully scrolled down the height of the messagespane is visible, hidden part is

combinedHeightOfChildren - $('#iview-messages-pane').height();

so it should return

return combinedHeightOfChildren - $('#iview-messages-pane').height();

There wont be a visible error as we cannot scroll further, just made this sepertate so that other users can follow what happened.

http://jsfiddle.net/sabithpocker/sgu6p/ here is a fiddle showing the working

http://jsfiddle.net/sabithpocker/sgu6p/1/ fiddle with add + scroll!!