Parallax effect within pinned GSAP container - javascript

I have a block which becomes pinned and scrolls horizontally.
Within this block, I have a vector which has a width of 3573px.
When a user scrolls horizontally, I want the vector to scroll also, alongside the images in my demo.
Have tried moving my vector under .horizontalScroller__scroll, so that it scrolls alongside the images, but that didn't work.
See demo:
$(function() {
let images = gsap.utils.toArray(".horizontalScroller__item");
gsap.to(images, {
xPercent: -100 * (images.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".horizontalScroller",
pin: true,
scrub: 1,
end: "+=3600", // size of svg bg
//end: () => "+=" + document.querySelector(".horizontalScroller__images").offsetWidth
}
});
});
.spacer {
height: 100vh;
background: lightblue;
}
.horizontalScroller {
padding: 100px 0 60px 0;
background-color: #5D209F;
height: 100vh;
position: relative;
overflow: hidden;
}
.horizontalScroller__intro {
margin-bottom: 25px;
}
.horizontalScroller__scroll {
height: 70%;
position: relative;
overflow: hidden;
}
.horizontalScroller__images {
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.horizontalScroller__item {
width: 50vw;
display: flex;
justify-content: center;
flex: 0 0 auto;
}
.horizontalScroller__image {
-o-object-fit: fill;
object-fit: fill;
margin: 0 auto;
width: 260px;
height: 255px;
}
.horizontalScroller__pattern {
position: absolute;
top: -50%;
width: 100%;
height: 100%;
}
.horizontalScroller__pattern-inner {
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<section class="spacer"></section>
<section class="horizontalScroller">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-8">
<div class="horizontalScroller__intro text-center">
<h2 class="horizontalScroller__header">Header</h2>
</div>
</div>
</div>
</div>
<div class="horizontalScroller__scroll">
<div class="horizontalScroller__images" id="horizontal-scroll">
<div class="horizontalScroller__item">
<div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
</div>
<div class="horizontalScroller__item">
<div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
</div>
<div class="horizontalScroller__item">
<div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
</div>
<div class="horizontalScroller__item">
<div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
</div>
</div>
</div>
<div class="horizontalScroller__pattern">
<div class="horizontalScroller__pattern-inner">
<svg class="horizontalScroller__pattern-svg" xmlns="http://www.w3.org/2000/svg" width="3573.448" height="935.115" viewBox="0 0 3573.448 935.115">
<g id="Journey_line" data-name="Journey line" transform="translate(58.751 66.918)">
<path id="Path_111603" data-name="Path 111603" d="M-57.191,807.764c141.061,46.335,271.1-48.506,208.8-171.343-44.647-88.041-84.385,2.223-76.906,70.2,11.034,100.3,75.906,190.808,216.669,143.778C406.3,812,470.169,700.216,568.892,676.505c94.985-22.813,137.722,77.422,240.409,77.422,189.877,0,202.929-186.737,384.8-145.215,70.851,16.176,119.356,96.77,315.333,91.709,108.733-2.808,183.293-179.6,324.1-222.009,136.412-41.091,145.842,55.306,290.03,55.078,221.015-.348,232.464-251.918,446.846-265.314,144.5-9.029,229.247,90.469,364.966-54.532,26.116-27.9,52.772-44.257,77.079-53.559,38.931-14.9,81.644-13.148,119.848,3.795,52.233,23.165,142.179,57.218,225.578-44.538C3456.26-.7,3510.921-63.64,3510.921-63.64" fill="none" stroke="rgba(249,247,250,0.3)" stroke-miterlimit="10" stroke-width="10" />
<path class="pulse" id="Path_111604" data-name="Path 111604" d="M1922.219,474.558a33.6,33.6,0,1,1-33.6-33.6,33.6,33.6,0,0,1,33.6,33.6" fill="#5d209f" />
<path class="pulse" id="Path_111605" data-name="Path 111605" d="M1908.09,474.558a19.475,19.475,0,1,1-19.476-19.476,19.476,19.476,0,0,1,19.476,19.476" fill="#f6eb61" />
<path class="pulse" id="Path_111606" data-name="Path 111606" d="M1056.355,649.037c0-19.115-15.045-34.611-33.6-34.611s-33.6,15.5-33.6,34.611,15.045,34.611,33.6,34.611,33.6-15.5,33.6-34.611" fill="#5d209f" />
<path class="pulse" id="Path_111607" data-name="Path 111607" d="M1042.226,649.037c0-11.078-8.719-20.059-19.476-20.059s-19.475,8.981-19.475,20.059,8.719,20.059,19.475,20.059,19.476-8.981,19.476-20.059" fill="#f277c6" />
<path class="pulse" id="Path_111610" data-name="Path 111610" d="M623.423,672.044c0-18.834-15.045-34.1-33.6-34.1s-33.6,15.268-33.6,34.1,15.045,34.1,33.6,34.1,33.6-15.268,33.6-34.1" fill="#5d209f" />
<path class="pulse" id="Path_111611" data-name="Path 111611" d="M609.294,672.044a19.478,19.478,0,1,0-19.476,19.764,19.621,19.621,0,0,0,19.476-19.764" fill="#ff6d6a" />
<path class="pulse" id="Path_111608" data-name="Path 111608" d="M2355.151,439.3a33.6,33.6,0,1,0-33.6,33.6,33.6,33.6,0,0,0,33.6-33.6" fill="#5d209f" />
<path class="pulse" id="Path_111609" data-name="Path 111609" d="M2341.022,439.3a19.475,19.475,0,1,0-19.476,19.476,19.476,19.476,0,0,0,19.476-19.476" fill="#ff6d6a" />
</g>
</svg>
</div>
</div>
</section>
<section class="spacer"></section>


Where you have
<div class="horizontalScroller__pattern">
add horizontalScroller__SVG to it:
<div class="horizontalScroller__pattern horizontalScroller__SVG">
Add the following code:
let svgBG = gsap.utils.toArray(".horizontalScroller__SVG");
gsap.to(svgBG, {
xPercent: -100,
ease: "none",
scrollTrigger: {
trigger: ".horizontalScroller",
pin: true,
scrub: 1,
end: "+=7200",
//end: () => "+=" + document.querySelector(".horizontalScroller__images").offsetWidth
}
});
You will need to fiddle with the +7200 number until you get the desire result.
$(function() {
let images = gsap.utils.toArray(".horizontalScroller__item");
gsap.to(images, {
xPercent: -100 * (images.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".horizontalScroller",
pin: true,
scrub: 1,
end: "+=3600", // size of svg bg
//end: () => "+=" + document.querySelector(".horizontalScroller__images").offsetWidth
}
});
let svgBG = gsap.utils.toArray(".horizontalScroller__svg");
gsap.to(svgBG, {
xPercent: -100,
ease: "none",
scrollTrigger: {
trigger: ".horizontalScroller",
pin: true,
scrub: 1,
end: "+=7200",
//end: () => "+=" + document.querySelector(".horizontalScroller__images").offsetWidth
}
});
});
.spacer {
height: 100vh;
background: lightblue;
}
.horizontalScroller {
padding: 100px 0 60px 0;
background-color: #5D209F;
height: 100vh;
position: relative;
overflow: hidden;
}
.horizontalScroller__intro {
margin-bottom: 25px;
}
.horizontalScroller__scroll {
height: 70%;
position: relative;
overflow: hidden;
}
.horizontalScroller__image_item {
width: 50vw;
display: flex;
justify-content: center;
flex: 0 0 auto;
}
.horizontalScroller__images {
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.horizontalScroller__image {
-o-object-fit: fill;
object-fit: fill;
margin: 0 auto;
width: 260px;
height: 255px;
}
.horizontalScroller__pattern {
position: absolute;
top: -50%;
width: 100%;
height: 100%;
}
.horizontalScroller__pattern-inner {
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<section class="spacer"></section>
<section class="horizontalScroller">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-8">
<div class="horizontalScroller__intro text-center">
<h2 class="horizontalScroller__header">Header</h2>
</div>
</div>
</div>
</div>
<div class="horizontalScroller__scroll">
<div class="horizontalScroller__images" id="horizontal-scroll">
<div class="horizontalScroller__item horizontalScroller__image_item">
<div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
</div>
<div class="horizontalScroller__item horizontalScroller__image_item">
<div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
</div>
<div class="horizontalScroller__item horizontalScroller__image_item">
<div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
</div>
<div class="horizontalScroller__item horizontalScroller__image_item">
<div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
</div>
</div>
</div>
<div class="horizontalScroller__svg horizontalScroller__pattern">
<div class="horizontalScroller__pattern-inner">
<svg class="horizontalScroller__pattern-svg" xmlns="http://www.w3.org/2000/svg" width="3573.448" height="935.115" viewBox="0 0 3573.448 935.115">
<g id="Journey_line" data-name="Journey line" transform="translate(58.751 66.918)">
<path id="Path_111603" data-name="Path 111603" d="M-57.191,807.764c141.061,46.335,271.1-48.506,208.8-171.343-44.647-88.041-84.385,2.223-76.906,70.2,11.034,100.3,75.906,190.808,216.669,143.778C406.3,812,470.169,700.216,568.892,676.505c94.985-22.813,137.722,77.422,240.409,77.422,189.877,0,202.929-186.737,384.8-145.215,70.851,16.176,119.356,96.77,315.333,91.709,108.733-2.808,183.293-179.6,324.1-222.009,136.412-41.091,145.842,55.306,290.03,55.078,221.015-.348,232.464-251.918,446.846-265.314,144.5-9.029,229.247,90.469,364.966-54.532,26.116-27.9,52.772-44.257,77.079-53.559,38.931-14.9,81.644-13.148,119.848,3.795,52.233,23.165,142.179,57.218,225.578-44.538C3456.26-.7,3510.921-63.64,3510.921-63.64" fill="none" stroke="rgba(249,247,250,0.3)" stroke-miterlimit="10" stroke-width="10" />
<path class="pulse" id="Path_111604" data-name="Path 111604" d="M1922.219,474.558a33.6,33.6,0,1,1-33.6-33.6,33.6,33.6,0,0,1,33.6,33.6" fill="#5d209f" />
<path class="pulse" id="Path_111605" data-name="Path 111605" d="M1908.09,474.558a19.475,19.475,0,1,1-19.476-19.476,19.476,19.476,0,0,1,19.476,19.476" fill="#f6eb61" />
<path class="pulse" id="Path_111606" data-name="Path 111606" d="M1056.355,649.037c0-19.115-15.045-34.611-33.6-34.611s-33.6,15.5-33.6,34.611,15.045,34.611,33.6,34.611,33.6-15.5,33.6-34.611" fill="#5d209f" />
<path class="pulse" id="Path_111607" data-name="Path 111607" d="M1042.226,649.037c0-11.078-8.719-20.059-19.476-20.059s-19.475,8.981-19.475,20.059,8.719,20.059,19.475,20.059,19.476-8.981,19.476-20.059" fill="#f277c6" />
<path class="pulse" id="Path_111610" data-name="Path 111610" d="M623.423,672.044c0-18.834-15.045-34.1-33.6-34.1s-33.6,15.268-33.6,34.1,15.045,34.1,33.6,34.1,33.6-15.268,33.6-34.1" fill="#5d209f" />
<path class="pulse" id="Path_111611" data-name="Path 111611" d="M609.294,672.044a19.478,19.478,0,1,0-19.476,19.764,19.621,19.621,0,0,0,19.476-19.764" fill="#ff6d6a" />
<path class="pulse" id="Path_111608" data-name="Path 111608" d="M2355.151,439.3a33.6,33.6,0,1,0-33.6,33.6,33.6,33.6,0,0,0,33.6-33.6" fill="#5d209f" />
<path class="pulse" id="Path_111609" data-name="Path 111609" d="M2341.022,439.3a19.475,19.475,0,1,0-19.476,19.476,19.476,19.476,0,0,0,19.476-19.476" fill="#ff6d6a" />
</g>
</svg>
</div>
</div>
</section>
<section class="spacer"></section>

Related

How can I make the black part transparent to show the white background？

#myElement {
width: 50px;
height: 300px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
#myBar {
width: 100%;
height: 10px;
background: #000;
}
<div id="myElement">
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
</div>
How can I make the black part transparent to show the background behind，The background won't always be white，maybe a picture，The color part is a gradient of the whole

Change the id attribute to class for the div myBar and change the background to white.
We can target each of myBar elements using nth-child selector
.myBar:nth-child(1),.myBar:nth-child(2) and so on. I have added a sample below.
We can also use images as background by adding background-image property to the css definition.
#myElement {
width: 50px;
height: 300px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.myBar {
width: 100%;
height: 10px;
background: white;
}
.myBar:nth-child(1){
background:red;
}
----------
<div id="myElement">
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
</div>

I remember seeing in another post of yours that you want to make a progress bar (you should mention these things to make it easier for others to answer with relevant answers). And you probably want to change the height dynamically or something with this one div (to simulate the progress).
You can use the css property clip-path to achieve the effect of alternating between your gradient and a transparent background:
.container {
background: url(https://picsum.photos/id/999/360);
padding: 20px;
width: 320px;
}
#myElement {
width: 50px;
height: 320px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
clip-path: polygon(
0 0,100% 0,100% 20px,0 20px,
0 30px,100% 30px,100% 50px,0 50px,
0 60px,100% 60px,100% 80px,0 80px,
0 90px,100% 90px,100% 110px,0 110px,
0 120px,100% 120px,100% 140px,0 140px,
0 150px,100% 150px,100% 170px,0 170px,
0 180px,100% 180px,100% 200px,0 200px,
0 210px,100% 210px,100% 230px,0 230px,
0 240px,100% 240px,100% 260px,0 260px,
0 270px,100% 270px,100% 290px,0 290px,
0 300px,100% 300px,100% 320px,0 320px
);
}
<!--
I just added the container to show a background image behind
the element with the clip-path
-->
<div class="container">
<div id="myElement"></div>
</div>

You can create it easily using svg masking technique because using divs will not work
As you will see on running the snippet that the image is behind the svg but looks very clear as the black part is now transparent.
#myElement {
width: 50px;
height: 300px;
position: relative;
}
img{
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<svg width="50" height="300" id="myElement">
<defs>
<linearGradient xl=0 x2=0 y1=0 y2=1 id="Gradient">
<stop stop-color="#fe49a6" offset="0%" />
<stop stop-color="#4a94cd" offset="100%" />
</linearGradient>
<pattern id="pattern" x="0" y="0" width="50" height="30" patternUnits="userSpaceOnUse">
<rect x=0 y=0 width=50 height=20 fill="#999" />
</pattern>
<mask id="mask-gradient" x="0" y="0" width="50" height="300">
<rect x="0" y="0" width="50" height="300" fill="url(#pattern)" />
</mask>
</defs>
<rect id="rect1" fill=url(#Gradient) x="0" y="0" width="50" height="300" mask="url(#mask-gradient)" />
</svg>
</div>
<img src="https://images.unsplash.com/photo-1667400104714-53da4894bf18?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
</body>
</html>

This is a job for mask
#myElement {
width: 50px;
height: 300px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
-webkit-mask: linear-gradient(0deg,#0000 10px, #000 0) 0 0/100% 10%;
}
body {
background: orange;
}
<div id="myElement">
</div>

Close menu when click detected outside

I'm trying to close a menu when the user clicks outside of the element. I have tried many solutions from Stack overflow but none of them work for me. The user should be able to click on the menu button (3 dots), which then shows the menu. Then if they click outside of this, it should close each time.
https://jsfiddle.net/Lzeukhcj/1/
Here is my code and what I have tried:
Javascript
const dots = document.querySelector(".dot-wrap");
const popup = document.querySelector(".popup");
dots.onclick = () => {
popup.style.display = "block";
}
document.onclick = (event) => {
let isClickInside = popup.contains(event.target);
if (!isClickInside) {
console.log("outside box");
popup.style.display = 'none';
}
}
SCSS
.tweet-container {
max-width: 100%;
display: flex;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
border-bottom: solid 1px #f1f1f1;
}
.tweet-container-right {
width: 100%;
margin-left: 10px;
}
.tweet-header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.icon-container {
display: flex;
font-size: 0.8em;
}
.user-info {
display: flex;
align-items: center;
.tweet-name {
font-size: 15px;
margin-right: 3px;
color: #0f1419;
}
.tweet-username {
font-size:15px;
color: #526470;
}
.middle-dot{
margin-left: 3px;
margin-right: 3px;
}
.time {
font-size: 15px;
color: #526470;
}
}
.tweet-text {
font-size: 0.8em;
}
.verified-tick{
margin-right: 3px;
}
.dots-popup-container {
position: relative;
.dots {
width: 18px;
fill: red;
}
.popup {
background-color: white;
position: absolute;
right: 0;
top: 0;
width: 250px;
display: none;
/*height: 0px;*/
transition: 2s ease;
box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.2);
padding-top: 14px;
.popup-option {
display: flex;
margin-bottom: 20px;
p {
color: #526470;
}
.popup-icon {
width: 20px;
margin-left: 10px;
margin-right: 10px;
fill: #526470;
}
}
}
}
HTML
<div class="tweet-container-right">
<div class="tweet-header">
<div class="user-info">
<h3 class="tweet-name">Title </h3>
<span class="middle-dot">·</span>
<p class="time">2d</p>
</div>
<div class="dots-popup-container">
<div class="dot-wrap">
<svg viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi dots">
<g>
<circle cx="5" cy="12" r="2"></circle>
<circle cx="12" cy="12" r="2"></circle>
<circle cx="19" cy="12" r="2"></circle>
</g>
</svg>
</div>
<div class="popup">
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
<path d="M12 13.415c1.892 0 3.633.95 4.656 2.544.224.348.123.81-.226 1.035-.348.226-.812.124-1.036-.226-.747-1.162-2.016-1.855-3.395-1.855s-2.648.693-3.396 1.854c-.224.35-.688.45-1.036.225-.35-.224-.45-.688-.226-1.036 1.025-1.594 2.766-2.545 4.658-2.545zm4.216-3.957c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478s1.478.66 1.478 1.478zm-5.476 0c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478.817 0 1.478.66 1.478 1.478z"></path>
</g>
</svg></div>
<p>Not interested in this tweet</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Unfollow whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M1.75 22.354c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.06L20.395 1.898c.293-.294.768-.294 1.06 0s.294.767 0 1.06L2.28 22.135c-.146.146-.338.22-.53.22zm1.716-5.577c-.134 0-.27-.036-.392-.11-.67-.413-1.07-1.13-1.07-1.917v-5.5c0-1.24 1.01-2.25 2.25-2.25H6.74l7.047-5.588c.225-.18.533-.215.792-.087.258.125.423.387.423.675v3.28c0 .415-.336.75-.75.75s-.75-.335-.75-.75V3.553L7.47 8.338c-.134.104-.298.162-.467.162h-2.75c-.413 0-.75.337-.75.75v5.5c0 .263.134.5.356.64.353.216.462.678.245 1.03-.14.23-.387.357-.64.357zm10.787 5.973c-.166 0-.33-.055-.466-.162l-4.795-3.803c-.325-.258-.38-.73-.122-1.054.258-.322.73-.38 1.054-.12l3.58 2.838v-7.013c0-.414.335-.75.75-.75s.75.336.75.75V22c0 .288-.166.55-.425.675-.104.05-.216.075-.327.075z"></path>
</g>
</svg> </div>
<p>Mute whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 1.25C6.072 1.25 1.25 6.072 1.25 12S6.072 22.75 12 22.75 22.75 17.928 22.75 12 17.928 1.25 12 1.25zm0 1.5c2.28 0 4.368.834 5.982 2.207L4.957 17.982C3.584 16.368 2.75 14.282 2.75 12c0-5.1 4.15-9.25 9.25-9.25zm0 18.5c-2.28 0-4.368-.834-5.982-2.207L19.043 6.018c1.373 1.614 2.207 3.7 2.207 5.982 0 5.1-4.15 9.25-9.25 9.25z"></path>
</g>
</svg>
</div>
<p>Block whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Mark as spoiler</p>
</div>
</div>
</div>
</div>

When you click the dots to open the popup, your document click event listener is checking whether the target is a child of the popup. Since the toggle is not, the modal is opened, then closed.
You can fix this by using Event.stopPropagation() to prevent this click event from being captured by the document click event listener when the dots are clicked.
Your JS should be:
window.onload = () => {
const dots = document.querySelector(".dot-wrap");
const popup = document.querySelector(".popup");
dots.onclick = (e) => {
popup.style.display = "block";
e.stopPropagation();
}
document.onclick = (event) => {
let isClickInside = popup.contains(event.target);
if (!isClickInside) {
console.log("outside box");
popup.style.display = 'none';
}
}
}
Demo:
window.onload = () => {
const dots = document.querySelector(".dot-wrap");
const popup = document.querySelector(".popup");
dots.onclick = (e) => {
popup.style.display = "block";
e.stopPropagation();
}
document.onclick = (event) => {
let isClickInside = popup.contains(event.target);
if (!isClickInside) {
console.log("outside box");
popup.style.display = 'none';
}
}
}
/* compiled from scss */
.tweet-container {
max-width: 100%;
display: flex;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
border-bottom: solid 1px #f1f1f1;
}
.tweet-container-right {
width: 100%;
margin-left: 10px;
}
.tweet-header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.icon-container {
display: flex;
font-size: 0.8em;
}
.user-info {
display: flex;
align-items: center;
}
.user-info .tweet-name {
font-size: 15px;
margin-right: 3px;
color: #0f1419;
}
.user-info .tweet-username {
font-size: 15px;
color: #526470;
}
.user-info .middle-dot {
margin-left: 3px;
margin-right: 3px;
}
.user-info .time {
font-size: 15px;
color: #526470;
}
.tweet-text {
font-size: 0.8em;
}
.verified-tick {
margin-right: 3px;
}
.dots-popup-container {
position: relative;
}
.dots-popup-container .dots {
width: 18px;
fill: red;
}
.dots-popup-container .popup {
background-color: white;
position: absolute;
right: 0;
top: 0;
width: 250px;
display: none;
/*height: 0px;*/
transition: 2s ease;
box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.2);
padding-top: 14px;
}
.dots-popup-container .popup .popup-option {
display: flex;
margin-bottom: 20px;
}
.dots-popup-container .popup .popup-option p {
color: #526470;
}
.dots-popup-container .popup .popup-option .popup-icon {
width: 20px;
margin-left: 10px;
margin-right: 10px;
fill: #526470;
}
<div class="tweet-container">
<div class="tweet-container-right">
<div class="tweet-header">
<div class="user-info">
<h3 class="tweet-name">Title </h3>
<span class="middle-dot">·</span>
<p class="time">2d</p>
</div>
<div class="dots-popup-container">
<div class="dot-wrap">
<svg viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi dots">
<g>
<circle cx="5" cy="12" r="2"></circle>
<circle cx="12" cy="12" r="2"></circle>
<circle cx="19" cy="12" r="2"></circle>
</g>
</svg>
</div>
<div class="popup">
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
<path d="M12 13.415c1.892 0 3.633.95 4.656 2.544.224.348.123.81-.226 1.035-.348.226-.812.124-1.036-.226-.747-1.162-2.016-1.855-3.395-1.855s-2.648.693-3.396 1.854c-.224.35-.688.45-1.036.225-.35-.224-.45-.688-.226-1.036 1.025-1.594 2.766-2.545 4.658-2.545zm4.216-3.957c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478s1.478.66 1.478 1.478zm-5.476 0c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478.817 0 1.478.66 1.478 1.478z"></path>
</g>
</svg></div>
<p>Not interested in this tweet</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Unfollow whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M1.75 22.354c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.06L20.395 1.898c.293-.294.768-.294 1.06 0s.294.767 0 1.06L2.28 22.135c-.146.146-.338.22-.53.22zm1.716-5.577c-.134 0-.27-.036-.392-.11-.67-.413-1.07-1.13-1.07-1.917v-5.5c0-1.24 1.01-2.25 2.25-2.25H6.74l7.047-5.588c.225-.18.533-.215.792-.087.258.125.423.387.423.675v3.28c0 .415-.336.75-.75.75s-.75-.335-.75-.75V3.553L7.47 8.338c-.134.104-.298.162-.467.162h-2.75c-.413 0-.75.337-.75.75v5.5c0 .263.134.5.356.64.353.216.462.678.245 1.03-.14.23-.387.357-.64.357zm10.787 5.973c-.166 0-.33-.055-.466-.162l-4.795-3.803c-.325-.258-.38-.73-.122-1.054.258-.322.73-.38 1.054-.12l3.58 2.838v-7.013c0-.414.335-.75.75-.75s.75.336.75.75V22c0 .288-.166.55-.425.675-.104.05-.216.075-.327.075z"></path>
</g>
</svg> </div>
<p>Mute whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 1.25C6.072 1.25 1.25 6.072 1.25 12S6.072 22.75 12 22.75 22.75 17.928 22.75 12 17.928 1.25 12 1.25zm0 1.5c2.28 0 4.368.834 5.982 2.207L4.957 17.982C3.584 16.368 2.75 14.282 2.75 12c0-5.1 4.15-9.25 9.25-9.25zm0 18.5c-2.28 0-4.368-.834-5.982-2.207L19.043 6.018c1.373 1.614 2.207 3.7 2.207 5.982 0 5.1-4.15 9.25-9.25 9.25z"></path>
</g>
</svg>
</div>
<p>Block whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Mark as spoiler</p>
</div>
</div>
</div>
</div>

scroll bar with horizontal scroll sticking in the body

I'm asking you for some help because I'm struggling a bit with CSS/JS, it's been a long time since I've practiced.
Basically I'm trying to make a section with a "sticky" title that scrolls horizontally with a block just below it that also stays sticky until I finish making this horizontal scrolling.
I managed to set up the structure but I think I need to add some more JS or modify what has been done. Currently I have 2 scrollbars I would like to have only one but that acts like I have two.
I put you the JSfiddle it will be more clear:
https://jsfiddle.net/ps4b10ro
const spaceHolder = document.querySelector('.space-holder');
const horizontal = document.querySelector('.horizontal');
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
function calcDynamicHeight(ref) {
const vw = window.innerWidth;
const vh = window.innerHeight;
const objectWidth = ref.scrollWidth;
return objectWidth - vw + vh + 150; // 150 is the padding (in pixels) desired on the right side of the .cards container. This can be set to whatever your styles dictate
}
window.addEventListener('scroll', () => {
const sticky = document.querySelector('.sticky');
horizontal.style.transform = `translateX(-${sticky.offsetTop}px)`;
});
window.addEventListener('resize', () => {
spaceHolder.style.height = `${calcDynamicHeight(horizontal)}px`;
});
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
mousewheelControl: true,
slidesPerView: 1,
// freeMode: true,
// freeModeSticky: true
});
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 100%;
}
body {
margin: 0;
font-family: sans-serif;
}
.container {
position: relative;
width: 100%;
min-height: 100vh;
}
.space-holder {
background-color: #111;
position: relative;
width: 100%;
}
.sticky {
height: 100vh;
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow-x: hidden;
}
.horizontal {
position: absolute;
height: 100%;
will-change: transform;
}
.cards {
position: relative;
height: fit-content;
padding: 0 0 0 150px;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.horizontalText {
color: #fff;
font-size: 4em;
padding: 0 3vw 0 3vw;
width: 53vw;
height: fit-content;
}
.etsy {
background-color: #fff;
margin-top: 22vh;
height: 400px;
position: sticky;
bottom: 350vh;
height: 100%;
overflow: hidden;
}
.test {
background-color: blanchedalmond;
height: 1000px;
}
<div class="test"></div>
<div class="module"></div>
<section class="container">
<div class="space-holder">
<div class="sticky">
<div class="horizontal">
<section role="feed" class="cards">
<h2 class="horizontalText">Discovers our products</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our universe</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our products</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our universe</h2>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="24" fill="#EDD337"/>
</svg>
<h2 class="horizontalText">Discovers our products</h2>
</section>
</div>
<section class="etsy sticky">
<section id="emporter container" class="blanc hori">
<div class="wrap">
<div class="defilement">
<a href="/articles/damien-rice">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/11/18/fd9c7d252ab9de5569c9fcc96aabaaff.jpg) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Damien Rice</h3>
<p>Soirée de Poche #54</p>
</a>
<a href="/articles/benjamin-booker-25870">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2020/01/02/27cd1d46f726bf3e4c15a79ad42e8e0a.png) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Benjamin Booker</h3>
<p>Soirée de Poche #53</p>
</a>
<a href="/articles/shame">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/11/18/ec085ebc867db30fc41f8be3b247ec37.jpg) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Shame</h3>
<p>Soirée de Poche #52</p>
</a>
<a href="/articles/hamilton-leithauser">
<div class="cover" style="background:url(https://cdn.blogotheque.net/blogotheque/2019/12/05/b56f9fbe55b912ad931376338a655440.png) 50% 50%">
<div><img src="/packs/media/img/play-9e06fa89856b9d33899e081448a066f5.svg" alt=""></div>
</div>
<h3>Hamilton Leithauser</h3>
<p>Soirée de Poche #51</p>
</a>
</div>
<div class="navigation">
<!-- <img class="pointer gauche bloque" src="img/agaucheN.svg" alt="" /> -->
<svg class="pointer gauche bloque" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#111" stroke-width="2" transform="matrix(1 0 0 -1 0 40)"><circle cx="20" cy="20" r="19"></circle><path d="m22.3823529 14-6.3823529 6.3823529 6.3823529 6.4852942"></path></g></svg>
<!-- <img class="pointer droite" src="img/agaucheN.svg" alt="" /> -->
<svg class="pointer droite" height="40" viewBox="0 0 40 40" width="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="#111" stroke-width="2" transform="matrix(1 0 0 -1 0 40)"><circle cx="20" cy="20" r="19"></circle><path d="m22.3823529 14-6.3823529 6.3823529 6.3823529 6.4852942"></path></g></svg>
<div class="progress">
<div style="transform: matrix(0.2, 0, 0, 1, 0, 0);"></div>
</div>
</div>
</div>
</section>
</section>
<div class="test">
</div>
Thank you in advance for your help and or your advice

Make overlapping html and svg based elements respond to click event

Is there a way to make both the html based div and the SVG based line in the snippet below respond to javascript?
I know of the pointer-events css property. But it seems to be all or nothing to me - I want both elements to respond to events ...
#main {
position: relative;
width: 600px;
}
svg {
border: 1px solid blue;
red;
position: absolute;
top: 0;
width: 100%;
height: 100%;
stroke: rgb(155, 155, 155);
stroke-width: 10
}
#box-container {
display: flex;
}
.box {
width: 200px;
background-color: pink;
height: 100px;
}
<div>
<p>
Html based boxes should be clickable
</p>
<p>
SVG based line should be clickable
</p>
</div>
<div id="main">
<svg>
<line onClick="alert('line')" x1="0" y1="0" x2="600" y2="100" />
</svg>
<div style="display:flex;">
<div onClick="alert('one')" class="box">
One
</div>
<div onClick="alert('two')" style="margin-left:auto" class="box">
Two
</div>
</div>
</div>

#main {
position: relative;
width: 600px;
}
svg {
border: 1px solid blue;
red;
position: absolute;
top: 0;
width: 100%;
height: 100%;
stroke: rgb(155, 155, 155);
stroke-width: 10
}
#box-container {
display: flex;
}
.box {
width: 200px;
background-color: pink;
height: 100px;
}
<div>
<p>
Html based boxes should be clickable
</p>
<p>
SVG based line should be clickable
</p>
</div>
<div id="main">
<svg>
<line style="pointer-events:all;" onClick="alert('line')" x1="0" y1="0" x2="600" y2="100" />
</svg>
<div style="display:flex;">
<div onClick="alert('one')" class="box">
One
</div>
<div onClick="alert('two')" style="margin-left:auto" class="box">
Two
</div>
</div>
</div>

You can't. But you can trigger click event on another element like this.
function lineClick() {
alert('line')
document.querySelector("#one").click()
}
#main {
position: relative;
width: 600px;
}
svg {
border: 1px solid blue;
position: absolute;
top: 0;
width: 100%;
height: 100%;
stroke: rgb(155, 155, 155);
stroke-width: 10
}
#box-container {
display: flex;
}
.box {
width: 200px;
background-color: pink;
height: 100px;
}
<div>
<p>
Html based boxes should be clickable
</p>
<p>
SVG based line should be clickable
</p>
</div>
<div id="main">
<svg>
<line onClick="lineClick()" x1="0" y1="0" x2="600" y2="100" />
</svg>
<div style="display:flex;">
<div onClick="alert('one')" class="box" id="one">
One
</div>
<div onClick="alert('two')" style="margin-left:auto" class="box">
Two
</div>
</div>
</div>

You can set svg{pointer-events:none}(won't respond to mouse events). Next you can give the line{pointer-events:all}/(will respond to mouse events). If you need one to respond on the same event as the line use #dgknca's solution.
#main {
position: relative;
width: 600px;
}
svg {
border: 1px solid blue;
red;
position: absolute;
top: 0;
width: 100%;
height: 100%;
stroke: rgb(155, 155, 155);
stroke-width: 10;
pointer-events:none;
}
line{pointer-events:all;}
#box-container {
display: flex;
}
.box {
width: 200px;
background-color: pink;
height: 100px;
}
<div>
<p>
Html based boxes should be clickable
</p>
<p>
SVG based line should be clickable
</p>
</div>
<div id="main">
<svg>
<line onClick="alert('line')" x1="0" y1="0" x2="600" y2="100" />
</svg>
<div style="display:flex;">
<div onClick="alert('one')" class="box">
One
</div>
<div onClick="alert('two')" style="margin-left:auto" class="box">
Two
</div>
</div>
</div>

If you want a single delegated Event handler, you can use elementsFromPoint(x,y)
<script>
function clickHandler(evt) {
// get all Elements under this X,Y point
let elements = document.elementsFromPoint(evt.clientX, evt.clientY);
// disregard the SVG element
let element = elements[(elements[0].nodeName == "svg") ? 1 : 0];
console.log(elements);
console.log(element);
}
</script>
<style>
#main {
position: relative;
width: 600px;
}
svg {
position: absolute;
top: 0;
width: 100%;
height: 100%;
stroke: green;
stroke-width: 10
}
.box {
width: 200px;
background-color: pink;
height: 100px;
}
</style>
<div id="main" onclick="clickHandler(event)">
<svg>
<line x1="0" y1="0" x2="600" y2="100" />
</svg>
<div style="display:flex;">
<div class="box" id=ONE>
One
</div>
<div style="margin-left:auto" class="box" id=TWO>
Two
</div>
</div>
</div>

My element wont position center

My element "#splashlogo" doesn't seem to want to centre in the body of my document.I have tried positions; absolute, relative, fixed etc. I'm not sure what is happening.
It may be something to do with other parts of my code...?
My HTML:
<html><head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/splashscreenstyle.css">
</head>
<body>
<script src="http://codepen.io/assets/libs/fullpage/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
//hiding initially
$('.scene').hide();
//Fade In and delay 2.5 sec then Fade Out
$('.splashscreenlogo').hide().fadeIn(function() {
$(this).delay(2500).fadeOut(function() {
//Fade In and delay 3 sec then Fade Out
$('.scene').fadeIn(function() {
$(this).delay(15000).fadeOut(function() {
//Redirect to any location
window.location = 'index.html';
});
});
});
});
});
window.onload = function() {
Animate(1);
Animate(2);
}
function Animate(number) {
var line = document.getElementById('movingLine' + number);
var lineLength = line.getTotalLength().toString();
var lineAnim = document.getElementById('lineAnim' + number);
line.setAttributeNS(null, 'stroke-dasharray', lineLength + " " + lineLength);
line.setAttributeNS(null, 'stroke-dashoffset', lineLength);
lineAnim.setAttributeNS(null, 'from', lineLength);
lineAnim.setAttributeNS(null, 'values', lineLength + ';0');
}
function fade(number) {
var line = document.getElementById('movingLine' + number);
var animation = document.createElementNS(
'http://www.w3.org/2000/svg', 'animate');
animation.setAttributeNS(null, 'attributeName', 'opacity');
animation.setAttributeNS(null, 'to', 0);
animation.setAttributeNS(null, 'dur', 3.25);
animation.setAttributeNS(null, 'begin', 10);
animation.setAttributeNS(null, 'fill', 'freeze');
line.appendChild(animation);
}
</script>
<h4></h4>
<div class="scene" style="display: none;">
<svg version="1.1" id="dc-spinner" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width:"38"="" height:"38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
<text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">LOADING
<animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate>
</text>
<path fill="#2AA198" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M5.203,20
c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform>
</path>
<path fill="#859900" stroke="#ffffff" stroke-width="0.5027" stroke-miterlimit="10" d="M7.078,20
c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
C12.875,32.922,7.078,27.125,7.078,20z">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
</div>
<div class="splashscreenlogo" style="display: block;">
</div>
<div class="canvas_container">
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full">
<g>
<path id="movingLine1" d="m 20,-10 l -20,600 z" class="white-line" stroke-dasharray="1200.66650390625 1200.66650390625" stroke-dashoffset="1200.66650390625">
<animate id="lineAnim1" attributeName="stroke-dashoffset" from="1200.66650390625" to="0" dur="5.5s" begin="9.5s" fill="freeze" values="1200.66650390625;0"></animate>
</path></g>
<g>
<path id="movingLine2" d="m 80,-10 l -20,600 z" class="white-line" stroke-dasharray="1200.66650390625 1200.66650390625" stroke-dashoffset="1200.66650390625">
<animate id="lineAnim2" attributeName="stroke-dashoffset" from="1200.66650390625" to="0" dur="5.5s" begin="10.5s" fill="freeze" values="1200.66650390625;0"></animate>
</path></g>
</svg>
</div>
<div id="splashlogo">
<img src="logo_splashscreen.png" alt="Splashscreen logo">
</div></body></html>
My CSS:
/* Demo Styles */
html {
height: 100%;
min-height: 100%;
overflow: hidden;
}
html body {
background: url("Splashscreen.png") no-repeat;
background-size: 100%;
font: 14px/21px Monaco, sans-serif;
color: none;
font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
height: 100%;
min-height: 100%;
}
html body a, html body a:visited {
text-decoration: none;
color: #FFffF;
}
html body h4 {
margin: 0;
color: #666;
}
.scene {
width: 100%;
height: 100%;
-webkit-perspective: 600;
perspective: 600;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.scene svg {
width: 240px;
height: 240px;
}
.splashscreenlogo{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
/* height: 100%; */
}
#splashlogo{
position: absolute;
background-position: 50%;
/* top: 50%; */
/* width: 100%; */
/* height: 100%; */
}
.canvas_container{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.white-line {
fill: none;
stroke: white;
stroke-width: 5%;
}
Any help would be awesome!

Categories

Resources