AnswerBun.com

Appended messages collides with previous data

The code below appends new chat messages normally and works well. I have added a previous message div as per:

<li id="previous_message_from_db">
  old message1 from database <br><br>
  old message2 from database <br><br>
  old message3 from database <br><br>
  old message4 from database <br><br>
  old message4 from database <br><br>
</li>

The issue is that when I chat from the textbox instead of the newly arrived message moving up the old messages just like in a chat system, it will collide or jam with it.

$(document).ready(function() {
  $('#save').click(function() {
    var message = $('#message').val();
    if (message == "") {
      alert('please Enter Message');
    } else {
      var msg = "<div>" +
        "<b>New message</b>" + message + "<br>" +
        "</div>";
      $('#messages').append(msg);
      $('#messages').animate({
        scrollTop: $('#messages').get(0).scrollHeight
      });
    }
  })
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: 13px Helvetica, Arial;
}

.footer {
  background: #000;
  padding: 3px;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.box {
  border: 0;
  padding: 10px;
  width: 90%;
  margin-right: .5%;
}

.btn {
  color: white;
  background: blue;
  border: none;
  padding: 10px;
  width: 9%;
}

#messages {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 70px;
  padding-top: 70px;
  float: left;
  width: 79%;
  height: auto;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

#previous_message_from_db {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 70px;
  padding-top: 70px;
  float: left;
  width: 79%;
  height: auto;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="previous_message_from_db">
  old message1 from database <br><br> 
  old message2 from database <br><br> 
  old message3 from database <br><br> 
  old message4 from database <br><br> 
  old message4 from database <br><br>
</li>
<li class="" id="messages"></li>
<div class='footer'>
  <input id="message" name="message" class="box chat_textbox" placeholder="Type yor message here.." />
  <input type="submit" id="save" value="Send" class='btn' />
</div>

Stack Overflow Asked by Nancy Mooree on January 2, 2021

1 Answers

One Answer

Moving the new and old message as suggested by Sir Rory, solve the issue

<ul id="messages">

<li id="previous_message_from_dbn">
old message1 from database <br><br2222222222
old message2 from database <br><br>
old message3 from database <br><br>
old message4 from database <br><br>
old message4 from database <br><br>
</li>

   <li class="" id="new_messages"></li>
</ul>

Answered by Nancy Mooree on January 2, 2021

Add your own answers!

Related Questions

Replace duplicates items in array with different values

3  Asked on November 7, 2021 by mohamed-eshaftri

         

How to fix object “x” not found

2  Asked on November 7, 2021 by ronie-febriansah

 

link error when using random_device from boost

2  Asked on November 7, 2021 by dikiidog

     

Error: invalid input syntax for type integer

0  Asked on November 7, 2021 by hammad-ali

     

android studio : My app crashes immediately after start

5  Asked on November 7, 2021 by user13930404

   

Int + Str type python

1  Asked on November 7, 2021

     

Javascript Output is giving empty response

0  Asked on November 7, 2021 by manish-jha

     

Create many CSV Files based on Pandas df column value

2  Asked on November 7, 2021 by eithar

       

How to change radio button checked attribute

2  Asked on November 7, 2021 by white-death

       

Vue js/Javascript Objects.assign() not working

0  Asked on November 7, 2021 by madsongr

     

Problems with HTTP/2 on nginx for Windows?

0  Asked on November 7, 2021 by camaross

     

Error to start application after insert Entity Framework

1  Asked on November 7, 2021 by bircastri

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.