0

The auto scroll works for a couple messages on it's own. Then it randomly gives out and starts scrolling up when the user sends a message.

Here's the applicable Javascript. And the limited styles (Haven't really gotten to styling yet.) Also, the site if you want a reference as to what it looks like is http://schoolsurvivaltools.com:3000

//send message
$messageForm.submit(function(e) {
    e.preventDefault();
    socket.emit('send message', $messageBox.val());
    $messageBox.val("");
    $("#chat").animate({ scrollTop: $("#chat").height() }, "fast");
    return false;
});

//Add the users message to the chat.
socket.on('pushMessage', function(data){
    $chat.append("<li><b>" + data.nick+ ": " + "</b>" + data.msg + " </br>" + "</li>");
    $("#chat").animate({ scrollTop: $("#chat").height() }, "fast");
});

Styling: 

#chat {
    height:500px;
    width:300px;
    overflow-y:scroll;
    overflow-x:auto;
}
#mainWrap {
    display:none;
}
#chatWrap {
    float: left;
    border:1px #000 solid;
    overflow-y:scroll;
    width:302px;
}
rfornal
  • 5,072
  • 5
  • 30
  • 42
Dylan McGrath
  • 151
  • 6

1 Answers1

0

The height function in jQuery will give you the height of the element, but you want the height of the contents of the element. See here How do I get the height of a div's full content with jQuery?

Community
  • 1
  • 1
Alex Figliolia
  • 471
  • 2
  • 5
  • This is a link to an answer. Please put the relevant code and documentation here since links can change. If you feel this question has been answered already, please flag it as such. – rfornal May 06 '15 at 00:55
  • Im still getting the same scroll up issue after a certain number of messages... going to see how many, using this code: Wont run in JSFiddle, but you can see the result in the above link to site in the OP. Here is the code : http://jsfiddle.net/bjuz3bxg/ – Dylan McGrath May 06 '15 at 01:08