How to automatically display and hide bottom fixed element with css and js
This can be used for displaying Cookie notice or When something loads in the background you can alert the user to show its status and the plus point is,it disappears automatically with cool animation
HTML
Set id of the div * which you are going to use as status element as autoStatus
Add autoStatusText id to an element inside #autoStatus ,so that you can add some text with js whenever you want to display or show status.
<div id="autoStatus">
<p id="autoStatusText"></p>
</div>
CSS
CSS styles of the status element are presented below.You can modify them or copy as is.
/*
Initially status element is hidden
*/
#autoStatus {
display: none;
}
/*
.active class is added via javascript
and this makes status element visible.
*/
#autoStatus.active {
opacity: 1;
display: block;
position: fixed;
bottom: 0;
width: 100%;
margin: 0 auto 0 auto;
padding: 0.4em 0 0.4em;
background-color: black;
color: white;
text-align: center;
animation-name: disappear;
animation-duration: 4s;
animation-delay: 3s;
transition: all linear 0.3s;
animation-fill-mode: forwards;
}
/*
auto hide animation
*/
@keyframes disappear {
from {
opacity: 1;
margin-bottom: 0;
}
to {
opacity: 0;
margin-bottom: -100px;
}
}
JavaScript
You could add below code as is and run your page to see disappearing status or extend AutoStatus with your class and use methods hideStatus() showStatus() as per your requirement.
showStatus() adds .active class to the Status element which makes it visible by changing css display property to block
it can be used to display status element with or with out custom text
class AutoStatus {
constructor() {
// STATUS ELEMENT
this.statusElement = document.getElementById("autoStatus");
// IF YOU WANT TO ADD TEXT INSIDE STATUS ELEMENT
this.statusElementText = document.querySelector("#autoStatusText");
// these elements can be used to activate or show status
this.toggleStatusShow = document.querySelectorAll(".toggleStatusShow");
// these elements can be used to hide status
this.toggleStatusHide = document.querySelectorAll(".toggleStatusHide");
// set events
this.init();
}
// display status with or wih out text
showStatus(msg = "") {
if (msg != "") {
this.statusElementText.innerHTML = msg;
}
this.statusElement.classList.add("active");
setTimeout(() => {
this.hideStatus()
}, 5000);
}
// hides status element
hideStatus() {
this.statusElement.classList.remove("active");
}
init() {
// be default when window loads status is displayed
// remove if you don't want this behavior.
window.onload = () => {
this.showStatus("Now I will disappear......");
}
// hides status element when you clck on it.
this.statusElement.onclick = () => {
this.hideStatus();
}
// adding onclick event to togglers(opening status element)
this.toggleStatusShow.forEach((ele) => {
ele.onclick = () => {
this.showStatus();
}
});
// adding onclick event to togglers(closing status element)
this.toggleStatusHide.forEach((ele) => {
ele.onclick = () => {
this.hideStatus();
}
});
}
}
var autoStatus = new AutoStatus();
Check out the live demo - https://www.thewebblinders.in/demos/how-to-automatically-display-and-hide-bottom-fixed-element-with-css-and-js.html