I found this cool snackbar which I can use on my test website for learning reasons.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_snackbar
This snackbar uses ID so I will have to copy paste CSS as well as javascript over and over. if I want 4 different snackbar on same page than I will have to copy paste CSS code 4 times... that can be annoying.
So here is my attempt of setting multi snackbar. you can copy paste my code in above link to see the results.
As you can see, the effect works but it loses the CSS code. Any idea?
again: In snackbar id... I'm just creating layout of box, so I can change snackbar to class... and have id for unique box.
<!DOCTYPE html>
<html>
<head>
<style>
.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;
}
.snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#-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;}
}
#-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;}
}
</style>
</head>
<body>
<h2>Snackbar / Toast</h2>
<p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p>
<p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p>
<button onclick="myFunction()">Show Snackbar</button>
<div id="myUniqueBar" class="snackbar">Some text some message..</div>
<script>
function myFunction() {
var x = document.getElementById("myUniqueBar")
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>
</body>
</html>
Because you are removing your existing snackbar class when using the code:
x.className = "show";
Instead replace the above code with this code:
x.classList.add("show");
Codepen link: https://codepen.io/anon/pen/KZRJmP
Related
Naturally, we can create a CSS animation using keyframes, and control it from there.
However, ideally, I would like to trigger this animation from a button click - so the button click would be an event...
#keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}
Now, on click, I want to trigger this animation; as opposed to from within the CSS animation property.
see here jsfiddle
if you want your animation to work every time you press the button use this code :
$('button').click(function() {
$(".fademe").addClass('animated');
setTimeout(function() {
$(".fademe").removeClass('animated');
}, 1500);
});
where 1500 is the animation-duration in this case, 1.5s
$('button').click(function() {
$(".fademe").addClass('animated');
setTimeout(function() {
$(".fademe").removeClass('animated');
}, 1500);
});
.fademe {
width: 100px;
height: 100px;
background: red;
}
.fademe.animated {
animation: fade-in 1.5s ease;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fademe">
</div>
<button>CLICK ME</button>
EXPLANATION :
on click on the button add class animated ( or any other class ) to the element you want to apply the animation to , .fademe
make a setTimeout(function() to delay the removeClass for the duration of the animation 1.5s or 1500ms
write in CSS the declaration of the animation , #keyframes, and add it to the element with the class added by the JQ .fademe.animated
$("#move-button").on("click", function(){
$("#ship").removeClass("moving");
$("#ship")[0].offsetWidth = $("#ship")[0].offsetWidth;
$("#ship").addClass("moving");
});//
#ship
{
background: green;
color: #fff;
height: 60px;
line-height: 60px;
text-align: center;
width: 100px;
}
#move-button
{
margin-top: 20px;
}
#ship.moving
{
animation: moving 2s ease;
}
#keyframes moving
{
0%{ transform: translate(0px);}
50%{ transform: translate(20px);}
100%{ transform: translate(0px);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ship">Ship</div>
<button id="move-button">Push</button>
If you want to make the animation happen and always end before allowing the event listener to trigger it again, I would suggest to control the behaviour like this:
// Add this to your event listener
if (!element.classList.contains("myClass")) {
element.className = "myClass";
setTimeout(function() {
element.classList.remove("myClass");
}, 1000); //At least the time the animation lasts
}
There is a toggle method that works just fine for this, hope it helps:
function Fade() {
document.getElementById("box").classList.toggle("animate");
}
#box {
background-color: black;
height: 50px;
width: 50px;
}
.animate {
animation: fademe 0.5s;
}
#keyframes fademe {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<html>
<head>
<title>
Animation Trigger
</title>
</head>
<body>
<div id="box"></div>
<button onclick="Fade()"> Fade above Box</button>
</body>
I am following this tutorial on W3schools:
https://www.w3schools.com/howto/howto_js_snackbar.asp
I am trying to increase the time to 10 seconds (10000 ms) but for some reason it fades away after 3ish seconds but then pops up and then dissapears after 7 seconds. Is there a way to fix this?
Code from link:
function myFunction() {
var x = document.getElementById("snackbar");
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 10000);
}
#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;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#-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;}
}
#-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;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Snackbar / Toast</h2>
<p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p>
<p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p>
<button onclick="myFunction()">Show Snackbar</button>
<div id="snackbar">Some text some message..</div>
</body>
</html>
As I suppose you changed the 3000 value in JS. As the code goes, you need to change CSS as well.
#snackbar.show {
visibility: visible; /* Show the snackbar */
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 9.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 9.5s;
animation: fadein 0.5s, fadeout 0.5s 9.5s;
}
The 2.5 will become a 9.5 = 2.5 + 7;
You must change the values in both the css code below to whatever amount of time you want. e.g. If you want 10 seconds change the values below to equal 10.
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; // 3 seconds in total
animation: fadein 0.5s, fadeout 0.5s 2.5s; // 3 seconds in total
The total time should equal the timeout function seconds in the script below:
<script>
function myFunction() {
var x = document.getElementById("snackbar");
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); // total time
}
</script>
The 3000 above should be 10000 if you want to set the timeout to be 10 seconds in accordance with the css.
You need to update the css. Change the delay like :
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 9.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 9.5s;
animation: fadein 0.5s, fadeout 0.5s 9.5s;
Live example :
function myFunction() {
// Get the snackbar DIV
var x = document.getElementById("snackbar");
// Add the "show" class to DIV
x.className = "show";
// After 3 seconds, remove the show class from DIV
setTimeout(function() {
x.className = x.className.replace("show", "");
}, 5000);
}
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
visibility: hidden;
/* Hidden by default. Visible on click */
min-width: 250px;
/* Set a default minimum width */
margin-left: -125px;
/* Divide value of min-width by 2 */
background-color: #333;
/* Black background color */
color: #fff;
/* White text color */
text-align: center;
/* Centered text */
border-radius: 2px;
/* Rounded borders */
padding: 16px;
/* Padding */
position: fixed;
/* Sit on top of the screen */
z-index: 1;
/* Add a z-index if needed */
left: 50%;
/* Center the snackbar */
bottom: 30px;
/* 30px from the bottom */
}
/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
visibility: visible;
/* Show the snackbar */
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 4.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
animation: fadein 0.5s, fadeout 0.5s 4.5s;
}
/* Animations to fade the snackbar in and out */
#-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;
}
}
#-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;
}
}
<!-- Use a button to open the snackbar -->
<button onclick="myFunction()">Show Snackbar 5sec</button>
<!-- The actual snackbar -->
<div id="snackbar">Some text some message..</div>
Edit
If you want to use a css delay in function of the JS delay you can create multiple css class like :
#snackbar.show3 {
visibility: visible; /* Show the snackbar */
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 2.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#snackbar.show5 {
visibility: visible; /* Show the snackbar */
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 4.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
animation: fadein 0.5s, fadeout 0.5s 4.5s;
}
#snackbar.show10 {
visibility: visible; /* Show the snackbar */
/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 4.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 9.5s;
animation: fadein 0.5s, fadeout 0.5s 9.5s;
}
And with your JS you can use the desired animation delay
var desiredDelay = 5;
function myFunction() {
// Get the snackbar DIV
var x = document.getElementById("snackbar");
// Add the "show" class to DIV
x.className = "show" + desiredDelay;
// After 3 seconds, remove the show class from DIV
setTimeout(function() {
x.className = x.className.replace("show" + desiredDelay, "");
}, (desiredDelay * 1000));
}
Changing the animation timeframe you mentioned
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#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;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 1s, fadeout 5s 9s;
animation: fadein 1s, fadeout 5s 9s;
}
#-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;}
}
#-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;}
}
</style>
</head>
<body>
<h2>Snackbar / Toast</h2>
<p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p>
<p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p>
<button onclick="myFunction()">Show Snackbar</button>
<div id="snackbar">Some text some message..</div>
<script>
function myFunction() {
var x = document.getElementById("snackbar");
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 10000);
}
</script>
</body>
</html>
I'm making a personal portfolio and want to show my site tagline for like 3 seconds (full screen), then fade out to show the actual website. What code is used to show some initial div then fade out to the actual website?
This works, with setTimeout(). After 3000 ms, we add the class hidden to the "loading element" that will hide it. You can customize the classes in order to achieve other types of animations. For example, now the animation is set to run for 500 ms.
setTimeout(function() {
$('#loading').addClass('hidden');
}, 3000);
#loading{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: gray;
color: white;
opacity: 1;
transition: 0.5s;
visibility: visible;
}
#loading.hidden{
opacity: 0;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">Loading site...</div>
<div id="site">
<h1>My site</h1>
<p>Lorem ipsum</p>
</div>
If you prefer regular javascript, you can do it like this:
setTimeout(function() {
var element = document.getElementById('loading');
element.classList += " hidden";
}, 3000);
I made a CSS-only version using CSS3 keyframes/animation.
HTML:
<div id="websiteOverlay">
"Some tagline"
</div>
<div class="container">
<h1>
Website content header
</h1>
<p>
Website content body, with some paragraphs
</p>
</div>
CSS:
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#websiteOverlay {
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
color: white;
opacity: 0;
-webkit-animation: fadeOut 3s;
animation: fadeOut 3s;
}
Fiddle: https://jsfiddle.net/9z6ow28m/
At the bottom of your HTML document, add a fixed div:
<div class="fixed">Tagline...</div>
Then make it fixed and fill 100% with CSS:
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
So, now you have the tagline element on top of everything else. Last thing you need to do is fade out that element after 3 seconds. This can easily get achieved with jQuery for example:
setTimeout(function() {
jQuery('.fixed').fadeOut();
}, 3000);
That's all it takes
I have a popup which opens on click of a button. The button is present in all the pages.
The popup should appear only once.
When a user opens a page and click on button the popup must appear and if he clicks on the same button again popup should not come, and from that page if he redirects to another page and clicks on the same button popup should not appear.
If the browser is closed and opened again the popup must appear and the same conditions must apply again.
These are the cases when a popup should appear and when it should not.
How to achieve this with jquery and PHP
you can create popup show only once on click using sessionStorage in jquery- check working
example here
jsfiddle.net/ayatullahrahmani/p1p2zpx5/
here is jquery Code-
$(document).ready(function () {
$(".open").click(function () {
$(".animateDivWrap").addClass("activePopup");
});
$(".close").click(function () {
$(".animateDivWrap").removeClass("activePopup");
sessionStorage.setItem("myClass", "firstGone");
$(".animateDivWrap").addClass(sessionStorage.myClass);
});
// after first load this class would be added
$(".animateDivWrap").addClass(sessionStorage.myClass);
});
css-
body {
overflow:hidden;
}
.animateDivWrap {
position: absolute;
top: 70px;
right: 0px;
left:0px;
width: 300px;
height: 199px;
background: #f6f6f6;
z-index: 9;
display: none;
/*opacity: 0;*/
border: solid 1px #ddd;
border-radius: 5px;
margin:auto;
}
.animateDivContent {
position:relative;
padding: 10px;
}
.animateDivContent .close {
position: absolute;
right: 5px;
top: 3px;
font-size: 12px;
color: #373434;
opacity: 1;
}
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(400px);
}
50%{
opacity: 0.3;
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(400px);
}
50%{
opacity: 0.3;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp{
opacity: 0;
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
.activePopup {
display: block;
/*opacity:1;*/
/*-webkit-animation:bounce 1s infinite;*/
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
animation-name: fadeInUp;
animation-duration: 1s;
}
.close {
cursor: pointer;
}
.firstGone {
display:none;
}
html-
<button type="button" class="open">open</button>
<div class="animateDivWrap">
<div class="animateDivContent">
<a class="close" href="javascript:void(0)" title="close"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
</div>
sessionStorage is the best option for this. as it stores data for that session only. So you can store whether the popup is opene or not.
Just bind the following function as handler function on button click.
function onButtonClick(e)
{
if (sessionStorage.isButtonClicked == undefined) {
sessionStorage.isButtonClicked = true;
// You can do require functionality here e.g. open the popup.
} else {
// do nothing as popup is already opened.
}
}
I am trying to animate a div element (slide and fade) with a button click. At first, the element is not visible to a user. When the button is clicked, it will slide to right and fade in. Once the button is clicked again, it will slide to left and fade out. I come up with two solutions, with css and with JQuery.
In the first one, I used JQuery. You can find the example in this JSFiddle 1.
HTML
<button id="my-button">Click me!</button>
<div id="my-modal"></div>
CSS
#my-modal {
opacity: 1;
position: fixed;
top: 50px;
left: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: red;
}
JQuery
$("#my-button").click(function () {
var $modal = $("#my-modal");
$modal.stop(true, true).animate({
left: "toggle",
opacity: "toggle"
}, 1000);
});
Here, everything seems working but it does directly opposite of what I want. It first fades out, and with the second click, it fades in. It is because that the opacity of the element is 1, but if I turn it to 0, nothing happens.
Secondly, I tried to do that with css animation by using key-frames (changing opacity from 0 to 1) but it has also problem. It starts the animation exactly the way I want. However, when I click the button again, it disappears immediately. Here is the JSFiddle 2.
HTML
<button id="my-button">Click me!</button>
<div id="my-modal"></div>
CSS
#my-modal {
opacity: 0;
position: fixed;
top: 50px;
left: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: red;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.move-my-modal {
-moz-transform: translate(250px, 0px);
-webkit-transform: translate(250px, 0px);
-ms-transform: translate(250px, 0px);
-o-transform: translate(250px, 0px);
}
.animate-opacity {
-webkit-animation: toggle-opacity 1s ease;
-moz-animation: toggle-opacity 1s ease;
-o-animation: toggle-opacity 1s ease;
animation: toggle-opacity 1s ease;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes toggle-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes toggle-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes toggle-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes toggle-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JQuery
$("#my-button").click(function () {
var $modal = $("#my-modal");
$modal.toggleClass("move-my-modal");
$modal.toggleClass("animate-opacity");
});
To this end, I have these questions;
1) What are the problems with these two approaches? Is there something that I missed or forgot to use? How can I correct them to meet the requirements that I mentioned at the beginning.
2) Which one is the better way to make this action? Is there any cons or pros of these approaches?
3) Is there any other way to make this action? I am new on this area and I might not notice a simpler way.
You can toggle an .active class to the element and use CSS transitions.
This way, if the browser is old enough to not support animations, it will still work but it won't slow down computers that do not handle animations well.
$("#my-button").click(function () {
$("#my-modal").toggleClass('active');
});
#my-modal.active {
opacity: 1;
left: 0;
}
$("#my-button").click(function () {
$("#my-modal").toggleClass('active');
});
#my-modal {
opacity: 0;
position: fixed;
top: 50px;
left: -250px;
width: 250px;
height: 100%;
background-color: red;
transition: all 1s linear;
}
#my-modal.active {
opacity: 1;
left: 0;
}
<button id="my-button">Click me!</button>
<div id="my-modal"></div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>