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)
Related
I want to take out the image div to outside the a href while keeping the effect it has on it when pressing the link. I tried but once it is not inside the main div anymore the animation does not work.
Note: the JS script is to set a delay to let the image animate then access the link.
https://codepen.io/jinzagon/pen/JjXWzQj
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a style="position:absolute; z-index:999999;"href="http://google.com" class="section">TEST
<div class="response">
<img src="https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg" />
</div>
</a>
CSS
body{
background-color:black;
}
a {
overflow: hidden;
}
.section {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: 4s ease-out;
}
.response {
position: absolute;
top: 0px;
left: 00px;
width: 100%;
height: 100%;
transition: 4s ease-out;
opacity: 1;
}
.clicked {
animation-delay: 2s;
animation: event 2s;
}
.clicked .response {
animation: response 4s;
}
#keyframes response {
0% {} 16% {
opacity: 1;
}
32% {
opacity: 0;
}
40% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 0;
}
}
JS
$(document).ready(function() {
$('.section').click(function(e) {
e.preventDefault();
var $a = $(this).addClass('clicked');
setTimeout(function() {
window.location.assign($a.attr('href'));
}, 1700);
});
});
Well I am still am not sure if you are taking the div outside the a tag with JavaScript or you just manually want to hard code it like that. I'll assume the latter
<a style="position:absolute; z-index:999999;"href="http://google.com" class="section">TEST
</a>
<div class="response">
<img src="https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg" />
</div>
and for your JS
$(document).ready(function() {
$('.section').click(function(e) {
e.preventDefault();
var $responsiveDiv = $('.response')
$responsiveDiv.addClass('clicked'); // Instead of adding clicked to a tag add class clicked directly to responsive div
setTimeout(function() {
window.location.assign($responsiveDiv.attr('href'));
}, 1700);
});
});
and for your CSS
body{
background-color:black;
}
a {
overflow: hidden;
}
.section {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: 4s ease-out;
}
.response {
position: absolute;
top: 0px;
left: 00px;
width: 100%;
height: 100%;
transition: 4s ease-out;
opacity: 1;
}
.clicked {
animation-delay: 2s;
animation: event 2s;
}
.clicked { /* Changed */
animation: response 4s;
}
#keyframes response {
0% {} 16% {
opacity: 1;
}
32% {
opacity: 0;
}
40% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 0;
}
}
Have you considered using a data- attribute? That may be the easiest approach to this problem:
$(document).ready(function() {
$('.response img').click(function(e) {
var $a = $(this).addClass('clicked');
setTimeout(function() {
window.location.assign($a.attr('data-href'));
}, 1700);
});
});
body{
background-color:black;
}
a {
overflow: hidden;
}
.response {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: 4s ease-out;
}
.clicked {
animation-delay: 2s;
animation: event 2s;
animation: response 4s;
}
#keyframes response {
0% {} 16% {
opacity: 1;
}
32% {
opacity: 0;
}
40% {
opacity: 0;
transform: scale(1.15);
}
100% {
opacity: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="response">
<img src="https://iphonesoft.fr/images/_082019/fond-ecran-dynamique-macos-wallpaper-club.jpg" data-href="http://google.com" />
</div>
You may now move the a anywhere you like if you still need it.
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.
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
On its release notes to Firefox 42, Mozilla has an animation effect that uses no Javascript, no CSS animation, no video or plug-in, and no animated gif.
Please refer to this page to observe the effect. There is a robot at the bottom right corner of the shield that blinks every few seconds. It is in a div element of class critter bottom-right
How is this effect done?
EDIT: I was mistaken; CSS animations are used; they just don't show up in the Animations tab of the DOM Inspector but they can be seen in the Rules tab when ::before ::after is selected within the div element containing the robot.
Right click on the area and "Inspect Element"
Inside <div class="shield-container></div> you can see the following css animation
See the CSS section of the debug tools to see what css does there.
It uses CSS animation. You can see the animation rule in the DOM inspector.
This uses CSS animation on the :before pseudo element.
#tracking-protection-animation .critter.bottom-right::before {
position: absolute;
top: 20px;
right: 52px;
width: 32px;
height: 32px;
background-image: url("/media/img/firefox/tracking-protection/sheild-animation/eye-lid-bottom-right.070dfe3825e1.png");
opacity: 0;
content: "";
animation: 6s linear 0s normal none infinite running blink;
}
#keyframes blink{
0%{
opacity:0
}
40%{
opacity:0
}
41%{
opacity:1
}
42%{
opacity:1
}
43%{
opacity:0
}
75%{
opacity:0
}
76%{
opacity:1
}
77%{
opacity:1
}
78%{
opacity:0
}
100%{
opacity:0
}
Here is the CSS and mark-up to reproduce the example:
http://jsfiddle.net/ren8tx55/
<div id="tracking-protection-animation">
<div class="shield-container">
<div class="critter top-left"></div>
</div>
</div>
CSS
#tracking-protection-animation .shield-container {
position: relative;
z-index: 0;
}
#tracking-protection-animation .critter.top-left::before {
animation: 7s linear 0s normal none infinite running blink;
background-image: url("https://mozorg.cdn.mozilla.net/media/img/firefox/tracking-protection/sheild-animation/eye-lid-top-right.8fb9f328fa1f.png");
content: "";
height: 48px;
left: 45px;
opacity: 0;
position: absolute;
top: 56px;
width: 48px;
}
#tracking-protection-animation .critter.top-left::after {
animation: 10s linear 0s normal none infinite running recorder;
background-color: #ff397e;
border-radius: 100%;
content: "";
height: 8px;
left: 24px;
opacity: 0;
position: absolute;
top: 76px;
width: 8px;
}
#tracking-protection-animation .critter.top-left {
background-image: url("https://mozorg.cdn.mozilla.net//media/img/firefox/tracking-protection/sheild-animation/critter-top-left.e4cd620eeb90.png");
height: 129px;
left: 0;
top: 0;
width: 122px;
}
#tracking-protection-animation .critter {
background-position: left top;
background-repeat: no-repeat;
position: absolute;
z-index: -1;
}
#keyframes recorder {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
21% {
opacity: 1;
}
80% {
opacity: 1;
}
81% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes blink {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
41% {
opacity: 1;
}
42% {
opacity: 1;
}
43% {
opacity: 0;
}
75% {
opacity: 0;
}
76% {
opacity: 1;
}
77% {
opacity: 1;
}
78% {
opacity: 0;
}
100% {
opacity: 0;
}
}