I have a JavaScript chat application that is causing me some trouble. I recently implemented a feature to display user names on top of messages, and while it works well for the first message, I am struggling to hide the user's name when they send subsequent messages. I attempted to use CSS to solve this issue, but it proved to be too complex as only one user's name would appear at a time. Is there a way to achieve this using JavaScript instead? My goal is to create a chat interface similar to Messenger where:
- If user Bob sends multiple messages, his name should only appear above the first message.
- If user Mark sends a message, his name should only appear on top of his first message, not on subsequent ones from him.
Is there a way to accomplish this using JavaScript? It seems like a difficult task with just CSS alone, so any guidance would be greatly appreciated.
I'm currently using PHP Sessions to retrieve the username in JavaScript, so solutions involving LocalStorage may not be suitable. Ideally, I would prefer avoiding cookies or JavaScript sessions and creating a variable if possible.
https://i.sstatic.net/DH4bb.png
var chat = document.getElementById('chat');
var send = document.getElementById('send');
function SendMessage(who, data) {
var li = document.createElement('li');
li.classList.add(who);
var userName = document.createElement('div');
userName.classList.add('user');
userName.textContent = 'Mark';
li.appendChild(userName);
var msg = document.createElement('div');
msg.classList.add('msg');
var span = document.createElement('span');
span.textContent = data.message;
msg.appendChild(span);
li.appendChild(msg);
chat.appendChild(li);
}
send.addEventListener('click', function() {
SendMessage('him', {
message: 'I love to code'
});
});body{
margin:0;
}
ul {
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
list-style-type: none
}
ul li {
font-family: Helvetica, Arial, sans-serif;
display: flex;
flex-direction: column;
}
ul li .user {
font-size: 0.6em;
color: grey;
}
.him { align-self: flex-start; }
.me { align-self: flex-end; }
.msg {
padding: 10px;
border-radius: 30px;
margin-bottom: 2px;
}
.him .user { text-align: left; margin-left: 10px; }
.me .user { text-align: right; margin-right: 10px; }
.him .msg { background: yellow; }
.me .msg { background: #0084ff; color: #fff; }
.center{
background-color:black;
/* width:500px; */
height:100vh;
margin:0 auto 0 auto;
width:100vw;
overflow: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="center">
<ul id="chat">
<li class="him">
<div class="user">Bob</div>
<div class="msg">
<span>Hello World</span>
</div>
</li>
<li class="me">
<div class="user">Me</div>
<div class="msg">
<span>Hello World</span>
</div>
</li>
<li class="him">
<div class="user">Bob</div>
<div class="msg">
<span>How to hide the name after x user sends more than one message</span>
</div>
</li>
<li class="him">
<div class="user">Bob</div>
<div class="msg">
<span>How to hide the name after x user sends more than one message</span>
</div>
</li>
</ul>
<button id="send" style="float:right;">Send</button>
</div>
</body>
</html>