Develop Reference

Why does my forloop and querySelectorAll dont work with multiple div's of the same class?

Basically I'm trying to make multiple draggable div's with a script. It works fine for 1 div like this:
https://jsfiddle.net/werwer/3zvqm2sa/1/
where I have aquerySelector that gets one class name.
I wish to make multiple draggable divs, sort of like a windows computer. So used a querySelectorAll, put my eventListeners into a forloop to loop through the array, and selected the array item one by one like this:
https://jsfiddle.net/werwer/0n5eLmfv/11/
It completely removed the ability to move all the divs (including the one that originally can move). So I placed a console.log to check if my mouse up and down works for both divs. Here's the fun part: the mouseup and down check worked for the original black div (the one that supposedly can move), but could only detect mouse up for the new white div. So I'm not exactly sure what is going on.
var wrapper = document.querySelectorAll(".panel");
for (i = 0; i < wrapper.length - 1; i++) {
/* multiple event listeners for mouse up and down */
wrapper[i].addEventListener("mousedown", () => {
wrapper[i].classList.add("active");
wrapper[i].addEventListener("mousemove", onDrag);
console.log("check mouse down"); /* checking mouse down */
});
document.addEventListener("mouseup", () => {
wrapper[i].classList.remove("active");
wrapper[i].removeEventListener("mousemove", onDrag);
console.log("check mouse up"); /* checking mouse down */
});
}
/* what moves the divs */
function onDrag({ movementX, movementY }) {
let getStyle = window.getComputedStyle(wrapper);
let leftVal = parseInt(getStyle.left);
let topVal = parseInt(getStyle.top);
wrapper.style.left = `${leftVal + movementX}px`;
wrapper.style.top = `${topVal + movementY}px`;
}
.projects {
display: flex;
width: 100%;
height: 125vh;
background-image: url(images/laptop.png);
background-position: 100%;
background-position-y: center;
background-position-x: center;
background-size: 95%;
background-repeat: no-repeat;
}
.gamedev-panel {
position: absolute;
top: 3rem;
left: 16rem;
width: 40rem;
height: 30rem;
background-color: #403d39;
}
.gamedev-titlebar {
height: 3rem;
background: #EB5E28;
display: flex;
align-items: center;
justify-content: right;
}
.btn-1 {
background: turquoise;
}
.btn-2 {
background: yellow;
}
.btn-3 {
background: red;
}
.game-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-right: 1rem;
}
.gamedev-heading {
background: none;
position: absolute;
/* width: 369.43px;
height: 40.32px;
left: 408.26px;
top: 2592.77px; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #CCC5B9;
pointer-events: none;
}
.gamedev-gif {
position: absolute;
bottom: 1rem;
right: 1rem;
pointer-events: none;
}
.webdev-panel {
position: absolute;
top: 1rem;
right: 16rem;
width: 25rem;
height: 30rem;
background-color: #fffcf2;
display: inline-flex;
justify-content: flex-end;
overflow: hidden;
}
.webdev-titlebar {
/* position: absolute; */
height: 30rem;
width: 3rem;
background: #EB5E28;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
pointer-events: none;
}
.web-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-top: 1rem;
/* margin-right: 1rem; */
pointer-events: none;
}
.webdev-heading {
background: none;
/* position: absolute;
right: 5rem; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #252422;
pointer-events: none;
}
.webdev-content {
margin-right: 1rem;
pointer-events: none;
}
.webdev-img {
width: 80%;
height: 80%;
position: absolute;
right: 4rem;
top: 5rem;
pointer-events: none;
<div class="projects">
<div class="gamedev-panel panel">
<div class="gamedev-titlebar">
<div class="btn-1 game-btn"></div>
<div class="btn-2 game-btn"></div>
<div class="btn-3 game-btn"></div>
</div>
<h2 class="gamedev-heading">I DEVELOP GAMES</h2>
<img src="images/game.gif" alt="" class="gamedev-gif">
</div>
<div class="webdev-panel panel">
<div class="webdev-content">
<h2 class="webdev-heading">I MAKE WEBSITES</h2>
<img src="images/web.png" alt="" class="webdev-img">
</div>
<div class="webdev-titlebar">
<div class="btn-1 web-btn"></div>
<div class="btn-2 web-btn"></div>
<div class="btn-3 web-btn"></div>
</div>
</div>
<div class="others-panel"></div>
</div>

your code needs some changes.
don't use variable i in a function inside a loop. variables are all refrence.
don't use arrow function to access this pointer of current element
change your wrapper[i] in onDrag to this like above
add user-select:none inside the .panel to be not selectable in css
add mouse out event to current element for the time the mouse jumped out of the screen and the mouseup doesn't fire
var wrapper = document.querySelectorAll(".panel");
for (i = 0; i < wrapper.length; i++) {
wrapper[i].addEventListener("mousedown",function () {
this.classList.add("active");
this.addEventListener("mousemove", onDrag);
});
wrapper[i].addEventListener("mouseup",function () {
this.classList.remove("active");
this.removeEventListener("mousemove", onDrag);
});
wrapper[i].addEventListener("mouseout",function () {
this.removeEventListener("mousemove", onDrag);
});
}
function onDrag({
movementX,
movementY
}) {
let getStyle = window.getComputedStyle(this);
let leftVal = parseInt(getStyle.left);
let topVal = parseInt(getStyle.top);
this.style.left = `${leftVal + movementX}px`;
this.style.top = `${topVal + movementY}px`;
}
.panel {
user-select: none;
}
.projects {
display: flex;
width: 100%;
height: 125vh;
background-image: url(images/laptop.png);
background-position: 100%;
background-position-y: center;
background-position-x: center;
background-size: 95%;
background-repeat: no-repeat;
}
.gamedev-panel {
position: absolute;
top: 3rem;
left: 16rem;
width: 40rem;
height: 30rem;
background-color: #403d39;
}
.gamedev-titlebar {
height: 3rem;
background: #EB5E28;
display: flex;
align-items: center;
justify-content: right;
}
.btn-1 {
background: turquoise;
}
.btn-2 {
background: yellow;
}
.btn-3 {
background: red;
}
.game-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-right: 1rem;
}
.gamedev-heading {
background: none;
position: absolute;
/* width: 369.43px;
height: 40.32px;
left: 408.26px;
top: 2592.77px; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #CCC5B9;
pointer-events: none;
}
.gamedev-gif {
position: absolute;
bottom: 1rem;
right: 1rem;
pointer-events: none;
}
.webdev-panel {
position: absolute;
top: 1rem;
right: 16rem;
width: 25rem;
height: 30rem;
background-color: #fffcf2;
display: inline-flex;
justify-content: flex-end;
overflow: hidden;
}
.webdev-titlebar {
/* position: absolute; */
height: 30rem;
width: 3rem;
background: #EB5E28;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
pointer-events: none;
}
.web-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-top: 1rem;
/* margin-right: 1rem; */
pointer-events: none;
}
.webdev-heading {
background: none;
/* position: absolute;
right: 5rem; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #252422;
pointer-events: none;
}
.webdev-content {
margin-right: 1rem;
pointer-events: none;
}
.webdev-img {
width: 80%;
height: 80%;
position: absolute;
right: 4rem;
top: 5rem;
pointer-events: none;
}
<div class="projects">
<div class="gamedev-panel panel">
<div class="gamedev-titlebar">
<div class="btn-1 game-btn"></div>
<div class="btn-2 game-btn"></div>
<div class="btn-3 game-btn"></div>
</div>
<h2 class="gamedev-heading">I DEVELOP GAMES</h2>
<img src="images/game.gif" alt="" class="gamedev-gif">
</div>
<div class="webdev-panel panel">
<div class="webdev-content">
<h2 class="webdev-heading">I MAKE WEBSITES</h2>
<img src="images/web.png" alt="" class="webdev-img">
</div>
<div class="webdev-titlebar">
<div class="btn-1 web-btn"></div>
<div class="btn-2 web-btn"></div>
<div class="btn-3 web-btn"></div>
</div>
</div>
<div class="others-panel"></div>
</div>

The upper bound of wrapper.length - 1 excludes the last .panel.
Additionally, there are various issues with variable bindings:
wrapper in onDrag is a NodeList, not an HTMLElement. onDrag must operate on a specific element of wrapper, rather than the whole collection.
since i isn't block-local and is updated in the loop, it will be the last value i takes (one past the loop end condition); wrapper[i] in the mouse event handlers will only ever refer to one thing. Declaring i with let will make it block-local, and wrapper[i] within the event handlers will then refer to the correct element.
Note that both the above binding issues are already covered by other questions on SO.

Please delegate
Here is an untested version since I am not on a proper device, but it gives the structure
In the onDrag we just test the active element if there is none, we could leave, but as I said, I cannot actually test this to conclusion
I use the same eventlistener for mouseup and down and then instead of add or remove I toggle active depending on the event. If mousedown, add active if up remove active (that is what toggle does)
I add the event listeners to the OUTER div, that wraps ALL the panels, and in the event handler, the e.target is (possibly inside) the panel. So to get the panel itself, I use.closest to make sure we are acting on the wrapper
const wrapper = document.querySelector(".projects");
/* what moves the divs */
const onDrag = ({ movementX, movementY }) => {
const wrapperPanel = wrapper.querySelector(".panel.active")
let getStyle = window.getComputedStyle(wrapperPanel);
let leftVal = parseInt(getStyle.left);
let topVal = parseInt(getStyle.top);
wrapperPanel.style.left = `${leftVal + movementX}px`;
wrapperPanel.style.top = `${topVal + movementY}px`;
}
const mouse = (e) => {
const tgt = e.target.closest(".panel");
if (tgt) tgt.classList.toggle("active",e.type=="mousedown");
};
wrapper.addEventListener("mousedown", mouse)
wrapper.addEventListener("mouseup", mouse)
wrapper.addEventListener("mousemove", onDrag);
.projects {
display: flex;
width: 100%;
height: 125vh;
background-image: url(images/laptop.png);
background-position: 100%;
background-position-y: center;
background-position-x: center;
background-size: 95%;
background-repeat: no-repeat;
}
.gamedev-panel {
position: absolute;
top: 3rem;
left: 16rem;
width: 40rem;
height: 30rem;
background-color: #403d39;
}
.gamedev-titlebar {
height: 3rem;
background: #EB5E28;
display: flex;
align-items: center;
justify-content: right;
}
.btn-1 {
background: turquoise;
}
.btn-2 {
background: yellow;
}
.btn-3 {
background: red;
}
.game-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-right: 1rem;
}
.gamedev-heading {
background: none;
position: absolute;
/* width: 369.43px;
height: 40.32px;
left: 408.26px;
top: 2592.77px; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #CCC5B9;
pointer-events: none;
}
.gamedev-gif {
position: absolute;
bottom: 1rem;
right: 1rem;
pointer-events: none;
}
.webdev-panel {
position: absolute;
top: 1rem;
right: 16rem;
width: 25rem;
height: 30rem;
background-color: #fffcf2;
display: inline-flex;
justify-content: flex-end;
overflow: hidden;
}
.webdev-titlebar {
/* position: absolute; */
height: 30rem;
width: 3rem;
background: #EB5E28;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
pointer-events: none;
}
.web-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-top: 1rem;
/* margin-right: 1rem; */
pointer-events: none;
}
.webdev-heading {
background: none;
/* position: absolute;
right: 5rem; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #252422;
pointer-events: none;
}
.webdev-content {
margin-right: 1rem;
pointer-events: none;
}
.webdev-img {
width: 80%;
height: 80%;
position: absolute;
right: 4rem;
top: 5rem;
pointer-events: none;
<div class="projects">
<div class="gamedev-panel panel">
<div class="gamedev-titlebar">
<div class="btn-1 game-btn"></div>
<div class="btn-2 game-btn"></div>
<div class="btn-3 game-btn"></div>
</div>
<h2 class="gamedev-heading">I DEVELOP GAMES</h2>
<img src="images/game.gif" alt="" class="gamedev-gif">
</div>
<div class="webdev-panel panel">
<div class="webdev-content">
<h2 class="webdev-heading">I MAKE WEBSITES</h2>
<img src="images/web.png" alt="" class="webdev-img">
</div>
<div class="webdev-titlebar">
<div class="btn-1 web-btn"></div>
<div class="btn-2 web-btn"></div>
<div class="btn-3 web-btn"></div>
</div>
</div>
<div class="others-panel"></div>
</div>

You're adding several mouseup event listeners to your document,you're iterating up to 2 indexes below the final length of your element array, and you're never declaring your i variable.
In your event mousemove listener, you're using the wrapper variable that you haven't redeclared from your previous code. You can use the target property from the event object to get the element calling your listener.
var wrapper = document.querySelectorAll(".panel");
for (let i = 0; i < wrapper.length; i++) {
/* multiple event listeners for mouse up and down */
wrapper[i].addEventListener("mousedown", () => {
wrapper[i].classList.add("active");
wrapper[i].addEventListener("mousemove", onDrag);
console.log("check mouse down"); /* checking mouse down */
});
function mouseMove() {
wrapper[i].classList.remove("active");
wrapper[i].removeEventListener("mousemove", mouseMove);
wrapper[i].removeEventListener("mousemove", onDrag);
console.log("check mouse up"); /* checking mouse down */
};
wrapper[i].addEventListener("mouseup", mouseMove);
}
/* what moves the divs */
function onDrag(event) {
let getStyle = window.getComputedStyle(event.target);
let leftVal = parseInt(getStyle.left);
let topVal = parseInt(getStyle.top);
event.target.style.left = `${leftVal + event.movementX}px`;
event.target.style.top = `${topVal + event.movementY}px`;
}
.projects {
display: flex;
width: 100%;
height: 125vh;
background-image: url(images/laptop.png);
background-position: 100%;
background-position-y: center;
background-position-x: center;
background-size: 95%;
background-repeat: no-repeat;
}
.gamedev-panel {
position: absolute;
top: 3rem;
left: 16rem;
width: 40rem;
height: 30rem;
background-color: #403d39;
}
.gamedev-titlebar {
height: 3rem;
background: #EB5E28;
display: flex;
align-items: center;
justify-content: right;
}
.btn-1 {
background: turquoise;
}
.btn-2 {
background: yellow;
}
.btn-3 {
background: red;
}
.game-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-right: 1rem;
}
.gamedev-heading {
background: none;
position: absolute;
/* width: 369.43px;
height: 40.32px;
left: 408.26px;
top: 2592.77px; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #CCC5B9;
pointer-events: none;
}
.gamedev-gif {
position: absolute;
bottom: 1rem;
right: 1rem;
pointer-events: none;
}
.webdev-panel {
position: absolute;
top: 1rem;
right: 16rem;
width: 25rem;
height: 30rem;
background-color: #fffcf2;
display: inline-flex;
justify-content: flex-end;
overflow: hidden;
}
.webdev-titlebar {
/* position: absolute; */
height: 30rem;
width: 3rem;
background: #EB5E28;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
pointer-events: none;
}
.web-btn {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
margin-top: 1rem;
/* margin-right: 1rem; */
pointer-events: none;
}
.webdev-heading {
background: none;
/* position: absolute;
right: 5rem; */
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 45px;
letter-spacing: 0.1em;
margin-left: 1rem;
color: #252422;
pointer-events: none;
}
.webdev-content {
margin-right: 1rem;
pointer-events: none;
}
.webdev-img {
width: 80%;
height: 80%;
position: absolute;
right: 4rem;
top: 5rem;
pointer-events: none;
<div class="projects">
<div class="gamedev-panel panel">
<div class="gamedev-titlebar">
<div class="btn-1 game-btn"></div>
<div class="btn-2 game-btn"></div>
<div class="btn-3 game-btn"></div>
</div>
<h2 class="gamedev-heading">I DEVELOP GAMES</h2>
<img src="images/game.gif" alt="" class="gamedev-gif">
</div>
<div class="webdev-panel panel">
<div class="webdev-content">
<h2 class="webdev-heading">I MAKE WEBSITES</h2>
<img src="images/web.png" alt="" class="webdev-img">
</div>
<div class="webdev-titlebar">
<div class="btn-1 web-btn"></div>
<div class="btn-2 web-btn"></div>
<div class="btn-3 web-btn"></div>
</div>
</div>
<div class="others-panel"></div>
</div>

Visually replace div when clicking outside

function replace( hide, show ) {
document.getElementById(hide).style.display="none";
document.getElementById(show).style.display="flex";
}
#import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Bebas+Neue&family=Inter:wght#100;200;300;400;600;700;800&family=Roboto:wght#300;400;700&family=VT323&display=swap');
body {
margin: 0;
padding: 0;
}
.all_guidebook {
width: 100%;
position: absolute;
min-height: 1000px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.title_guidebook {
position: relative;
top: 50px;
justify-content: center;
}
.disposition_guidebook {
width: 1100px;
display: flex;
position: relative;
align-items: flex-start;
top: 55px;
}
.navigation {
width: 286px;
background: var(--bleu);
position: relative;
height: auto;
padding-bottom: 30px;
border-radius: 35px;
margin-right: 15px;
}
.navigation .all_links {
position: relative;
top: 15px;
}
.navigation h1 {
color: white;
font: 45px 'Bebas Neue';
margin: 0;
text-align: center;
position: relative;
top: 15px;
}
.navigation h2 {
color: white;
font: 34px 'Bebas Neue';
position: relative;
background: var(--fushia);
display: flex;
border-radius: 15px;
height: 45px;
padding-top: 2px;
margin-bottom: 26px !important;
width: 247px;
box-sizing: border-box;
top: 20px;
margin: auto;
justify-content: center;
}
.navigation .menu_deroul, #regl {
display: flex;
background: blue;
width: 300px;
}
#reglhover {
display: flex;
background: blue;
width: 300px;
}
#reglhover img, #staffcredshover img, #ctxhover img, #grphover img, #pvrhover img, #syst1hover img, #syst2hover img, #pihover img, #exphover img, #foirehover img {
transform: rotate(135deg);
top: 5px;
position: relative;
left: 7px;
}
.navigation .menu_deroul img {
float: left;
left: 7px;
position: relative;
cursor: pointer;
}
.navigation span {
color: var(--fushiapp);
margin-right: 3px;
font: 20px 'Bebas Neue';
}
.navigation h3 {
color: var(--white);
font: 20px 'Bebas Neue';
}
.wrap_deroul {
display: flex;
flex-direction: column;
position: relative;
top: -18px;
align-items: flex-end;
}
.ancres_deroul {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-end;
height: 30px;
padding: 0;
color: white;
top: -16px;
font-weight: 200!important;
right: 16px;
font: 16px 'Bebas Neue';
position: relative;
}
.ancres_deroul ul {
margin: 0;
display: flex;
cursor: pointer;
list-style: none;
align-items: flex-end;
flex-direction: column;
}
.ancres_deroul li {transition: .5s;}
.ancres_deroul li a {
text-decoration: none!important;
color: black;
}
.ancres_deroul li:hover {
letter-spacing: .5px;
transition: .5s;
}
<div class="menu_deroul" id="regl" style="display:flex" >
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" onclick="replace('regl','reglhover')" />
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')" id="defaultOpen">Règlement</h3>
</div>
</div>
<div id="reglhover" style="display:none">
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" style="cursor:pointer; transform: rotate(135deg); transition: .5s; transition-duration: 2s;" onclick="replace('reglhover','regl')" />
<div class="wrap_deroul">
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')">Règlement</h3>
</div>
<div class="ancres_deroul">
<ul>
<li><a onclick="scrollWin()">Inscription & RP</a></li>
<li style="margin-top: -5px;">Discord</li>
</ul>
</div>
</div>
</div>
I have this code, it replaces a div by another when clicking on a button.
I want it to close the showed div when clicking outside the div. For example, if the div "reglhover" is showed, I want it to be replaced by the "hide" status (replaced by "regl") when clicking outside the "reglhover" div. And i want it to work for every occurrence (because i use tabs)... But I can't figure out how to do it. Can someone help me? :(

try
const regl = document.getElementById("regl")
const reglhover = document.getElementById("reglhover")
document.addEventListener("click", (e) => {
if (reglhover.style.display === "flex" && e.target.id != "reglhover") {
reglhover.style.display = "none"
regl.style.display = "flex"
}
})

I can't vertically align to bottom a font size of several em values

I want G to stick to the bottom of it's parent. (G to the bottom of the white background).
body {
position: relative;
background: #ccc;
font-size: 2em;
padding: 3em;
}
.staff {
display: flex;
padding: 1em;
background: white;
width: 100%;
position: absolute;
top: 50%;
left: 0;
}
.staff span {
position: absolute;
bottom: 0;
font-size: 1.008em;
}
.clef {
background: pink;
font-size: 0.25em;
vertical-align: 'bottom';
}
<div class='staff'>
<span class='clef'>G</span>
</div>
I also tried display: flex; align-items: flex-end; but didn't work

body {
position: relative;
background: #ccc;
font-size: 2em;
padding: 3em;
}
.staff {
display: flex;
padding: 1em;
background: white;
width: 100%;
position: absolute;
top: 50%;
left: 0;
}
.staff span {
}
.clef {
position: absolute;
bottom: 0;
font-size: 1.008em;
background: pink;
line-height: 0.7;
/* font-size: 0.25em; */
vertical-align: "bottom";
}
<div class='staff'>
<span class='clef'>Good</span>
</div>

Checkbox with classList.toggle isn't toggling the classes. No errors shown

I have a checkbox, that should trigger the menu to slide in from left side of the screen.The problem is when I got the menu hidden on the left, i can't make the function work. When I click the checkbox icon, it's animation works but nothing else happens. The menu is still hidden and I get no errors.
Here is a snippet of my code:
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
* {
margin: 0;
padding: 0;
font-size: 16px;
font-family: Open Sans;
line-height: 1.6;
display: block;
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu" onclick="showMenuSlider()">
<label for="menu" class="icon"><input type="checkbox" id="menu">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>
The button is outside the header, because i need it to be on top of the dark opacity behind the menu. In the future I will make a nice white rounded background to it, so it won't invisible.
Of course if you know better way to do it, be my guest. I'm struggling with this for a while...

The problem is that you add the onclick handler on the header-downbar-menu and not on the checkbox. So when clicking the checkbox you also click on header-downbar-menu so the event is triggered twice. So the class is toggled twice ( added/removed in the same time...almost :) )
Add the click event on the input. ( you could use an onchange event instead of the click event to check the state checked or unchecked , that might help you )
function showMenuSlider() {
var slider = document.querySelector(".menu-slider");
slider.classList.toggle("menu-slider-show");
var sliderOpacity = document.querySelector(".menu-slider-opacity");
sliderOpacity.classList.toggle("menu-slider-opacity-show")
}
html {
scroll-behavior: smooth;
}
main {
position: relative;
}
header {
width: 100%;
position: fixed;
top: 0;
z-index: 95;
box-shadow: 0px -2px 15px rgba(0, 0, 0, 1);
}
.header-container {
background-color: white;
display: flex;
flex-direction: column;
position: relative;
}
.header-upbar {
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 50;
background-color: white;
width: 100%;
margin-top: 9px;
}
.header-upbar p {
font-size: 16px;
font-weight: 500;
color: grey;
}
.header-upbar-item2,
.header-upbar-item3 {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.header-upbar a {
text-decoration: none;
flex-basis: 50%;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
padding: 8px;
border-bottom: 0.5px solid grey;
}
.header-upbar a:first-of-type {
border-right: 0.5px solid grey;
}
.header-upbar-item2 img {
height: 23px;
margin-right: 6px;
}
.header-upbar-item3 img {
height: 23px;
margin: 0px 6px 0px 0px;
}
.header-downbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
align-content: center;
z-index: 51;
background-color: white;
}
.header-downbar-logo {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}
.header-downbar-logo img {
margin: 18px 18px 18px 18px;
height: 30px;
}
.header-downbar-menu {
height: 40px;
width: 40px;
display: block;
position: fixed;
margin: 15px 18px 15px 18px;
z-index: 502;
right: 5px;
top: 50px;
z-index: 100;
}
#menu {
display: none;
}
.icon {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
position: relative;
}
.icon .menu,
.icon .menu::before,
.icon .menu::after {
content: '';
background-color: rgba(50, 50, 50, 1);
display: block;
position: absolute;
height: 4px;
width: 35px;
transition: background ease .3s, top ease .3s .3s, transform ease .3s;
}
.menu {
top: 17.5px;
}
.menu::before {
top: 12px;
}
.menu::after {
top: -12px;
}
#menu:checked+.menu {
background: transparent;
}
#menu:checked+.menu::before {
transform: rotate(45deg);
}
#menu:checked+.menu::after {
transform: rotate(-45deg);
}
#menu:checked+.menu::before,
#menu:checked+.menu::after {
top: 0;
transition: top ease 0.3s, transform ease 0.3s 0.3s;
}
.menu-slider-opacity {
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider {
width: 200px;
height: 100vh;
background-color: white;
z-index: 99;
position: absolute;
top: 0;
left: -100%;
display: block;
}
.menu-slider-show {
left: 0;
}
.menu-slider-opacity-show {
left: 0;
}
<div class="header-downbar-menu">
<label for="menu" class="icon"><input type="checkbox" id="menu" onclick="showMenuSlider()">
<div class="menu"></div>
</label>
</div>
<div class="menu-slider-opacity"></div>
<div class="menu-slider"></div>
<header id="header">
<div class="header-container">
<div class="header-upbar">
<a href="mailto: ">
<div class="header-upbar-item2">
<img src="img/Fenix-e-mail-icon-white.png" alt="">
<p>blablablabla#o2.pl</p>
</div>
</a>
<a href="tel: ">
<div class="header-upbar-item3">
<img src="img/Fenix-phone-icon-white.png" alt="">
<p>+48 999 999 999</p>
</div>
</a>
</div>
<div class="header-downbar">
<div class="header-downbar-logo">
<img src="img/Fenix-logo-black.png" alt="">
</div>
</div>
</div>
</header>

Click event not always registered

I'm trying to make a web app that can be used on mobile.
Below is my nav bar, atop all pages of my site.
The problem is with my hamburger .icon. It can be clicked to dropdown + hide again my nav bar when the screen is resized (ex. on an iPhone). However I seem to have sporadic non-responsiveness from it at times. Almost never works on Safari or iOS. Often doesn't work on Chrome. If I refresh the page a few times or revisit the page, it works, or doesn't, like flipping a coin.
$(document).ready(function() {
"use strict";
$(".icon").click(function(){
$(".topnav").toggleClass("responsive");
});
});
header {
width: 100%;
height: 51px;
position: relative;
background-color: #52bad5;
border-bottom: 5px solid #2C9AB7;
overflow: scroll;
text-align: left; }
header a {
top: 0; }
header a .logo {
width: auto;
height: 100%;
margin: 0px 10px;
position: relative;
color: #fff;
top: 0%;
font-weight: bold;
display: inline-block;
letter-spacing: 0px;
text-decoration: none;
text-align: left; }
header .topnav {
position: relative;
display: inline-block;
top: -2px;
left: 0;
color: #f2f2f2;
text-align: center;
padding: 14px 16px 14px 16px;
text-decoration: none;
font-size: 17px; }
header .icon {
visibility: hidden;
height: 31px;
width: 20px;
position: absolute;
top: 0;
right: 0;
display: inline-block;
color: white;
text-align: center;
padding: 10px 25px;
text-decoration: none;
font-size: 25px;
z-index: 101;
cursor: pointer; }
.icon:hover, .topnav:hover {
background-color: #2C9AB7;
color: black; }
#media only screen and (max-width: 640px) {
.container header nav {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%; }
header {
position: relative;
width: 100%;
left: 0;
background-color: #52bad5;
border-bottom: 5px solid #2C9AB7;
text-align: center;
overflow: visible;
align-content: flex-end; }
header a .logo {
display: block;
float: left;
font-weight: bold;
text-align: left;
margin: 0px 0px 0px 10px;
letter-spacing: normal; }
header .topnav {
display: none; }
header .icon {
display: inline-block;
text-align: center;
visibility: visible;
cursor: pointer; }
header .responsive {
display: flex;
position: relative;
clear: left;
flex-direction: column;
width: 70px;
top: 0;
left: 0;
background: #52BAD5;
text-align: left;
z-index: 101; } }
<header>
<a href="index.html" style="text-decoration: none">
<h1 class="logo">Notes</h1></a>
<a href="index.html" class="topnav">Home</a
><a class="topnav" href="AAA.html">AAA</a
><a class="topnav" href="BBB.html">BBB</a
><a class="topnav" href="CCC.html">CCC</a
><a class="topnav" href="DDD.html">DDD</a
><div class="icon" style="cursor: pointer">☰</div>
</header>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
My fiddle https://jsfiddle.net/TMori7/nn6ofm3s/
Thanks for the time.