I’m weak in the frontend, so I don’t understand what I’m doing wrong, I’m creating a div
and inside this div
I’m creating span
and a
, then I add that div
to notificationContainer
but they are layered over each other, I want them to be stacked on top of each other.
I tried to do a lot of things, but nothing seemed to work.
CSS
.notification-block {
position: fixed;
bottom: 20px;
left: 20px;
width: 300px;
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px; /* Add margin between notifications */
}
.notification-block a {
color: white;
text-decoration: none;
flex-grow: 1;
}
.notification-block .close-btn {
color: white;
font-size: 1.2em;
cursor: pointer;
}
Javascript
socketNotif.onmessage = function (event) {
const data = JSON.parse(event.data);
console.log("Notification received:", data);
showNotification(data);
};
function showNotification(message) {
const notificationContainer = document.getElementById("notificationContainer");
const notificationElement = document.createElement("div");
notificationElement.className = "notification-block";
const aLink = document.createElement("a");
aLink.setAttribute("href", `/chat/${message.chat_id}`);
aLink.textContent = message.message;
const spanMessage = document.createElement("span");
spanMessage.className = "close-btn";
spanMessage.innerHTML = "×";
spanMessage.addEventListener("click", function () {
notificationContainer.removeChild(notificationElement);
});
notificationElement.appendChild(aLink);
notificationElement.appendChild(spanMessage);
notificationContainer.appendChild(notificationElement);
}
document.getElementById("notificationLink").addEventListener("click", function (event) {
event.preventDefault();
window.location.href = "/chat"; // Adjust the URL as needed
});