I have been tasked with creating a notification display for a web application. The notifications should appear in the bottom right corner of the window and disappear after a certain period. Alternatively, users can click on a notification to dismiss it. When multiple notifications are present, they should be stacked on top of each other, with new notifications pushing the stack upwards. If the stack grows taller than the window height, older notifications from the top must move to a new stack displayed to the left of the newer one. This pattern continues if subsequent stacks also reach the window height limit.
Visually, the layout should resemble this: https://i.sstatic.net/93ugL.png
I have managed to arrange the notifications correctly, but I am struggling to position the notification container flush against the right edge of the window.
function notify(msg) {
let element = document.createElement('div');
element.classList.add('notification');
element.innerHTML = msg;
let timeout;
element.onclick = () => element.remove();
element.onmouseenter = () => clearTimeout(timeout);
element.onmouseleave = () => createTimeout();
createTimeout();
let recentElement = container.firstElementChild;
if(recentElement) recentElement.before(element);
else container.appendChild(element);
indicator.innerHTML='Last msg is '+msg;
function createTimeout() {
timeout = setTimeout(() => {
element.remove()
}, 10000);
}
}
let notifyIndex = 0;
x1.onclick = () => {
notify(++notifyIndex);
}
x10.onclick = () => {
for (let i = 0; i < 10; i++)
notify(++notifyIndex);
};
x30.onclick = () => {
for (let i = 0; i < 30; i++)
notify(++notifyIndex);
};body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
}
.action-list button {
width: 4rem;
margin .5rem
}
#container {
position: fixed;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
flex-wrap: wrap-reverse;
align-content: flex-end;
align-items: flex-end;
bottom: 0;
right: 30px;
max-height: 100vh;
}
.notification {
transition: all 500ms ease-in-out;
box-shadow: 0 0 1rem #0004;
margin: 0 1rem 1rem 0;
background: #f9f99f;
color: #000;
border: 1px solid #0008;
padding: .2rem 1rem;
cursor: default;
user-select: none;
}<div id="container"></div>
<div>
<div id="indicator">Last msg is 0</div>
<div class="action-list">
<button id="x1">x1</button>
<button id="x10">x10</button>
<button id="x30">x30</button>
</div>
</div>I have added a 30-pixel indentation to demonstrate that the notifications extend beyond the window's edge. The aim is to prevent recent notification stacks from exceeding the window boundary.
Where am I going wrong?