Блог

Главная - Вопросы по программированию - Текст чата на Javascript внизу

Текст чата на Javascript внизу

#javascript #html #css #chat

#javascript #HTML #css #Чат

Вопрос:

Я создал систему чата с помощью javascript. Отправленные сообщения отображаются справа, полученные — слева.
Теперь я хочу отобразить их внизу (в настоящее время они находятся вверху). Но если я установлю родительский div в нижней части, то с одной стороны будут отображаться как отправленные, так и полученные сообщения.

css: скриншот, потому что эта страница не может отформатировать мой css wow .. https://s15.postimg.org/kav7m3x3v/css_SO.png

 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('<div class="chat-OutputGET bubbleGET"> <font color="white"> User('   time   '): '   this.value   '</font></div>');
    console.log(connection.send);
    console.log('User ('   time   '): '   this.value);
    appendDIV('<div class="chat-OutputSEND bubble"> <font color="white"> Me ('   time   '): '   this.value   '</font></div>');
    this.value = '';
};
var chatContainer = win.document.querySelector('.chat-output');

function appendDIV(event) {
    console.log(event);
    var div = document.createElement('div');
    div.innerHTML = event.data || event;

    chatContainer.appendChild(div);
    div.tabIndex = 0;
    div.focus();
    win.document.getElementById('input-text-chat').focus();
}
connection.onmessage = appendDIV;

}  
 <div id="chatHtml" style="display: none;">
    <link rel="stylesheet" href="style/main.css">
    <div id=chatOutput class="chat-output"></div>
    <textarea class="form-control" rows="1" id="input-text-chat" placeholder="Enter Text Chat"></textarea>
    <div id="chat-container">
    </div>
</div>

Комментарии:

1. Пожалуйста, отредактируйте фрагмент в своем ответе и вставьте туда свой css- код , а не его изображение .

Ответ №1:

Это сделано, я меняю положение «чат-вывод» на абсолютное, и важным моментом является установка left и right на 0.