Display in Chat

Question

To properly display a chat window, I ended with this code :

function baja_el_chat() {
  var height = 0;
  $('div#my-conversation .message').each(function(i, value){
      height += parseInt($(this).height());
  });

  height += '';

  $('div#my-conversation').animate({scrollTop: height});
}

http://stackoverflow.com/questions/15688656/how-to-keep-a-div-scrolled-to-the-bottom-as-html-content-is-appended-to-it-via-j — Alvaro, Nov 13 '16 at 02:04

zJorge · Accepted Answer · 2016-11-13T02:14:53.057

I did a chat window from scratch a few weeks ago. The way the browser builds your stack of divs will make the most recent messages to be hidden below the window's limits as expected. The same happened to me so I built this Javascript/jQuery function:

function baja_el_chat() {
  var height = 0;
  $('div#my-conversation .message').each(function(i, value){
      height += parseInt($(this).height());
  });

  height += '';

  $('div#my-conversation').animate({scrollTop: height});
}

Basically what it does is to measure the height of the content based on the sum of all chat bubbles and then scroll that amount. I call this function every time the user hits enter or receives a new message.

Display in Chat

1 Answers1