I'm currently developing a basic notification system.
Check out the jsfiddle I created here: https://jsfiddle.net/t9pvmzhh/3/
For some reason, jsfiddle is not showing all 4 notifications even though they display correctly on my end. I suspect there might be an issue with my code, so any assistance in resolving it would be greatly appreciated...
I've implemented a feature to clear each notification after 1000ms, but I'm encountering a roadblock at the end of the JS code. The "id" variable returns clear0(), clear1(), as intended, but I'm facing difficulty in calling a function within function id { }. Is this even possible? Do I need to find an alternate solution? (I'm considering adding a close button to the notifications, but automatic dismissal would be more elegant)
HTML
<div class="notificontainer" id="notificontainer">
</div>
CSS
.notificontainer {
position: fixed;
border: 1px solid blue;
width: 40vw;
height: 20px;
left: 30%;
bottom: 10px;
}
.notification {
display: none;
transition: visibility .5s;
position: absolute;
border: 1px solid #44DDFF;
background-color: rgb(0, 0, 0);
width: 50%;
height: auto;
padding: 0;
left: 25%;
bottom: 0px;
color: #ffffff;
}
.tooltipheader {
margin: 0px;
padding: 2%;
text-align: center;
border-bottom: 1px groove #949494;
background-color: rgba(165,165,175, .1);
}
JS
notification("Hi world1");
notification("Hi world2");
notification("Hi world3");
notification("Hi world4");
var counted = 0;
function notification(what) {
counted++;
var elem = document.getElementById("notificontainer");
elem.innerHTML += "<div class=\"notification\" id=\"noty" + counted + "\"><div class=\"tooltipheader\"" + what + "</div></div>";
document.getElementById("noty" + counted).style.bottom = counted * 40 + "px";
document.getElementById("noty" + counted).style.display = "initial";
var id = "clear" + counted + "()";
window.setTimeout("clear" + counted, 1000);
}