We Keep Coding

Why does it work in Safari but not in Chrome?

This HTML with simple CSS and JS works perfectly in Safari, but in Chrome (both Mac and Win) it does not work at all, does not even scroll... not sure the is JS, or the CSS or both.
I tried to change the script or the CSS but nothing works.
Please help 🙏
https://codepen.io/sinetempore/pen/oNwNKZr
Here is my HTML and my CSS:
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 100) {
$('.p1, .p2').addClass('hide');
} else {
$('.p1, .p2').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1200) {
$('.p3').addClass('hide');
$('.p2').removeClass('hide');
} else {
$('.p3').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1800) {
$('.p3-text, .p3sottocntr, .p-main.p4-text').addClass('hidefoot');
} else {
$('.p3-text, .p3sottocntr, .p-main.p4-text').removeClass('hidefoot');
}
});
/// Scroll back to top
$("a[href='.parallax']").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false;
});
#charset "utf-8";
* {
margin: 0;
}
body {
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
font-family: MuseoSans_700;
}
a {
color: black;
text-decoration: none;
}
/* ---------- LOGO ----------*/
.logo-p1 {
overflow: hidden;
border: 0px solid red;
width: 120px;
height: 45px;
background-color: white;
position: absolute;
top: calc(50% - 22.5px);
left: calc(50% - 60px);
margin: 0;
}
.logo-p2 {
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
.logo-p3 {
transform: rotate(180deg);
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
/* ---------- PARALLAX ----------*/
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: static;
background: rgba(255, 0, 0, 0);
z-index: 2;
}
.speed-1 {
transform: translateZ(-6px) scale(7);
}
/* ---------- SECTIONS ----------*/
.p1 {
height: 100%;
width: 100%;
position: absolute;
display: block;
z-index: 3;
background: white;
opacity: 1;
transition: all 0.9s ease;
}
.p1.hide {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p2 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p2.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p3.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p-main.p4-text.hidefoot {
width: 100%;
height: 250px;
background-color: black;
/* position: relative; */
left: 0px;
margin: auto;
bottom: 250px;
}
.p-main.p4-text {
width: 100%;
height: 0px;
background-color: black;
position: fixed;
left: 0px;
margin: auto;
bottom: 0px;
clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
transition: all 0.9s;
transform: translateY(250px);
transform-origin: bottom;
}
.p4 {
height: auto;
width: 100%;
position: relative;
display: block;
z-index: -1;
}
.p4.hidefoot {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
/* ---------- TESTO SECTIONS ----------*/
.p-main {
width: 355px;
height: 230px;
background-color: transparent;
position: fixed;
bottom: 40px;
left: 40px;
margin: 0;
display: flex;
justify-content: left;
align-items: flex-end;
border: 0px solid red;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
}
.p3-text {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3-text.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p-desc {
line-height: 16px;
}
.p-desc b {
font-family: MuseoSans_700;
font-weight: normal;
}
.p-col {
margin-top: 20px;
column-count: 2;
line-height: 16px;
font-family: MuseoSans_700;
}
/* ---------- MENU SOTTO ----------*/
.sottocentro {
width: 250px;
height: 140px;
background-color: transparent;
position: fixed;
bottom: 40px;
right: calc(0% - 0px);
margin: 0;
display: -webkit-box;
justify-content: center;
align-items: flex-end;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
border: 0px solid red;
right: 40px;
}
.p3sottocntr {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3sottocntr.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.sottocentro ul {
list-style: none;
text-align: right;
width: auto;
border: 0px solid red;
line-height: 16px;
text-decoration: none;
clear: both;
margin: 0;
padding: 0px;
right: 40px;
position: absolute;
right: 0px;
position: absolute;
bottom: 0px;
}
.sottocentro ul li {
border: none;
text-align: right;
width: auto;
}
.sottocentro ul li.begins {
border: none;
text-align: right;
width: auto;
padding: 30px 0 0 0;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="parallax">
<section class="p1 speed-1">
<div class="logo-p1">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
</section>
</div>
<section class="p2">
<div class="logo-p2">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p2-text">
<div>
<p class="p-desc p2-desc"> <b>Lorem ipsum </b>dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..
</p>
</div>
</div>
</section>
<section class="p3">
<div class="logo-p3">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p3-text">
<div>
<p class="p-desc p3-desc"> <b>Sed ut perspiciatis </b>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</div>
</section>
<section class="p4">
<div class="p-main p4-text">
</div>
</section>
</body>
</html>

how to fix my page from becoming wider using js and css for a parallax

Like I was saying for some reason my screen ends up becoming wider when I scroll. My goal is to be able to click the about me section and it scrolls to the about me section or div. when I do this, however, I see that it is making the sections wider. What is making the section wider is the actual js but I don't know why.
html file
<body>
<div class="container">
<div class="header">
<img class="my-pic" src="./images/me.jpg" alt="" />
</div>
<ul class="the-links">
<li class="links" id="about-me">About Me</li>
<li class="links" id="my-projects">My Projects</li>
<li class="links" id="contact-me">Contact Me</li>
</ul>
<div class="me">
<h1>About Me Section</h1>
<br />
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet at
ad tenetur omnis perferendis totam id praesentium ab eius harum,
asperiores consequuntur nemo iste, consectetur earum porro rem
quisquam sapiente veritatis voluptatem non quae reprehenderit? Iste
rerum necessitatibus harum aut autem totam incidunt eaque a, excepturi
culpa, error blanditiis quaerat.
</p>
</div>
<div class="projects">My Projects Section</div>
<div class="contact">Contact Me Section</div>
</div>
<script src="./app.js"></script>
</body>
</html>
css file
* {
padding: 0;
margin: 0;
}
.header {
min-height: 100vh;
background: linear-gradient(45deg, rgb(156, 120, 240), rgb(169, 140, 194));
position: relative;
color: white;
max-height: 100vh;
max-width: 100%;
z-index: -1;
}
.my-pic {
border-radius: 50%;
height: 500px;
top: 50%;
left: 8%;
transform: translate(-8%, -50%);
position: absolute;
}
.links {
background: rgba(0, 0, 0, 0.5);
list-style: none;
color: whitesmoke;
font-size: xx-large;
font-family: "Style Script", cursive;
padding: 10px;
}
.links:hover {
background: rgb(41, 3, 58);
cursor: pointer;
list-style: none;
color: whitesmoke;
font-size: xx-large;
font-family: "Style Script", cursive;
padding: 10px;
}
#about-me {
left: 60%;
top: 30%;
transform: translate(-60%, -30%);
position: absolute;
}
#my-projects {
left: 60%;
top: 50%;
transform: translate(-60%, -50%);
position: absolute;
}
#contact-me {
left: 60%;
top: 70%;
transform: translate(-60%, -70%);
position: absolute;
}
ul {
z-index: 0;
}
.me {
min-height: 100vh;
max-height: 100vh;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: aliceblue;
background: linear-gradient(35deg, black 20%, rgb(248, 28, 248));
}
.projects {
min-height: 100vh;
max-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: aliceblue;
background: linear-gradient(35deg, rgb(8, 77, 23) 20%, rgb(248, 28, 248));
}
.contact {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: aliceblue;
background-color: black;
}
js file
const top_of_div =
window.scrollY + document.querySelector(".me").getBoundingClientRect().top;
const scrollToMe = document.querySelector("ul");
console.log(top_of_div);
scrollToMe.addEventListener("click", (e) => {
console.log(e.target.id)
const target_id = e.target.id;
if(target_id === 'about-me'){
window.scroll({
top: 1000,
left: 0,
behavior: 'smooth'
});
}
});
function parallax(element, distance, speed) {
const item = document.querySelector(element);
item.style.transform = `translateY(${distance * speed}px)`;
}
window.addEventListener("scroll", function () {
parallax(".header", window.scrollY, 0.8);
parallax(".me", window.scrollY, 0.5);
parallax(".projects", window.scrollY, 0.5);
parallax(".contact", window.scrollY, 0.5);
});

Why doesn't my accordion toggle when clicking on the heading icons?

Need some assistance with below accordion. When you click on the heading the accordion drops down, which is great and works well. However, when you click on the + / - the accordion doesn't dropdown. Not sure how to fix this and would greatly appreciate if someone to help. Not entirely sure how to amend the before/after so it's clickable.
function initAcc(elem, option){
document.addEventListener('click', function (e) {
if (!e.target.matches(elem+' .a-btn')) return;
else{
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}else{
e.target.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>

Adding pointer-events:none to your span will work for you like so :-
function initAcc(elem, option){
document.addEventListener('click', function (e) {
if (!e.target.matches(elem+' .a-btn')) return;
else{
if(!e.target.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
e.target.parentElement.classList.add('active');
}else{
e.target.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
pointer-events:none;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>
Explanation - Did this because your e.target needs to match with a specific selector but your e.target will vary based on where you click and it becomes this span when you click on the +/- icons. So I have prevented the pointer-events for that span. I like the closest approach as well by #espascarello.

The target is what you clicked. The + is not the element you are looking for, so you got to see if it is a child. Easiest way is closest.
function initAcc(elem, option){
document.addEventListener('click', function (e) {
const clickedElem = e.target.closest(elem+' .a-btn');
if (!clickedElem) return;
else{
if(!clickedElem.parentElement.classList.contains('active')){
if(option==true){
var elementList = document.querySelectorAll(elem+' .a-container');
Array.prototype.forEach.call(elementList, function (e) {
e.classList.remove('active');
});
}
clickedElem.parentElement.classList.add('active');
}else{
clickedElem.parentElement.classList.remove('active');
}
}
});
}
initAcc('.accordion.v1', true);
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 10px 10px 100px 10px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
font-weight: 500;
}
.container h2 {
font-weight: 500;
}
.accordion {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
}
.accordion .a-container {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 5px;
}
.accordion .a-container .a-btn {
margin: 0;
position: relative;
padding: 15px 30px;
width: 100%;
color: #bdbdbd;
font-weight: 400;
display: block;
font-weight: 500;
background-color: #262626;
cursor: pointer;
transition: all 0.3s ease-in-out;
border-radius: 5px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}
.accordion .a-container .a-btn span {
display: block;
position: absolute;
height: 14px;
width: 14px;
right: 20px;
top: 18px;
}
.accordion .a-container .a-btn span:after {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
}
.accordion .a-container .a-btn span:before {
content: "";
width: 14px;
height: 3px;
border-radius: 2px;
background-color: #fff;
position: absolute;
top: 6px;
transform: rotate(90deg);
transition: all 0.3s ease-in-out;
}
.accordion .a-container .a-panel {
width: 100%;
color: #262626;
transition: all 0.2s ease-in-out;
opacity: 0;
height: auto;
max-height: 0;
overflow: hidden;
padding: 0px 10px;
}
.accordion .a-container.active .a-btn {
color: #fff;
}
.accordion .a-container.active .a-btn span::before {
transform: rotate(0deg);
}
.accordion .a-container.active .a-panel {
padding: 15px 10px 10px 10px;
opacity: 1;
max-height: 500px;
}
<div class="container">
<div class="accordion v1">
<div class="a-container">
<p class="a-btn">One <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
<div class="a-container">
<p class="a-btn">Two <span></span></p>
<div class="a-panel">
<h4>Lorem ipsum dolor sit amet.</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium minima dolores assumenda id. Porro consequuntur at dolor eum, neque labore!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur non sint sequi ipsa laudantium, iure rem vel nemo soluta temporibus, consectetur at corrupti aspernatur maxime, iusto ne blanditiis deleniti.</p>
</div>
</div>
</div>
</div>

trying to create Leaflet map dynamically on a card that open and close

Hi there I am trying to make an info card for a trip (not real just practice), I want that a Leaflet map will show once the user clicks on the card as part of info card, but I not able to make the map show dynamically.
Is it possible?
Should I use promises and await? if yes how?
Or should I try useing the google map API instead?
This is the HTML CSS and JavaScript
(the js i mostly took from a youtube video but i modified it to work in my code)
const cards = document.querySelectorAll(".card");
const mapInfo = [
{curessTitle : "Big City",
mapLat : 51.505,
mapLon : 0,
},
{curessTitle : "Food",
mapLat : 51.505,
mapLon : 0,
},
{curessTitle : "Nature",
mapLat : 51.505,
mapLon : 0,
},
{curessTitle : "Culture",
mapLat : 51.505,
mapLon : 0,
},
{curessTitle : "Pepole",
mapLat : 51.505,
mapLon : 0,
},
];
const toggleExpansion = (element, to, duration = 350) => {
return new Promise((res) => {
element.animate([
{
top: to.top,
left: to.left,
width: to.width,
height: to.height
}
], {duration, fill: 'forwards', ease: 'ease-in'})
setTimeout(res, duration);
})
}
const fadeContent = (element, opacity, duration = 300) => {
return new Promise(res => {
[...element.children].forEach((child) => {
requestAnimationFrame(() => {
child.style.transition = `opacity ${duration}ms linear`;
child.style.opacity = opacity;
});
})
setTimeout(res, duration);
})
}
// this is the part where I am trying to add the Leaflet map dynamically
const createMap = (cardDataIndex) => {
return new Promise(res => {
const cardContentDiv = document.querySelector(".card-content");
const creatMapDiv = document.createElement("div");
creatMapDiv.id = "mapid";
cardContentDiv,appendChild(creatMapDiv);
const mymap = L.map('mapid').setView([mapInfo[cardDataIndex].mapLat, mapInfo[cardDataIndex].mapLon], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
setTimeout(res, 1000 )
})
};
const getCardContent = (title) => {
return `
<div class="card-content">
<h2>The ${title}</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Dolorum voluptates sequi modi at voluptatibus.
Tempora iste laudantium nemo sequi soluta nobis aut ex molestias quos,
dicta, quas est iure odio?</p>
</div>
<div class="card-content">
<h2>the routs</h2>
</div>
</div>
`;
}
const onCardClick = async (e) => {
const card = e.currentTarget;
const cardDataIndex = e.currentTarget.dataset.index;
const mapLat = mapInfo[cardDataIndex].mapLat;
const mapLon = mapInfo[cardDataIndex].mapLon;
// clone the card
const cardClone = card.cloneNode(false);
// get the location of the card in the view
const {top, left, width, height} = card.getBoundingClientRect();
// position the clone on top of the original
cardClone.style.position = 'fixed';
cardClone.style.top = top + 'px';
cardClone.style.left = left + 'px';
cardClone.style.width = width + 'px';
cardClone.style.height = height + 'px';
// hide the original card with opacity
card.style.opacity = '0';
// add card to the same container
card.parentNode.appendChild(cardClone);
// create a close button to handle the undo
const closeButton = document.createElement('button');
// position the close button top corner
////// mybe creat the map after----->
closeButton.style = `
position: absolute;
z-index: 15;
top: 10px;
right: 10px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #e25656;
outline: none;
border: none;
cursor: pointer;
`;
// attach click event to the close button
closeButton.addEventListener('click', async () => {
// remove the button on close
closeButton.remove();
// remove the display style so the original content is displayed right
cardClone.style.removeProperty('display');
cardClone.style.removeProperty('padding');
// show original card content
[...cardClone.children].forEach(child => child.style.removeProperty('display'));
fadeContent(cardClone, '0');
// shrink the card back to the original position and size
await toggleExpansion(cardClone, {top: `${top}px`, left: `${left}px`, width: `${width}px`, height: `${height}px`}, 300)
// show the original card again
card.style.removeProperty('opacity');
// remove the clone card
cardClone.remove();
});
// fade the content away
fadeContent(cardClone, '0')
.then(() => {
[...cardClone.children].forEach(child => child.style.display = 'none');
});
// expand the clone card
await toggleExpansion(cardClone, {top: "0", left: "auto", width: '100%', height: 'auto'});
const content = getCardContent(mapInfo[cardDataIndex].curessTitle, mapLat, mapLon)
// set the display block so the content will follow the normal flow in case the original card is not display block
cardClone.style = `
position: absolute;
display: flex;
padding: 0;
background: #333;
color: #ffffff;
z-index: 10;
opcity: 1;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
`
// append the close button after the expansion is done
cardClone.appendChild(closeButton);
cardClone.insertAdjacentHTML('afterbegin', content);
//createMap(cardDataIndex);
};
cards.forEach(card => card.addEventListener('click', onCardClick));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
--color-primery: #F09819;
--color-primery-dark: #e48f18;
--color-secondery: #5b86e5;
--color-error: #cc3333;
--color-success: #4bb544;
--border-radius: 4px;
font-family: sans-serif;
scroll-behavior: smooth;
background:linear-gradient(to right, #F09819, #FF512F);
}
header{
z-index: 100;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.7) ;
position: sticky;
top: 0px;
background: white;
}
nav{
min-height: 10vh;
margin: auto;
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav h1,
nav ul {
font-size: 1.2rem;
flex:1;
}
nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
nav a {
color: black;
text-decoration: none;
}
.login-account-continer{
margin-left: 5%;
display: flex;
justify-content: space-around;
align-items: center;
}
.login-btn{
font-size: 1.2rem;
cursor: pointer;
}
.account-btn{
font-size:25px;
color:#fff;
background-color: #eeeeee;
justify-content:center;
align-items:center;
width:50px;
height:50px;
border-radius:50%;
margin: 1rem;
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
}
.flex-curess-container{
position: relative;
padding: 0;
margin: 5%;
height: auto;
width: 90%;
justify-content: center;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.close-info{
position: absolute;
display: none;
top: 10px;
right: 10px;
width: 15px;
height: 15px;
outline: none;
border: none;
border-radius: 50%;
background: coral;
cursor: pointer;
}
.card{
position: relative;
margin: 10px;
display: flex;
align-items: center;
justify-content: space-between;
width: 230px;
height: 400px;
flex-wrap: wrap;
flex-grow: 1;
border:none;
border-radius: var(--border-radius);
box-shadow: 3px 5px 10px #333;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
transition: all 0.5 ease-out;
}
.active {
max-width: none;
height: 800px;
}
.card .image{
width: 100%;
height: 100%;
overflow: hidden;
}
.card .image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
transition: 0.5s ease-in-out;
}
.card:hover .image img{
transform: scale(1.3);
}
.card:hover .hover-img-info{
opacity: 0.9 ;
}
.hover-img-info {
margin: 0;
padding: 10%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
color: white;
width: 100%;
height: 100%;
background:rgba(51, 51, 51, 1) ;
z-index: 4;
opacity: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
transition-delay: .2s ;
}
.hover-img-info h3{
margin: 10px;
font-size: 25px;
}
#keyframes slideDown {
100%{
transform: translateY(0);
opacity: 1;
}
}
.card-content {
position: relative;
padding: 100px 25px 25px;
margin: 5%;
overflow: auto;
color: #fff;
max-width: 45%;
height: 90%;
align-items: center;
justify-content: space-between;
flex-direction: column;
flex: 1 1 wrap;
border: 1px solid #ffffff;
border-radius: var(--border-radius);
}
.card-content > * {
transform: translateY(-35px);
opacity: 0;
}
.card-content h2 {
font-size: 48px;
margin-bottom: 35px !important;
animation: slideDown 0.5s ease-out forwards;
}
.card-content p {
color: #fff;
overflow: auto;
animation: slideDown 0.5s ease-out 0.4s forwards;
}
#mapid {
height: 300px;
animation: slideDown 0.5s ease-out 0.4s forwards;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<link rel="stylesheet" href="Japan-Travel-site-cursses-page.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script async src="Japan-Travel-site-cursses-page.js"></script>
<script async src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
#mapid { height: 180px; }
</style>
<title>Japan Travel Curess Page</title>
</head>
<body>
<header>
<nav>
<h1>Travel Japan</h1>
<ul class="ul-nav">
<li><a data-page="home" href="">Home</a></li>
</ul>
<div class="login-account-continer">
<span class="login-btn">Login</span>
<div class="account-btn"></div>
</div>
</nav>
</header>
<main>
<div class="flex-curess-container">
<div class="card item1" data-page="big-city" data-index="0">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?city " alt="tokyo">
</div>
<div class="hover-img-info">
<div class="close-info"></div>
<h3>The Big City</h3>
<div class="coures-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quis magnam dolorem vero voluptatum similique tempore cumque iste harum officia!
Similique recusandae magni voluptas quod deleniti porro voluptatum ab quisquam perferendis.
</div>
</div>
</div>
<div class="card item2" data-page="food" data-index="1">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?japan-food " alt="food">
</div>
<div class="hover-img-info">
<h3>The food</h3>
<div class="coures-info">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Esse sequi dicta earum architecto obcaecati adipisci eius reprehenderit distinctio itaque laboriosam.
</div>
</div>
</div>
<div class="card item3" data-page="nature" data-index="2">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?japan-art " alt="art">
</div>
<div class="hover-img-info">
<h3>The Nature</h3>
<div class="coures-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quis magnam dolorem vero voluptatum similique tempore cumque iste harum officia!
Similique recusandae magni voluptas quod deleniti porro voluptatum ab quisquam perferendis.
</div>
</div>
</div>
<div class="card item4" data-page="culture" data-index="3">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?japan-culter " alt="tokyo">
</div>
<div class="hover-img-info">
<h3>The Culture</h3>
<div class="coures-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quis magnam dolorem vero voluptatum similique tempore cumque iste harum officia!
</div>
</div>
</div>
<div class="card item5" data-page="pepole" data-index="4">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?japan-people " alt="people">
</div>
<div class="hover-img-info">
<h3>The Pepole</h3>
<div class="coures-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quis magnam dolorem vero voluptatum similique tempore cumque iste harum officia!
</div>
</div>
</div>
</div>
</main>
</body>
Thank you in advance 😁

How to fix content with div skew?

I am currently transforming a <div> element using the skewX(-18deg) value, the problem is when I insert text into it I cannot prevent it from overflowing.
The element inside the skewed container is transformed back to normal using skewX(18deg).
The final result should look like this:
$(document).ready(function() {
var curPage = 1;
var numOfPages = $(".skw-page").length;
var animTime = 1000;
var scrolling = false;
var pgPrefix = ".skw-page-";
function pagination() {
scrolling = true;
$(pgPrefix + curPage).removeClass("inactive").addClass("active");
$(pgPrefix + (curPage - 1)).addClass("inactive");
$(pgPrefix + (curPage + 1)).removeClass("active");
setTimeout(function() {
scrolling = false;
}, animTime);
};
function navigateUp() {
if (curPage === 1) return;
curPage--;
pagination();
};
function navigateDown() {
if (curPage === numOfPages) return;
curPage++;
pagination();
};
$(document).on("mousewheel DOMMouseScroll", function(e) {
if (scrolling) return;
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
});
$(document).on("keydown", function(e) {
if (scrolling) return;
if (e.which === 38) {
navigateUp();
} else if (e.which === 40) {
navigateDown();
}
});
});
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #15181A;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.skw-pages {
overflow: hidden;
position: relative;
height: 100vh;
}
.skw-page {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.skw-page__half {
position: absolute;
top: 0;
width: 50%;
height: 100vh;
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
}
.skw-page__half--left {
left: 0;
-webkit-transform: translate3d(-32.4vh, 100%, 0);
transform: translate3d(-32.4vh, 100%, 0);
}
.skw-page__half--right {
left: 50%;
-webkit-transform: translate3d(32.4vh, -100%, 0);
transform: translate3d(32.4vh, -100%, 0);
}
.skw-page__half--30 {
width: 30%;
}
.skw-page__half--70 {
width: 70%;
}
.skw-page.active .skw-page__half {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.skw-page__skewed {
overflow: hidden;
position: absolute;
top: 0;
width: 140%;
height: 100%;
-webkit-transform: skewX(-18deg);
transform: skewX(-18deg);
background: #000;
}
.skw-page__half--left .skw-page__skewed {
left: -20%;
}
.skw-page__half--right .skw-page__skewed {
right: -20%;
}
.skw-page__content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: left;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0 30%;
color: #fff;
-webkit-transform: skewX(18deg);
transform: skewX(18deg);
-webkit-transition: opacity 1s, -webkit-transform 1s;
transition: opacity 1s, -webkit-transform 1s;
transition: transform 1s, opacity 1s;
transition: transform 1s, opacity 1s, -webkit-transform 1s;
background-size: cover;
}
.skw-page__half--left .skw-page__content {
padding-left: 3%;
padding-right: 2%;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.skw-page__half--right .skw-page__content {
padding-left: 30%;
padding-right: 30%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.skw-page.inactive .skw-page__content {
opacity: 0.5;
-webkit-transform: skewX(18deg) scale(0.95);
transform: skewX(18deg) scale(0.95);
}
.skw-page__heading {
margin-bottom: 15px;
text-transform: uppercase;
font-size: 25px;
}
.skw-page__description {
font-size: 14px;
}
.skw-page__link {
color: #FFA0A0;
}
.skw-page-1 .skw-page__half--left .skw-page__content {
background: #292929;
}
.skw-page-1 .skw-page__half--right .skw-page__content {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-2.jpg");
}
.skw-page-2 .skw-page__half--left .skw-page__content {
background: #292929;
}
.skw-page-2 .skw-page__half--right .skw-page__content {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg");
}
.skw-page-3 .skw-page__half--left .skw-page__content {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/img-test.jpg");
}
.skw-page-3 .skw-page__half--right .skw-page__content {
background: #292929;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="skw-pages">
<div class="skw-page skw-page-1 active">
<div class="skw-page__half skw-page__half--left skw-page__half--30">
<div class="skw-page__skewed">
<div class="skw-page__content">
<h2 class="skw-page__heading">Page 1</h2>
<p class="skw-page__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus harum qui, placeat fugit delectus maxime voluptatibus perspiciatis, quia sit itaque! Ut eum dicta quam minus earum beatae at iure perspiciatis. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Ex, ut. Fugit minima consequatur voluptatem commodi culpa, adipisci laborum qui vitae. Voluptas voluptates nihil ratione eaque labore perspiciatis, animi placeat eligendi. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quibusdam libero, cupiditate asperiores tempora quos porro inventore? Praesentium aperiam deleniti nam a aliquid sequi ea perspiciatis error recusandae enim, dolorem quae.</p>
</div>
</div>
</div>
<div class="skw-page__half skw-page__half--right skw-page__half--70">
<div class="skw-page__skewed">
<div class="skw-page__content"></div>
</div>
</div>
</div>
<div class="skw-page skw-page-2">
<div class="skw-page__half skw-page__half--left skw-page__half--30">
<div class="skw-page__skewed">
<div class="skw-page__content">
<h2 class="skw-page__heading">Page 2</h2>
<p class="skw-page__description">Ok, ok, just one more scroll!</p>
</div>
</div>
</div>
<div class="skw-page__half skw-page__half--right skw-page__half--70">
<div class="skw-page__skewed">
<div class="skw-page__content"></div>
</div>
</div>
</div>
<div class="skw-page skw-page-3">
<div class="skw-page__half skw-page__half--left skw-page__half--30">
<div class="skw-page__skewed">
<div class="skw-page__content"></div>
</div>
</div>
<div class="skw-page__half skw-page__half--right skw-page__half--70">
<div class="skw-page__skewed">
<div class="skw-page__content">
<h2 class="skw-page__heading">Epic finale</h2>
<p class="skw-page__description">
Feel free to check
<a class="skw-page__link" href="http://codepen.io/suez/pens/public/" target="_blank">my other pens</a> and follow me on
<a class="skw-page__link" href="https://twitter.com/NikolayTalanov" target="_blank">Twitter</a>
</p>
</div>
</div>
</div>
</div>
</div>
Here my pen:
See the Pen New version - Scroll one page by Văn Lộc (#r0ysy0301) on CodePen.

#skav link was a good direction, but for some reason shape-inside is much less reliable than shape-outside.
So here's how I solved this:
you can insert a div in your description div and style it with an outershape to match the skewed image on the right. Obviously, you'd put the background to transparent, i made it green so you could see it's effect.
Also, for your image, using a clip-path would require less lines of code.
Putting your text in p tags made it more clear and adding ­ in words make the justified text prettier.
for html:
<div class="skw-page__content">
<div class="triangle"></div>
<h2 class="skw-page__heading">Page 1</h2>
<div class="skw-page__description">
<p>Lorem ipsum dolor sit amet, con­sect­etur adi­pisi­cing elit. Accu­sa­mus ha­rum qui, pla­ceat fugit de­lec­tus ma­xime volupta­tibus perspi­ciatis, quia sit it­aque!</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/img-test.jpg" alt="random nice picture of a montain reflecting ine a blue lake"/>
<p>Qui­bus­dam lib­ero, cupi­di­ta­te aspe­rio­res tem­pora quos porro in­ven­tore? Prae­sen­tium ape­riam dele­ni­ti nam a a­li­quid sequi ea perspi­ciatis error recu­sandae enim, do­lorem quae.</p>
</div>
for css:
&__description {
font-size: 14px;
width: 100%;
hyphens: auto;
text-align: justify;
padding: 0;
}
img{
min-width: 0px;
max-width: 75%;
min-height: 0px;
margin: 2% 0;
clip-path: polygon(0% 0%, 100% 0%, 78% 100%, 0% 100%);
}
.triangle {
width: 300px;
height: 100%;
background-color: transparent;
shape-margin: 0 0 0 2%;
clip-path: polygon(98% 0%, 100% 0%, 100% 100%, 50% 100%);
shape-outside: polygon(95% 0%, 100% 0%, 100% 100%, 50% 100%);
background: green;
float: right;
right: 0;
}
Voilà :)