I’m weak in the frontend, so I don’t understand what I’m doing wrong, I think I’m creating a div, a span and an a to it, adding a div to the notification container and they are layered on top of each other, help me please.
css:
<code>.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;
}
</code>
<code>.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;
}
</code>
.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;
}
<code> 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
});
</code>
<code> 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
});
</code>
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
});
problem.png
I tried to do a lot of things, but I can’t explain how and why, since I’m weak at the front, so I’m slowly figuring it out. Thank you very much!