I have code for a toast like below.
html
<button onclick="launch_toast()">Show Toast</button>
<div id="toast"><div id="img">Icon</div><div id="desc">A notification message..</div></div>
css
#toast {
visibility: hidden;
max-width: 50px;
height: 50px;
/*margin-left: -125px;*/
margin: auto;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
position: fixed;
z-index: 1;
left: 0;right:0;
bottom: 30px;
font-size: 17px;
white-space: nowrap;
}
#toast #img{
width: 50px;
height: 50px;
float: left;
padding-top: 16px;
padding-bottom: 16px;
box-sizing: border-box;
background-color: #111;
color: #fff;
}
#toast #desc{
color: #fff;
padding: 16px;
overflow: hidden;
white-space: nowrap;
}
#toast.show {
visibility: visible;
-webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.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 expand {
from {min-width: 50px}
to {min-width: 350px}
}
#keyframes expand {
from {min-width: 50px}
to {min-width: 350px}
}
#-webkit-keyframes stay {
from {min-width: 350px}
to {min-width: 350px}
}
#keyframes stay {
from {min-width: 350px}
to {min-width: 350px}
}
#-webkit-keyframes shrink {
from {min-width: 350px;}
to {min-width: 50px;}
}
#keyframes shrink {
from {min-width: 350px;}
to {min-width: 50px;}
}
#-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
#keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
js
function launch_toast() {
var x = document.getElementById("toast");
x.className = "show";
setTimeout(function(){
x.className = x.className.replace("show", "");
}, 5000);
}
I want to know how to link this code to my progressive web app so that on clicking the user is able to download the PWA. My site.
You should get a reference to the beforeinstallpromt event, on which you can call the promt function later on in your toast. You can get this event by adding an event listener as follows (source: Google):
let installPromptEvent;
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
Hence, in your launch_toast function, you can launch the prompt:
function launch_toast(){
installPromptEvent.prompt();
}
This is, of course, assuming that your manifest is configured well and that your service worker could also be registered. If the device does not support this, the beforeinstallprompt will not be fired and your reference to installPromptEvent will be undefined. The event will also not fire when the PWA is already installed on the device.
Related
function Hello() {
var text_to_copy = document.getElementById("quote").innerHTML;
navigator.clipboard.writeText(text_to_copy).then(
function(){
alert("Copied successfully"); // success
})
.catch(
function() {
alert("Error"); // error
});
}
I want the code to flash the "Copied duccessfully" or "Error" instead of showing in alert box
A snackbar/toast message would work perfectly. But you will need to code your own implementation for it ofc.
An example of how to implement this:
HTML:
<span id="snackbar">Successfully Copied</span>
CSS:
#snackbar {
visibility: hidden;
color: #fff;
background-color: #333;
min-width: 250px;
margin-left: -125px;
border-radius: 2px;
padding: 16px;
text-align: center;
left: 50%;
bottom: 30px;
z-index: 1;
position: fixed;
}
/* This will be activated when the snackbar's class is 'show' which will be added through JS */
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* Animations for fading 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;}
}
Javascript:
function showSnackBar() {
var sb = document.getElementById("snackbar");
//this is where the class name will be added & removed to activate the css
sb.className = "show";
setTimeout(()=>{ sb.className = sb.className.replace("show", ""); }, 3000);
}
You can edit & style to your liking. (ofc ideally you should edit this to pass whatever string message you want the Snackbar/toast to display, something i left out for you to enjoy)
Good evening, I'm a beginner front-end developer who is trying to implement sketches of Pinterest for training.
I've found this gif for the signup/login page but I have a major issue for implementing animation, I don't have any idea for reversing the animation when the user clicks on the signup button can anybody tell me how can I reverse an animation?
function animation() {
var element = document.getElementById("containerForm")
element.classList.add("slide")
}
.containerForm {
width:50px;height:50px;background-color:red;
}
.slide {
animation: slide 2s ease-in-out;
position: relative;
animation-fill-mode: forwards;
}
#keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
overflow: hidden;
visibility: visible;
}
}
<div class="containerForm" id="containerForm">
<form></form>
</div>
<button onclick="animation()">click</button>
but as I've said I don't have an idea for the second step
Link of gif
you can add another css class and make use of the animation-direction property.
ie
.slide-back{
animation: slide 2s ease-in-out;
position: relative;
animation-direction: reverse;
}
function animation() {
var element = document.getElementById("containerForm")
element.classList.add("slide")
}
function reverse() {
var element = document.getElementById("containerForm")
element.classList.remove("slide")
}
.containerForm {
width:50px;
height:50px;
background-color:red;
transform: translateX(0);
transition: transform 2s;
}
.slide {
transform: translateX(100%);
}
<div class="containerForm" id="containerForm">
<form></form>
</div>
<button onclick="animation()">click</button>
<button onclick="reverse()">click</button>
transition works too:
example:
*{margin:0;}
#tst {
display: grid;
grid-template-columns: repeat(2, 1fr);
min-height: 100vh;
background: #555;
}
label {
margin: auto;
appearance: button;
cursor: pointer;
min-width: 6em;
text-align: center;
}
#a,
#b {/*hides radios */
position: absolute;
right: 100vw;
}
[for="a"],
#c {
grid-row: 1;
grid-column: 1;
}
#c {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
background: white;
border: solid;
transition: 0.5s;
font-size:2vw;
}
#a:checked~#c {
transform: translatex(0)
}
#b:checked~#c {
transform: translatex(100%)
}
h1 {
margin: auto;
}
#c p[class] {
margin: auto;
grid-column: 1;
grid-row: 2;
transition: 0.25s;
background: inherit;
color: #164fb7;
font-size: 3vw;
}
#c p.b {
opacity: 0;
color: tomato;
}
#b:checked~#c p.b {
opacity: 1
}
/* there were no js nor animation nor absolute positionning ;) */
<div id="tst">
<input id="a" type=radio name=toggle>
<input id="b" type=radio name=toggle>
<label for="a">Left</label>
<label for="b">Right</label>
<div id="c">
<h1>here or there ?</h1>
<p class="a">Standing on the left</p>
<p class="b">Standing on the right</p>
</div>
</div>
Instead of adding a class I suggest using the animation-play-state property and adding event listeners:
one click listener to the button
one animationiteration to the div
simply change the play state from paused to running
Let me show you what I mean:
const element = document.getElementById("containerForm");
const btn = document.querySelector("button");
function animation() {
element.style.animationPlayState = "running";
}
function stopAnimation() {
element.style.animationPlayState = "paused";
}
btn.addEventListener("click", animation);
element.addEventListener("animationiteration", stopAnimation);
.containerForm {
width: 50px;
height: 50px;
background-color: red;
animation: slide 2s ease-in-out infinite alternate paused;
}
#keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
<div class="containerForm" id="containerForm">
<form></form>
</div>
<button>click</button>
I want to create a keyframe Animation each time when I click at the box. But when I click onto the box the animation just works one time. I want that the animation works everytime when I click onto the box.
Any help?
Thanks!
$(document).ready(function(){
$("#rocketstart").click(function(){
$(".rocket").css("animation-play-state", "running");
});
});
.rocket {
background-color: red;
width: 550px;
height: 300px;
cursor: pointer;
background-repeat: no-repeat;
margin-right: -340px;
margin-bottom: -110px;
animation-name: rocket;
animation-duration: 1s;
animation-play-state: paused;
}
#keyframes rocket {
0% { transform:translate(0) }
100% { transform:translate(0, -50%) }
70% { opacity:1; }
100% { opacity:0; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='rocket' id="rocketstart" title="rocketup">
Instead of changing the state of animation, move the animation property into a new class and remove that class at the end of animation:
$(document).ready(function(){
$("#rocketstart").click(function(){
$(".rocket").addClass("animated");
});
$('.rocket').on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
$(this).removeClass("animated");
});
});
.rocket {
background-color: red;
width: 550px;
height: 300px;
cursor: pointer;
background-repeat: no-repeat;
margin-right: -340px;
margin-bottom: -110px;
}
.animated{
animation-name: rocket;
animation-duration: 1s;
}
#keyframes rocket {
0% { transform:translate(0) }
100% { transform:translate(0, -50%) }
70% { opacity:1; }
100% { opacity:0; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='rocket' id="rocketstart" title="rocketup">
I am trying to add animation in grouped progress bar that will load each progress bar from 0 to its value. e.g in my sample code below I want to first load red progress bar then load the green progress bar. How can I do that?
Please check the code in this jsfiddle.
html:
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
css:
.progress-bar-outer {
width: 300px;
height: 40px;
flex: auto;
display: flex;
flex-direction: row;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
height: 100%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 50%;
height: 100%;
background-color: green;
}
.progress-bar-outer div {
animation:loadbar 3s;
-webkit-animation:loadbar 3s;
}
#keyframes loadbar {
0% {width: 0%;left:0;right:0}
}
I would transition transform instead for better performance. Use translateX(-100%) with opacity: 0 to move them to their default, hidden position, then animate to translateX(0); opacity: 1; to put them in place. And just add an animation-delay to the green bar that matches the animation-duration
I made the bars semi-opaque to show when the animations fire.
.progress-bar-outer {
width: 300px;
height: 40px;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
display: flex;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 75%;
background-color: red;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: green;
}
.progress-bar-outer div {
transform: translateX(-100%);
animation: loadbar 3s forwards;
-webkit-animation: loadbar 3s forwards;
opacity: 0;
}
.progress-bar-outer .progress-bar-inner2 {
animation-delay: 3s;
}
#keyframes loadbar {
0% {
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
Modified Michael Coker's answer to better reflect my interpretation of what you're asking for.
.progress-bar-outer {
width: 300px;
height: 40px;
border-radius: 0.5em;
overflow: hidden;
background-color: gray;
position: relative;
}
.progress-bar-inner {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: red;
z-index: 1;
}
.progress-bar-inner2 {
/* You can change the `width` to change the amount of progress. */
width: 100%;
background-color: green;
z-index: 2;
}
.progress-bar-outer div {
position: absolute;
top: 0; bottom: 0;
transform: translateX(-100%);
animation: loadbar 3s linear;
-webkit-animation: loadbar 3s linear;
opacity: 1;
}
.progress-bar-outer .progress-bar-inner2 {
animation-delay: 3s;
}
#keyframes loadbar {
100% {
transform: translateX(0);
}
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -->
<div class="progress-bar-outer">
<div class="progress-bar-inner">
</div>
<div class="progress-bar-inner2">
</div>
</div>
Apply Transition to inner classes, add delays to secondary inner and use opacity to hide the element before transition begins.
.progress-bar-inner {
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
.progress-bar-inner2 {
-webkit-animation: loadbar 2s ease 2s forwards;
animation: loadbar 2s ease 2s forwards
animation-delay: 2s;
-webkit-animation-delay: 2s;
opacity:0;
}
#keyframes loadbar {
0% { width: 0%;left:0;right:0}
1% { opacity: 1}
100% { opacity: 1}
}
See working example:
https://jsfiddle.net/dfkLexuv/10/
This question already has answers here:
How to run a function when the page is loaded?
(11 answers)
Closed 5 years ago.
Hi i want to show snack bar on my page after the page load without any clicking. I have a piece of code but it works in onclick. But i want to show the message without any click after the page load.
function snackBar() {
var x = document.getElementById("snackbar")
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
#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;
right:0;
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;}
}
<button onclick="snackBar()">Show Snackbar</button>
<div id="snackbar">Some text some message..</div>
Try This one for javascript :
<body onload="snackBar()">
and if you are using jquery then you can try this one too :
$( document ).ready(function() {
snackBar();
});
Hopefully this will works for you.. Thank you!
I think instead of doing the onclick you would do $(document).ready(function(){
snackBar();
});
$(document).ready(function() {
setTimeout(function(){
var x = document.getElementById("snackbar");
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1000);
}, 2000)
});
#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;
right:0;
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;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="snackBar()">Show Snackbar</button>
<div id="snackbar">Some text some message..</div>
Hi! this demo will show you the snackbar without any click only with DOM loading and you can also set the time of snackbar after window load whenever you want to show like 2000 = 2 seconds