Develop Reference

Show a message if a text is copied successfully(alternative to alert)

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)

Image dependent on link

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.

Is it possible to link progressive web app to toast

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.

Smoothly animate background color opacity after underlying image loads

I have a div with a black background. When my page loads, I make a call for an image and then load that image into a div behind the main div. Then I want to smoothly fade the overlaying div to have an opacity so that the image underneath is displayed, but without impacting the opacity of content in the overlaying div.
What I have isn't really working at all: https://jsfiddle.net/n7t2xmha/3/
The animation is not smooth
The opacity is not accurate
The text does not stay solid
Code:
<div class="outerdiv">
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>
.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.outerdiv-opaque {
opacity: 0.9 !important;
}
.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index=-1;
}
JS
var innerDiv = $('.innerdiv');
setTimeout(function() {
innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)');
var outerdiv = $('.outerdiv');
setTimeout(function() {
outerdiv.addClass('outerdiv-opaque');
}, 500);
}, 1000)

Separate the timeouts functions.
modify the .outerdiv-opaque class
.outerdiv-opaque {
background-color: white;
}
your timeOut functions after separating would look like this
var innerDiv = $('.innerdiv');
setTimeout(function() {
innerDiv.css('background-image', 'url(http://i.stack.imgur.com/MxR09.png)');
}, 1000)
var outerdiv = $('.outerdiv');
setTimeout(function() {
outerdiv.addClass('outerdiv-opaque');
}, 500);

I would use a pseudo, like this, which will keep your markup as is and as the opacity is on the pseudo it won't effect any other element.
Instead of a script, I used an extra step on the animation, where I told it to keep its opacity at 1 up until 60% of the animation time before it should start to fade.
.outerdiv {
position: relative;
height: 500px;
width: 500px;
color: white;
background: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv::before {
content: '';
background-color: black;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0.5;
animation: fade 2s linear;
}
.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
p {
position: relative;
}
#keyframes fade {
0% { opacity:1 }
60% { opacity:1 }
100% { opacity:0.5 }
}
<div class="outerdiv">
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>

There are literally a dozen ways to do this. Here are four basic examples which work smoothly.
Using CSS Transitions
HTML:
<div class="container">
<div class="outerdiv">
</div>
<div class="innerdiv">
</div>
<p>
content - should remain solid white
</p>
</div>
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
transition: .5s opacity linear;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv.fadeout{
opacity:0
}
.container p{
position:relative;
z-index:3;
}
JS:
// wait 1 second, add the fadeout class, let the CSS do the rest
setTimeout(function(){
document.querySelector('.outerdiv').classList.add('fadeout')
},1000);
See it in action: https://jsfiddle.net/kmm8e0x7/8/
Using CSS Animation
HTML: same as above
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.outerdiv{
animation: fadeout .5s linear forwards 1s;
/*
Which is shorthand for:
animation-name: fadeout
animation-duration: .5s;
animation-timing-function: linear
animation-fill-mode:forwards;
animation-delay: 1s
*/
}
.container p{
position:relative;
z-index:3;
}
#keyframes fadeout{
from{opacity:1}
to{opacity:0}
}
JS: none (animation-delay property removes the need for setTimeout)
See it in action: https://jsfiddle.net/kmm8e0x7/7/
Using JavaScript
HTML: as above
CSS:
.container,.outerdiv {
background-color: black;
position: relative;
display: block;
height: 500px;
width: 500px;
color: white;
}
.outerdiv,.innerdiv {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.outerdiv{
z-index:1;
transition: .5s opacity linear;
}
.innerdiv{
background-image: url(http://i.stack.imgur.com/MxR09.png);
}
.container p{
position:relative;
z-index:3;
}
JS:
var el = document.querySelector('.outerdiv');
function fadeout(){
el.style.opacity -= 0.01;
if(el.style.opacity !== 0){
requestAnimationframe(fadeout);
// this could just as easily be setTimeout(fadeout,t) where t = an increment of time after which to call the next frame
}
}
// just use setTimeout to wait for 1 second before starting the fadeout
setTimeout(fadeout,1000);
See it in action: https://jsfiddle.net/kmm8e0x7/6/
Using jQuery
HTML: same as above
CSS: same as above
JS:
$('.outerdiv').animate({
'opacity': '0'
}, 500);
See it in action: https://jsfiddle.net/kmm8e0x7/5/

How does Mozilla create this animated effect?

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;
}
}