CSS transition works only with one element [duplicate]

CSS transition works only with one element [duplicate] - javascript

This question already has answers here:
Why does querySelector only select the first element and how can I fix this?
(4 answers)
Closed 1 year ago.
I have been trying to make a working phone for a school project. In HTML. Now, I added a class with JS with the following:
document.querySelector(".app-content").classList.add("app-on");
Now, the class .app-on changes the width, height and font-size of my div. It has a transition built in. However, the width and height instantly pop up, while the font-size transitions just like i wanted.
.app-content is the class I am focusing on. The one I have added the animation to is the first one of that class to appear in the code
The full code for reference:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&display=swap" rel="stylesheet">
</head>
<body onload="startTime()">
<!-- phone -->
<div id="phone-border">
<!-- screen -->
<div id="phone-screen">
<p id="time" style="font-weight: 600; font-size: 30px; float: left; color: white; padding: 10px;"></p>
<div id="app-container">
<div class="app-wrapper" style="z-index: 10000;">
<img src="https://img.icons8.com/ios/452/coronavirus--v1.png" class="app-icon" style="left: 10%; top 60%" onclick="openMA()">
<div class="app top-app left" href="#">Malware-Arten</div>
<div class="app-content" style="position: absolute; left: 0; color: black;">asdasdfasdfasdfasdf</div>
</div>
<div class="app-wrapper">
<img src="https://www.freeiconspng.com/thumbs/shield-png/shield-png-1.png" class="app-icon" style="right: 15%; top 60%" onclick="openS()">
<div class="app top-app right" href="#">Schutz</div>
<div class="app-content"></div>
</div>
<div class="app-wrapper">
<img src="https://www.freeiconspng.com/thumbs/youtube-logo-png/hd-youtube-logo-png-transparent-background-20.png" class="app-icon" style="left: 10%; bottom: 17%" onclick="openYT()">
<div class="app bottom-app left" href="#">Youtube-Info</div>
<div class="app-content"></div>
</div>
<div class="app-wrapper">
<img src="https://www.designbust.com/download/1024/png/email_icon_transparent512.png" class="app-icon" style="right: 15%; bottom: 17%" onclick="openM()">
<div class="app bottom-app right" href="#">E-Mail</div>
<div class="app-content"></div>
</div>
</div>
<div class="blackscreen">
</div>
</div>
<!-- /screen -->
<!-- homebutton -->
<div style="position: fixed;">
<button class="pushable homebutton" id="hb">
<div class="front home-front">
</div>
</button>
</div>
<!-- /homebutton -->
</div>
<!-- /phone -->
</body>
<script type="text/javascript" src="script.js"></script>
</html>
CSS here:
I have marked the class with a comment.
#import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
body {
background: #2c2b30;
font-family: "Open Sans", Arial, Helvetica, sans-serif;
font-weight: 900;
color: #f58f7c;
letter-spacing: 1px;
display: flex;
align-items: center;
justify-content: center;
}
#phone-border{
width: 360px;
height: 630px;
background: #4f4f51;
margin: auto;
padding-top: 60px;
border-radius: 20px;
border-bottom: 13px solid #303030;
border-left: 13px solid #404040;
}
#phone-screen {
width: 92%;
height: 84%;
background: #f58f7c;
margin: auto;
position: relative;
}
#app-container {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
height: 63%;
}
.app-icon {
position: absolute;
width: 100px; height: 100px;
border-radius: 10px;
border: 3px solid #000;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
}
.app-icon:hover {
transform: translateY(-10px);
}
.app {
color: #414b41;
margin: auto;
}
.top-app {
position: absolute;
bottom: 60%;
}
.bottom-app {
position: absolute;
bottom: 10%;
}
.left {
left: 6%;
}
.right {
right: 21%;
}
.app-content {
background: #404040;
font-size: 0;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.app-on { /* -----------------------THIS-------------------------*/
font-size: 15px;
width: 100px;
height: 100px;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.blackscreen {
width: 100%;
height: 100%;
background: #000;
margin: auto;
position: absolute;
z-index: 2;
transition: all 0.5s;
}
.fade {
background: transparent;
transition: 1s;
}
.phone-on {
box-shadow: 0px 0px 30px #f58f7c;
transition: 1.2s;
}
.homebutton {
width: 60px;
height: 60px;
background: #404040;
border-radius: 100px;
border: none;
padding: 0;
cursor: pointer;
outline-offset: 4px;
transition: all 0.5s;
position: fixed;
left: 48%;
top: 82%;
margin-top: 20px;
}
.home-front {
display: block;
padding-top: 60px;
border-radius: 100px;
font-size: 1.25rem;
background: #202020;
color: white;
transform: translateY(-6px);
position: relative;
left: 3px;
}
.homebutton:hover .front {
transform: translateY(-8px);
left: 4px;
transition: 0.08s;
}
.homebutton:active .front {
transform: translateY(-2px);
left: 1px;
transition: 0.08s;
}
JS here:
var on = false;
var homeButton = document.getElementById("hb");
homeButton.onclick = function(){
if (on==false) {
document.querySelector(".blackscreen").style.backgroundColor = "transparent";
document.getElementById("phone-screen").classList.add('phone-on');
on=true;
setTimeout(function(){document.querySelector(".blackscreen").style.zIndex = "-10";},500);
}
else if(on==true) {
console.log(123);
}
}
function openMA() {
console.log("Malware-Arten")
var malwareArten = true;
document.querySelector(".app-content").classList.add("app-on");
}
function openS() {
console.log("Schutz")
var schutz = true;
}
function openYT() {
console.log("YT")
var yt = true;
}
function openM() {
console.log("Mail")
var mail = true;
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById("time").innerHTML = h + ":" + m + ":" + s;
var t = setTimeout(startTime, 1000);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}

document.querySelector only returns one element. You want to use document.querySelectorAll for multiple elements, along with a loop to do this.
document.querySelector(".app-content").forEach((ele) => ele.classList.add("app-on"));

The default width and height of a div is auto and you cannot transition from an auto property to a pixel value. Try adding width: 0; height: 0; to the .app-content class.

Related

When mySwitch is untoggled/unchecked, the toggle/checked no longer works, doesn't change my background again

I have 2 toggle switches, the problem I have is sperating each toggle switches to do their own thing. I'm unable to, in javascript, to make a if/else statement for my 2nd toggle switch.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Asignment 3</title>
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/136/136724.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="RainbowId">
<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a><label class="switch"><input type="checkbox"><div class="slider round"><div id="text">OFF</div></div></label></a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a><label class="switch2"><input type="checkbox2"><div class="slider2 round2"><div id="text2">OFF</div></div></label></a>
</div>
<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>
</body>
</html>
the first if statement for the frist switch works but when I copy the code i couldn't make an ID for the CHECKBOX for javascript and CSS.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
}
document.addEventListener('DOMContentLoaded', function () {
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function () {
if (checkbox.checked) {
RainbowId.classList.toggle('Rainbow');
document.getElementById('text').innerHTML = 'ON';
}
else {
RainbowId.classList.toggle("Rainbow");
document.getElementById('text').innerHTML = 'OFF';
}
});
});
I gave the 2nd switch its own classes but couldn't give the CHECKBOX its own class.
/* Rainbow background*/
.Rainbow {
height: 100%;
width: 100%;
left:0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(#ff0000, #ff4000, #ff8000, #ffbf00, #ffff00, #bfff00, #80ff00, #40ff00, #00ff00, #00ff40, #00ff80, #00ffbf, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff, #4000ff, #8000ff, #bf00ff, #ff00ff, #ff00bf, #ff0080, #ff0040, #ff0000);
position: absolute;
background-size: 1800% 1800%;
-webkit-animation: rainbow 3s ease infinite;
animation: rainbow 3s ease infinite;
}
#keyFrames rainbow {
0%{background-position:0% 82%}
25%{background-position: 50% 9.5%}
50%{background-position:100% 19%}
75%{background-position: 75% 41%}
100%{background-position:0% 82%}
}
/* Sidebar Styles */
.sidebar {
height: 100%;
width: 0;
position: fixed;
top: 0;
left: 0;
background: grey;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
overflow-x: hidden;
transition: 1s;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
white-space: nowrap;
transition: 0.3s;
}
.closebtn {
cursor: pointer;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 40px;
}
.openbtn {
font-size: 40px;
cursor: pointer;
border: none;
background: none;
}
.openbtn:hover {
opacity: 50%;
}
br {
user-select: none;
}
/* Toggle Switch Styles */
.switch {
position: absolute;
width: 60px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.switch input {
display:none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.switch #text {
user-select: none;
position: absolute;
left: 60px;
margin-left: 10px;
}
/*Toogle Switch 2*/
.switch2 {
position: absolute;
width: 60px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}
.switch2 input {
display:none;
}
.slider2 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider2:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
input:checked + .slider2 {
background-color: #2196F3;
}
input:focus + .slider2 {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider2:before {
transform: translateX(26px);
}
.slider2.round2 {
border-radius: 34px;
}
.slider2.round2:before {
border-radius: 50%;
}
.switch2 #text2 {
user-select: none;
position: absolute;
left: 60px;
margin-left: 10px;
}

Change your code as follows - use querySelectorAll to find all .checkbox
You'll see that both id="text" (and text2) are now class="text" this is important, since we can get the parent of the clicked checkbox and use querySelector to find the appropriate text
document.addEventListener('DOMContentLoaded', function() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
checkbox.parentElement.querySelector('.text').innerHTML =
checkbox.checked ? 'ON' : 'OFF';
if (this.dataset.action === 'rainbow') {
RainbowId.classList.toggle('Rainbow');
} else {
console.log('DO NOT TOUCH as TOUCHED');
}
});
});
});
I also tidied the code a bit to be more DRY
And your html - I've put line breaks in to make it readable, but I know that may cause issues, but at least you can see easily what has changed
<div id="RainbowId">
<div id="mySidebar" class="sidebar">
<a class="closebtn" onclick="closeNav()">×</a>
<a>RAINBOW MODE</a>
<a>
<label class="switch">
<input type="checkbox" data-action="rainbow">
<div class="slider round">
<!-- added class here -->
<div id="text" class="text">OFF</div>
</div>
</label>
</a>
<a><br></a>
<a><br></a>
<a>DO NOT TOUCH</a>
<a>
<label class="switch2">
<input type="checkbox" data-action="not a rainbow">
<div class="slider2 round2">
<!-- added class here -->
<div id="text2" class="text">OFF</div>
</div>
</label>
</a>
</div>
<button class="openbtn" id="openBtnId" onclick="openNav()">⚙️</button>
</div>

The CSS animation only works once and doesn't work after that

I'm working on a slideShow and I'm trying to make .slidesTextes have a translation from the bottom and an opacity change, all controlled by a button that call a JS function.
However, it only works once : when the page is fully loaded. I tried to find out why, but I'm stuck. All I can say is that when I use the console and type my JS code ligne by ligne, it works perfectly. But if I type the full JS code at once in the console, it doesn't work anymore...
Please find the code below :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta title="">
<link rel="stylesheet" href="styleSheet.css">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
</head>
<body>
<div class="slides">
<div class="slidesImages">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
</div>
<div class="slidesTextes">
<span class="slidesTitre"><h2>First title</h2></span>
<span class="slidesTitre"><h2>Second title</h2></span>
<span class="slidesTitre"><h2>Third title</h2></span>
<span class="slidesTitre"><h2>Forth title</h2></span>
</div>
<div class="slidesBoutons">
<span id="slidesNumeros">1/4</span>
<a class="fleche" onclick="changeSlide(-1);"><</a>
<a class="fleche" onclick="changeSlide(1);">></a>
<a class="appelAction" href="https://tout-pres-de-chez-moi.fr/pages/demander-une-livraison-a-domicile">Button/link →</a>
</div>
</div>
</body>
</html>
Here is the script I use:
<script>
var numeroSlide=1;
afficherSlide(numeroSlide);
function changeSlide(numero){
numeroSlide=numeroSlide+numero;
if(numeroSlide<1){numeroSlide=4;}
if(numeroSlide>4){numeroSlide=1;}
afficherSlide(numeroSlide);
}
function afficherSlide(numeroSlide){
listImages=document.getElementsByClassName("image");
listTitres=document.getElementsByClassName("slidesTitre");
for(i=0;i<listImages.length;i++){
listImages[i].style.display="none";
listTitres[i].style.display="none";
}
listImages[numeroSlide-1].style.display="";
listTitres[numeroSlide-1].style.display="";
document.getElementById("slidesNumeros").innerHTML=numeroSlide+"/"+listImages.length;
apparaitre();
}
function apparaitre(){
document.getElementsByClassName("slidesTextes")[0].style.display="none";
document.getElementsByClassName("slidesTextes")[0].style.display="";
}
</script>
And here is the CSS file:
margin: 0px;
padding: 0px;
}
.slides{
height: 100vh;
position: absolute;
}
.slidesImages{
width: 100vw;
max-width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slidesImages img{
width: 102%;
min-width: 1000px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: slideChange;
animation-duration: 1s;
}
#keyframes slideChange{
from{opacity: 0;}
to{opacity: 1;}
}
.slidesTextes{
font-family: serif;
font-size: 7vh;
font-weight: bold;
color: white;
position: absolute;
bottom: 25vh;
left: 8%;
animation: apparition 1s;
border: 1px solid red;
}
#keyframes apparition{
from{opacity: 0;bottom: 0vh;}
to{opacity:1;bottom: 25vh;}
}
.slidesTextes h2{
display: inline;
background-color: #f4743c;
padding: 0 1vw;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.slidesBoutons{
position: absolute;
bottom: 15%;
left: 8%;
width: 90%;
margin: 0.5vh 0;
}
.slidesBoutons *{
background-color: #29893f;
color: white;
font-family: sans-serif;
font-weight: bold;
font-size: 2.5vh;
float: left;
box-sizing: border-box;
height: 7vh;
line-height: 7vh;
padding: 0 1.5vw;
margin: 0 0.1vw;
text-decoration: none;
}
.slidesBoutons span{
opacity: 0.8;
}
.slidesBoutons a:hover{
background-color: #39994f;
cursor: pointer;
transition: 0.3s ease;
}

The browser is acting correctly; the animation is only triggered when the node renders, and it renders once. You have to remove the animation and re-add it whenever an arrow button gets clicked. The easiest way is to make it its own class (run code snippet):
var numeroSlide = 1;
afficherSlide(numeroSlide);
function changeSlide(numero) {
animation = document.getElementsByClassName("animation")[0];
animation.classList.remove("animation");
setTimeout(()=> animation.classList.add("animation"),0);
numeroSlide = numeroSlide + numero;
if (numeroSlide < 1) {
numeroSlide = 4;
}
if (numeroSlide > 4) {
numeroSlide = 1;
}
afficherSlide(numeroSlide);
}
function afficherSlide(numeroSlide) {
listImages = document.getElementsByClassName("image");
listTitres = document.getElementsByClassName("slidesTitre");
for (i = 0; i < listImages.length; i++) {
listImages[i].style.display = "none";
listTitres[i].style.display = "none";
}
listImages[numeroSlide - 1].style.display = "";
listTitres[numeroSlide - 1].style.display = "";
document.getElementById("slidesNumeros").innerHTML = numeroSlide + "/" + listImages.length;
apparaitre();
}
function apparaitre() {
document.getElementsByClassName("slidesTextes")[0].style.display = "none";
document.getElementsByClassName("slidesTextes")[0].style.display = "";
}
margin: 0px;
padding: 0px;
}
.slides{
height: 100vh;
position: absolute;
}
.slidesImages{
width: 100vw;
max-width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slidesImages img{
width: 102%;
min-width: 1000px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-name: slideChange;
animation-duration: 1s;
}
#keyframes slideChange{
from{opacity: 0;}
to{opacity: 1;}
}
.slidesTextes{
font-family: serif;
font-size: 7vh;
font-weight: bold;
color: white;
position: absolute;
bottom: 25vh;
left: 8%;
border: 1px solid red;
}
.animation {
animation: apparition 1s;
}
#keyframes apparition{
from{opacity: 0;bottom: 0vh;}
to{opacity:1;bottom: 25vh;}
}
.slidesTextes h2{
display: inline;
background-color: #f4743c;
padding: 0 1vw;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.slidesBoutons{
position: absolute;
bottom: 15%;
left: 8%;
width: 90%;
margin: 0.5vh 0;
}
.slidesBoutons *{
background-color: #29893f;
color: white;
font-family: sans-serif;
font-weight: bold;
font-size: 2.5vh;
float: left;
box-sizing: border-box;
height: 7vh;
line-height: 7vh;
padding: 0 1.5vw;
margin: 0 0.1vw;
text-decoration: none;
}
.slidesBoutons span{
opacity: 0.8;
}
.slidesBoutons a:hover{
background-color: #39994f;
cursor: pointer;
transition: 0.3s ease;
}
<body>
<div class="slides">
<div class="slidesImages">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
<img class="image" alt="" src="https://i.pinimg.com/originals/fe/e1/84/fee18481df61ce4220956dc8f44d09e8.jpg">
</div>
<div class="slidesTextes animation">
<span class="slidesTitre"><h2>First title</h2></span>
<span class="slidesTitre"><h2>Second title</h2></span>
<span class="slidesTitre"><h2>Third title</h2></span>
<span class="slidesTitre"><h2>Forth title</h2></span>
</div>
<div class="slidesBoutons">
<span id="slidesNumeros">1/4</span>
<a class="fleche" onclick="changeSlide(-1);"><</a>
<a class="fleche" onclick="changeSlide(1);">></a>
<a class="appelAction" href="https://tout-pres-de-chez-moi.fr/pages/demander-une-livraison-a-domicile">Button/link →</a>
</div>
</div>
</body>
html
<div class="slidesTextes animation">
javascript
animation = document.getElementsByClassName("animation")[0];
animation.classList.remove("animation");
setTimeout(()=> animation.classList.add("animation"),0);
css
.animation {
animation: apparition 1s;
}

On reload, show loading html page and redirect to the correct page

I'm trying to build a website and am facing serious trouble with the following. So let's say that the user reloads or clicks on a link to another page on the site, I want to show the loading page before we arrive at the page we are looking to go to. Here's my code and I really am having some trouble. Any suggestions would be much appreciated, but I would really like to do this without adding or removing too much. I tried to play around with the javascript but alas, it did not work. If you have suggestions about that, please let me know as well. Thank you so much!
index.html
<!DOCTYPE html>
<meta charset = 'UTF-8'>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "styles.css">
<link rel = "stylesheet" href = "animate.css">
<head>
<script src = "scripts.js"></script>
<a href="#">
<img class = "animated zoomIn" src = "image.png">
</a>
<div id = "navbar" class = "overlay">
×
<div class = "overlay-content">
Home
About Us
Gallery
The Podcast
More
Merch
Appearances
Contact Us
We're Hiring!
<div class = "line"></div>
</div>
</div>
<div class = "animated slideInLeft" style = "text-align: center;">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">
☰ Open Me!
</span>
</div>
</head>
<body>
<h1 style ="text-align:center">
</body>
styles.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#font-face {
font-family: Paintball;
font-weight: bold;
src: url(paintball_web.woff);
}
/* Header Properties */
body{
background-color: navy;
font-family: Paintball;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
/*Navigation Bar Properties */
.overlay {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
text-align: center;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
div span{
color:#42f459;
}
/* Loader Properties */
.wrap {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.text {
color: #42f459;
display: inline-block;
margin-left: 5px;
}
.bounceball {
position: relative;
display: inline-block;
height: 37px;
width: 15px;
}
.bounceball:before {
position: absolute;
content: '';
display: block;
top: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #42f459;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: bounce 500ms alternate infinite ease;
animation: bounce 500ms alternate infinite ease;
}
#-webkit-keyframes bounce {
0% {
top: 30px;
height: 5px;
border-radius: 60px 60px 20px 20px;
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
35% {
height: 15px;
border-radius: 50%;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
top: 0;
}
}
#keyframes bounce {
0% {
top: 30px;
height: 5px;
border-radius: 60px 60px 20px 20px;
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
35% {
height: 15px;
border-radius: 50%;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
100% {
top: 0;
}
}
Welcome.html
<!DOCTYPE html>
<meta charset = 'UTF-8'>
<meta http-equiv="Refresh" content="4; url=index.html" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "styles.css">
<div class="wrap">
<div class="loading">
<div class="bounceball"></div>
<div class="text">NOW LOADING</div>
</div>
</div>
scripts.js
function openNav() {
document.getElementById("navbar").style.width = "100%";
}
function closeNav() {
document.getElementById("navbar").style.width = "0%";
}
document.addEventListener('DOMContentLoaded',function(){
if(document.readyState === 'complete'){
alert("loaded");
}
}
)
document.addEventListener('readystatechange',function(){
if (document.readystate === 'loading'){
window.location = "Welcome.html";
}
}
)

Clicking on an element is triggering all the same class instead of the one clicked on

I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.
The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.
Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?
var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
'<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
// old $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
$(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
// old $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
$('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
$('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
$('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
$('.catalogCircleExpand').hide().removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
border: 2px solid #FFF;
webkit-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right, #225DB8, #4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s;
transition: all 1s;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
<div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.
I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.
$('.smallCatalogBlock').each(function(index, catalogBlock){
var catalogName = $(catalogBlock).data('fill-specs');
console.log(catalogName);
//Filling Circle
$('.catalogSmallCircle', catalogBlock).html(
'<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
});
//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.addClass('rectangle')
.find('.catalogSmallCircleIn')
.hide();
$smallCircle
.find('.catalogCircleExpand')
.fadeIn(100)
.addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
console.log(catalogChoice);
$smallCircle.find('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.removeClass('rectangle')
.find('.catalogSmallCircleIn')
.fadeIn();
$smallCircle
.find('.catalogCircleExpand')
.hide()
.removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.9);
border: 2px solid #FFF;
webkit-transition: all 1s;transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right,#225DB8,#4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>

Closing a Lightbox Window by Clicking on the Background Area?

I have developed a lightbox feature which I am trying to figure out how to close the lightbox preview window by clicking on the background area behind the image displayed, (while keeping the image unaffected).
Here's a demo snippet. There's a button toggle control at the upper, right-hand corner to close the lightbox window, but I would like to be able to close the window by clicking on the background area surrounding the image as well. Any input?
UPDATE: The Solution
Finally got this working, thanks to Marouen Mhiri. Updated my original snippet here:
var $scrollTop = 0;
$('.pic > img').click(function() {
var $body = $('body');
$scrollTop = $(window).scrollTop();
$body.css('position', 'fixed');
$body.css('top', '-' + $scrollTop + 'px');
$body.css('background-position', '0 -' + $scrollTop + 'px');
var srcToCopy = $(this).attr('src');
$body.find('.imgsrc').attr('src', srcToCopy);
$body.addClass('no-scroll');
$('#view').addClass("target");
});
$('#customlightbox-controls').on('click', function() {
var $body = $('body');
$body.css('position', '');
$body.css('background-position', '');
$scrollTop = $(window).scrollTop($scrollTop);
$body.removeClass('no-scroll');
$('#view').removeClass("target");
});
$('.customlightbox-imgwrap').on('click', function(e) {
if(!$(e.target).hasClass('imgsrc')){
var $body = $('body');
$body.css('position', '');
$body.css('background-position', '');
$scrollTop = $(window).scrollTop($scrollTop);
$body.removeClass('no-scroll');
$('#view').removeClass("target");
}
});
body {
background-color: #58d68d;
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
height: auto;
width: 100%;
}
.pic,
#imgsrc {
display: inline-block;
cursor: pointer;
}
img {
width: 150px
}
a {
display: inline-block;
line-height: 0;
}
.container {
text-align: center;
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
cursor: pointer;
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox.target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox.target img {
opacity: 1;
}
.customlightbox.target~#customlightbox-controls {
top: -3px;
}
.customlightbox.target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox.target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</div>
<!-- Lightbox Instance 4 -->
<div class="container">
<div class="pic">
<img src="http://i2.wp.com/lfisdelhi.com/wp-content/uploads/2016/05/Sunflower-icon.png">
</div>
</div>
<!-- Lightbox Instance 5 -->
<div class="container">
<div class="pic">
<img src="http://icongal.com/gallery/image/203372/birthday_flower_love_valentine_yellow_rose.png">
</div>
</div>
<!-- Lightbox Controls -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate"></a>
</div>
This question stems from a previous question, answered here.

just use the click event of the div containing the lightbox and fire the event only if the clicked area doesn't contain the image:
$('.customlightbox-imgwrap').on('click', function(e) {
if(!$(e.target).hasClass('imgsrc')){ // check if target is not the image displayed
var $body = $('body');
$body.css('position', '');
$body.css('background-position', '');
$scrollTop = $(window).scrollTop($scrollTop);
$body.removeClass('no-scroll');
$('#view').removeClass("target");
}
});

Hiding the lightbox by clicking on the background
It is possible by adding #view to the following code.
Before
$('#customlightbox-controls').on('click', function()
After
$('#customlightbox-controls, #view').on('click', function()
var $scrollTop = 0;
$('.pic > img').click(function() {
var $body = $('body');
$scrollTop = $(window).scrollTop();
$body.css('position', 'fixed');
$body.css('top', '-' + $scrollTop + 'px');
$body.css('background-position', '0 -' + $scrollTop + 'px');
var srcToCopy = $(this).attr('src');
$body.find('.imgsrc').attr('src', srcToCopy);
$body.addClass('no-scroll');
$('#view').addClass("target");
});
$('#customlightbox-controls, #view').on('click', function() {
var $body = $('body');
$body.css('position', '');
$body.css('background-position', '');
$scrollTop = $(window).scrollTop($scrollTop);
$body.removeClass('no-scroll');
$('#view').removeClass("target");
});
body {
background-color: #58d68d;
margin: 0;
padding: 0;
border: 0;
height: 100%;
width: 100%;
}
body.no-scroll {
overflow: hidden;
height: auto;
width: 100%;
}
.pic,
#imgsrc {
display: inline-block;
cursor: pointer;
}
img {
width: 150px
}
a {
display: inline-block;
line-height: 0;
}
.container {
text-align: center;
display: block;
width: 100%;
line-height: 0;
}
.customlightbox {
top: 0%;
bottom: 0%;
box-sizing: border-box;
position: fixed;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
z-index: -5;
opacity: 0;
}
.customlightbox-imgwrap {
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.customlightbox img {
width: auto;
margin: auto;
max-width: 100%;
max-height: 100%;
opacity: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#customlightbox-controls {
cursor: pointer;
box-sizing: border-box;
position: fixed;
height: 50px;
width: 50px;
top: -50px;
right: -3px;
z-index: 5;
border-left: 2px solid white;
border-bottom: 2px solid white;
opacity: .7;
}
#close-customlightbox {
display: block;
position: absolute;
overflow: hidden;
height: 30px;
width: 30px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-customlightbox:before {
content: "";
display: block;
position: absolute;
height: 0px;
width: 2px;
left: 14px;
top: 0;
background: white;
border-radius: 2px;
}
#close-customlightbox:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 2px;
top: 14px;
left: 0;
background: white;
border-radius: 2px;
}
.customlightbox.target {
z-index: 4;
opacity: 1;
display: inline-block;
}
.customlightbox.target img {
opacity: 1;
}
.customlightbox.target~#customlightbox-controls {
top: -3px;
}
.customlightbox.target~#customlightbox-controls #close-customlightbox:after {
width: 30px;
}
.customlightbox.target~#customlightbox-controls #close-customlightbox:before {
height: 30px;
}
.lb-animate {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-ms-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Lightbox Instance 1 -->
<div class="container">
<div class="pic">
<img src="https://syedimranrocks.files.wordpress.com/2012/09/flower01low1.png">
</div>
</div>
<!-- Lightbox Instance 2 -->
<div class="container">
<div class="pic">
<img src="http://downloadicons.net/sites/default/files/Rose-Coral-Icon-906534.png">
</div>
</div>
<!-- Lightbox Instance 3 -->
<div class="container">
<div class="pic">
<img src="https://images.vexels.com/media/users/3/136645/isolated/lists/54b1517db1906889a6971939de45d2a8-purple-sunflower-cartoon.png">
</div>
</div>
<!-- Lightbox Instance 4 -->
<div class="container">
<div class="pic">
<img src="http://i2.wp.com/lfisdelhi.com/wp-content/uploads/2016/05/Sunflower-icon.png">
</div>
</div>
<!-- Lightbox Instance 5 -->
<div class="container">
<div class="pic">
<img src="http://icongal.com/gallery/image/203372/birthday_flower_love_valentine_yellow_rose.png">
</div>
</div>
<!-- Lightbox Controls -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate"></a>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

CSS transition works only with one element [duplicate] - javascript

document.querySelector only returns one element. You want to use document.querySelectorAll for multiple elements, along with a loop to do this. document.querySelector(".app-content").forEach((ele) => ele.classList.add("app-on"));

The default width and height of a div is auto and you cannot transition from an auto property to a pixel value. Try adding width: 0; height: 0; to the .app-content class.

Related

When mySwitch is untoggled/unchecked, the toggle/checked no longer works, doesn't change my background again

The CSS animation only works once and doesn't work after that

On reload, show loading html page and redirect to the correct page

Clicking on an element is triggering all the same class instead of the one clicked on

Closing a Lightbox Window by Clicking on the Background Area?

Categories

Resources