mantaplatte mantaplatte - 2 months ago 15
CSS Question

Chat Javascript

I've made a chat in javascript and now I want to move the send messages on the left side and the received messages on the right, like Facebook or WhatsApp.
And also that new messages are below the old ones (at the moment the new messages are above the old ones.

Here's a code snippet :

openChat: function(){
win =window.open('','myconsole',
'width=300,height=400'
+',menubar=0'
+',toolbar=1'
+',status=0'
+',scrollbars=1'
+',resizable=1')
chat = document.getElementById("chatHtml").innerHTML;
win.document.write(chat);
win.document.title = "Live Chat";


win.document.getElementById('input-text-chat').onkeyup = function(e) {
if (e.keyCode != 13) return;
// removing trailing/leading whitespace
// this.value = this.value.replace(/^\s+|\s+$/g, '');

var a = new Date();
var b = a.getHours(); var c = a.getMinutes(); var d = a.getSeconds();
if(b < 10){b = '0'+b;}
if(c < 10){c = '0'+c;}
if(d < 10){d = '0'+d;}
var time = b+':'+c+':'+d;

if (!this.value.length) return
connection.send(this.value);
console.log(connection.send);
console.log(this.value);
appendDIV('User (' + time + '): ' + this.value);
this.value = '';
};
var chatContainer = win.document.querySelector('.chat-output');
function appendDIV(event) {
var div = document.createElement('div');
div.innerHTML = event.data || event;
chatContainer.insertBefore(div, chatContainer.firstChild);
div.tabIndex = 0;
div.focus();
win.document.getElementById('input-text-chat').focus();
}
connection.onmessage = appendDIV;


Thank you :)

Answer

you should change this line

chatContainer.insertBefore(div, chatContainer.firstChild);

to

chatContainer.appendChild(div);
Comments