0

I am trying to make something like live chat. I want to set default position of displayed text on the bottom, like on facebook chat or all other chats. I mean I have the newest messages on the bottom of the div and the oldest on the top. When I open the chat, it shows me the oldest messages. I am very thankful for all advices! Thank you!

There are CSS settings of chat pannel:

 #chat {
 position: absolute;
 top: 90px;
 bottom: 220px;
 left: 0;
 width: 100%;
 margin: 0 auto;
 overflow: auto;
  color: #141855;
 }

 #chat_content {
 width: 90%;
 margin: 0 auto;
 }
H Sturma
  • 301
  • 4
  • 17
  • 1
    That's a great project. **What have you tried**? – tadman Mar 15 '16 at 21:27
  • @tadman I have tried some jquery functions which I've found here, on StackOverflow, but it didn't work for me... – H Sturma Mar 15 '16 at 21:28
  • 1
    this will help http://stackoverflow.com/a/7303977 – Siraj ul Haq Mar 15 '16 at 21:28
  • "Didn't work" isn't a very helpful explanation. What's the specific problem? What was it supposed to do, and what did it do instead? – tadman Mar 15 '16 at 21:29
  • @SirajulHaq I am not good at jQuery, so could you please help me, how to delete that interval? Because that function works, but every 5sec it throws me back to the bottom, when I want to read older messages.. – H Sturma Mar 15 '16 at 21:33
  • @tadman it should show me bottom of the div, like when I've already scrolled down, but it did nothing, I appeared on the top and had to scroll down for new messages – H Sturma Mar 15 '16 at 21:34
  • You just need to use this code var elem = document.getElementById('data'); elem.scrollTop = elem.scrollHeight; and put whatever div id you have set to div in place of data. – Siraj ul Haq Mar 15 '16 at 21:37
  • @SirajulHaq it doesn't work then... I've tried this: ``, but it doesn't work neither... – H Sturma Mar 15 '16 at 21:40
  • You have to put it when you show that div, i mean if there is any click function is bind. – Siraj ul Haq Mar 15 '16 at 21:46
  • @SirajulHaq I am not sure if I understood you well.. Anyway, I've tried another way, how it could work, but it didn't again... `window.setTimeout(function() { var elem = document.getElementById('chat'); elem.scrollTop = elem.scrollHeight; }, 1000);` – H Sturma Mar 15 '16 at 21:53
  • @SirajulHaq oh, it works! I just had set the same time for re-load content and for scroll. I had to set bigger value to setTimeout. Thank you! – H Sturma Mar 15 '16 at 21:55

0 Answers0