Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating Snackbar using HTML, CSS and Javascript
Snackbars are notification bars that appear at the bottom of a web page to display an important message, usually to confirm an action or provide feedback to the user. It is displayed on the screen for fewer seconds and made to disappear. They are an essential element of user interface design and are widely used in web applications.
Approach - 1
Here we will be creating a simple and basic snackbar, which will be displayed for 3 seconds and disappears whenever the user taps the show snackbar button.
Algorithm
Make the title of the HTML document as Snackbar
In the style section,
Center the contents of the body.
Style the button as per the design.
Hide the snackbar by default.
Add animation for the snackbar for showing and hiding.
Set the heading to be a snackbar.
Add a button and snackbar element.
In the script section,
Create a function to show the snackbar and remove it after 3 seconds.
Example
<!DOCTYPE html>
<html>
<head>
<title>Snackbar</title>
<style>
body {
background-color:lavender;
/* Center the contents of body */
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
}
/* Custom button styling */
.button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border-radius: 4px;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
/* Snackbar styling */
#snackbar {
/* Hide the snackbar by default */
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
}
/* Show the snackbar */
#snackbar.show {
visibility: visible;
/* Add animation here */
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* Snackbar animation */
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
</style>
</head>
<body>
<h1>Snackbar</h1>
<!-- Custom button element -->
<button class="button" onclick="showSnackbar()">Show Snackbar</button>
<!-- Snackbar element -->
<div id="snackbar">Welcome to Tutorialspoint!</div>
<script>
function showSnackbar() {
// Get the snackbar element
var snackbar = document.getElementById("snackbar");
// Add the "show" class to the snackbar element
snackbar.className = "show";
// After 3 seconds, remove the "show" class from the snackbar element
setTimeout(function(){ snackbar.className = snackbar.className.replace("show", ""); }, 3000);
}
</script>
</body>
</html>
Approach - 2
We can also add some actions to the snackbar like dismiss, in order to close or hide the snackbar immediately.
Algorithm
Set the title as Snackbar with dismiss action.
In the style section,
Style the dismiss action.
Add the hover effect to it.
Make the heading as a snackbar with dismiss action.
Add a button and snackbar element.
In the script section,
Create a function to show the snackbar.
Another function for dismissing it.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snackbar with dismiss action</title>
<style>
/* Styling for the body element */
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: lavender;
}
/* Styling for the button element */
button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border-radius: 4px;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
/* Styling for the snackbar element */
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
/* Styling for the snackbar element when it is visible */
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* Animation for fading in the snackbar element */
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
/* Animation for fading out the snackbar element */
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
/* Styling for the dismiss action within the snackbar */
#snackbarAction {
color: #fff;
cursor: pointer;
border-radius: 2px;
padding: 4px 8px;
font-size: 14px;
background-color: #5f5f5f;
display: inline-block;
margin-left: 16px;
}
/* Styling for the dismiss action within the snackbar when hovered over */
#snackbarAction:hover {
background-color: #4d4d4d;
}
</style>
</head>
<body>
<h1>Snackbar with dismiss action</h1>
<button onclick="showSnackbar()">Show Snackbar</button>
<div id="snackbar">Snackbar message<span id="snackbarAction" onclick="dismissSnackbar()">Dismiss</span></div>
<script>
// Function to show the snackbar element
function showSnackbar() {
var snackbar = document.getElementById("snackbar");
snackbar.className = "show";
}
// Function to dismiss the snackbar element
function dismissSnackbar() {
var snackbar = document.getElementById("snackbar");
snackbar.className = "";
}
</script>
</body>
</html>
Approach - 3
To get a sleek and elegant look, it is necessary to customize the snackbar to match the website design.
Algorithm
Set a relevant title.
Style the body.
Customize the snackbar with CSS.
Add javascript functionality.
Example
<!DOCTYPE html>
<html>
<head>
<title>Custom Snackbar Example</title>
<style>
/* styling for the body */
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 0;
background-color: lavender;
flex-direction: column;
}
/* styling for the button */
.button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border-radius: 4px;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
/* styling for the snackbar */
.snackbar {
background-color: #61a4f0;
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
border-radius: 40px;
padding: 20px;
width: 300px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
z-index: 1;
animation: slideIn 0.5s ease-in-out;
}
/* hiding the snackbar */
.snackbar.hidden {
display: none;
}
/* styling for the snackbar dismiss button */
.snackbar button {
background-color: transparent;
color: #fff;
border:none;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
margin-left: 10px;
}
/* defining the slide-in animation for snackbar */
@keyframes slideIn {
from {
bottom: -100px;
opacity: 0;
}
to {
bottom: 20px;
opacity: 1;
}
}
</style>
</head>
<body>
<h1>Coloured Snackbar</h1>
<button class="button" onclick="showSnackbar()">Show Snackbar</button>
<div id="snackbar" class="snackbar hidden">
<span>Snackbar Message</span>
<button onclick="hideSnackbar()">Dismiss</button>
</div>
<script>
/* function to show the snackbar */
function showSnackbar() {
var snackbar = document.getElementById("snackbar");
snackbar.classList.remove("hidden");
/* hiding the snackbar after 3 seconds */
setTimeout(function(){ snackbar.classList.add("hidden"); }, 3000);
}
/* function to hide the snackbar */
function hideSnackbar() {
var snackbar = document.getElementById("snackbar");
snackbar.classList.add("hidden");
}
</script>
</body>
</html>
Conclusion
The snackbars in the user interfaces are used to display short and crisp information to the user. It is essential to make these messages dismissable. It should be used only to display important messages that require the user's attention. Another important note is that these messages should not contain any confidential and sensitive information. The duration for which the snackbar is shown must be less.
700 Views
