Hi guys might be a very simple question, but i am playing around with a lightbox found here. I got it on my site and its working, however i want to use it on a different page, but i cant, so i am guesing i might need to change the ID about or something? i am not to sure,
HTML:
<a id="show-panel" href="#">Show Panel</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center"><a id="close-panel" href="#">Close this window</a></p>
</div>
<!-- /lightbox-panel -->
<div id="lightbox"></div>
<!-- /lightbox -->
CSS:
body{
margin:150px 0 0 0;
text-align:center;
background: #f1e7b0;
}
h2{
font-size: 32px;
}
a{
text-decoration: none;
color: #222222;
font-size: 18px;
}
/* Lightbox background */
#lightbox {
display:none;
background: rgba(0,0,0,0.8);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
So just to just fully be clear, i got it working for a one, but want to use the effect on anther object, i aien't to sure those how to change it so i can have diffrent content in the other one.
Thanks
You could even do it without JavaScript, as seen is this example below. All you need is to address the :target attribute with a corresponding id and href.
.lightbox {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.lightbox:target {
opacity: 1;
pointer-events: auto;
}
.lightbox > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 20px;
background: #fff;
}
.close {
background: black;
color: #fff;
line-height: 25px;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: auto;
text-decoration: none;
font-weight: bold;
}
.close:hover {
background: red;
}
Box 1
<div id="lightbox-1" class="lightbox">
<div>
Close
<p>
Box 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, et deleniti temporibus minus nisi voluptas molestias magni dolore qui, maxime blanditiis dolorem error nostrum, soluta exercitationem hic! Molestiae voluptas necessitatibus quo dignissimos
quis nobis magni eaque veniam rerum nisi laboriosam rem natus sint amet voluptatem voluptatum explicabo voluptatibus animi, et.
</p>
</div>
</div>
Box 2
<div id="lightbox-2" class="lightbox">
<div>
Close
<p>
Box 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad saepe non eos officia sequi, nemo quo ex facilis odio fuga ea eaque dolore perspiciatis obcaecati numquam reprehenderit consequuntur, repudiandae alias.
</p>
</div>
Related
I am trying to create a horizontal scrolling website and I was following this tutorial which uses this library; however I get a "this.on is not a function" or a similar error where something is not a function.
I have tried rotating my webpage but it just messes everything up (href anchors don't work?).
I tried to bind the .mousewheel on the window as well to no avail.
Is there another way to do this or is it just not possible?
HTML
<div class="main-container">
<nav class="main-nav">
<ul class="ul__first">
<li id="logo">
b
</li>
</ul>
<ul class="ul__second">
<li id="border">Homepage</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<div class="container">
<section id="section-one" class="section-one">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-two" class="section-two">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-three" class="section-three">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
<section id="section-4" class="section-4">
<div class="content">
<h3>Foo</h3>
<h1>Bar</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil praesentium veritatis repellendus, eaque accusamus veniam voluptatum quasi debitis laborum quod est qui repellat necessitatibus aliquid quae delectus ipsam ut mollitia?</p>
</div>
</section>
</div>
CSS
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
html,
body,
.main-container {
scroll-behavior: smooth;
height:100%;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
overflow-y:hidden;
overflow-x:hidden;
}
li {
list-style:none;
transition: all 0.4s;
z-index: 15;
}
li:hover{
transform: scale(1.1);
}
a{
text-decoration: none;
text-transform: uppercase;
color:white;
}
h1{
font-size: 70px;
text-transform: uppercase;
font-family:cursive;
letter-spacing: 10px;
}
h3 {
font-size: 30px;
font-family:fantasy;
}
p {
margin-top: 30px;
font-size: 14px;
font-family:sans-serif;
}
.main-container{
width: 100vw;
height: 100vh;
}
.main-nav {
position: fixed;
display: flex;
padding: 2em 4em;
z-index: 12;
}
.main-nav .ul__second{
position:fixed;
display: flex;
right: 4em;
}
#logo {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
}
.main-nav .ul__second li {
margin-left: 1.5em;
}
.main-nav .ul__second #border {
border: 1px solid rgb(255, 255, 255);
padding: 0 15px;
align-items: center;
}
.container {
width: 400vw;
display: flex;
flex-direction: row;
}
.container .section-one{
width: 100vw;
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8em;
}
.container .summer .img {
width: 400px;
height: 600px;
}
.content {
margin-top: 50px;
margin-right: 100px;
text-align: center;
z-index: 10;
}
::-webkit-scrollbar{
display:none;
}
JS
$(function() {
$("html, body, *").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 80);
this.scrollRight -= (delta * 80);
event.preventDefault();
});
});
Sorry for the formatting!
Thank you!
The error is coming from the mousewheel library you linked to.
If you were following the tutorial you linked exactly, your issue is probably stemming from the old version of jquery (1.3.2), referenced in that tutorial.
If you update to the latest version of jquery (3.5.1) https://code.jquery.com/, you won't get that error anymore.
This is probably asked a million times, but I still cannot make it work: Whenever I use Jquery, the fadeIn(), fadeOut(), and delay()-functions doesn't work for some reason. I'm not a professional in Jquery, but I've used it a lot.
I want to make a tooltip-like div, whenever I hover over the box, it appears some time after with a fading effect. I implement my JS/ Juery at the bottom of the body (which should work), but I'm also using the Twitter Bootstrap css and it's starter template.
var rellax = new Rellax('.rellax')
var mouseX;
var mouseY;
$(document).mousemove(function(e) {
// mouse coordinates
mouseX = e.pageX;
mouseY = e.pageY;
});
$('.me').mouseover(function() {
$(this).mousemove(function() {
// show tooltip
$('.pointer').hide().delay(2000).fadeIn('slow');
$('.pointer').css({
left: mouseX,
top: mouseY
});
});
}).mouseout(function() {
// hide tooltip
$('.pointer').fadeOut('slow');
});
$(function() {
$('.me').click(function() {
console.log('Click..');
window.location = "#about_me";
});
});
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #fff;
}
.hero-image,
.front,
.name,
.portfolio,
.click_me {
position: absolute;
width: 100%;
height: 100vh;
background: url("hero.jpg") no-repeat 50% 0;
background-size: cover;
}
.front {
background: url("front_png8.png") no-repeat 50% 0;
background-size: cover;
}
.me {
width: 285px;
height: 790px;
position: absolute;
top: 16%;
left: 65%;
border: 1px solid green;
}
.me:hover {
cursor: pointer;
}
.name {
background: url("name.png") no-repeat 50% 50%;
background-size: cover;
opacity: 70%;
top: 18%;
}
.click_me {
background: url("click_me.png") no-repeat 50% 50%;
background-size: cover;
top: 10%
}
.portfolio {
background: url("portfolio.png") no-repeat 50% 50%;
background-size: cover;
opacity: 70%;
top: 14%;
}
.whitespace {
width: 100%;
height: 100vh;
}
.content {
width: 80%;
margin: 0 auto;
padding: 80px 0;
font-family: Helvetica;
}
.pointer {
position: absolute;
display: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: green;
border-radius: 50%;
pointer-events: none;
box-sizing: border-box;
transition: 10ms;
}
<div class="hero-image"></div>
<div class="rellax portfolio" data-rellax-speed="4"></div>
<div class="front"></div>
<div class="rellax click_me" data-rellax-speed="-3"></div>
<div class="rellax name" data-rellax-speed="8"></div>
<div class="me"></div>
<div class="whitespace"></div>
<div class="pointer"></div>
<div class="content">
<div id="about_me">
<h2></h2>
<p>
16 Jan 1999 I am a IT-student at Thomas More Kempen. In my spare time I play the guitar and piano and I love going out with friends. Motivation When I graduate, I would like to work for a company in the programming sector to show my creativity and designing
skills. My dream is to become a game developer and I would like to start my own company.
</p>
</div>
<div>
<h1></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ipsum iste molestiae natus quidem? Aut consequuntur doloribus eos ex expedita fugit illo iste maxime neque, officia perferendis quae quia quisquam temporibus vel veniam, voluptates! Culpa
dignissimos dolores eius eveniet, expedita ipsam, laudantium magni nostrum numquam recusandae repudiandae, ut vel! Accusamus accusantium amet aperiam blanditiis deleniti dignissimos esse est explicabo facere illum, ipsam iusto laboriosam laborum
libero maiores modi, neque nisi odit officia porro possimus praesentium provident quasi quia quis quos reiciendis repellendus repudiandae saepe, tempora vel vero voluptate voluptates. Commodi, culpa doloribus in numquam quam sequi tenetur! Cum et,
placeat?</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js" integrity="sha256-+xf9aJnHocnmrigq2hIDJGBSAnJdF5NH+Ooe5J2PHiI=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
I have made a fiddle: https://jsfiddle.net/Nick_Sch/yupxbq5r/5/ (first time using a fiddle..)
I see you have two versions of jQuery, should pick one.
You might want to use event properties on Mouse Over. I like to use .hover() instead.
Consider the following.
$(function() {
var rellax = new Rellax('.rellax');
$('.me').click(function() {
console.log('Click..');
window.location = "#about_me";
}).hover(function(e) {
// show tooltip
$(".pointer").fadeOut(1, function() {
setTimeout(function() {
$(".pointer").css({
left: e.pageX + "px",
top: e.pageY + "px"
}).fadeIn("slow");
}, 2000);
});
},
function(e) {
// hide tooltip
$('.pointer').fadeOut('slow');
});
});
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #fff;
}
.hero-image,
.front,
.name,
.portfolio,
.click_me {
position: absolute;
width: 100%;
height: 100vh;
background: url("hero.jpg") no-repeat 50% 0;
background-size: cover;
}
.front {
background: url("front_png8.png") no-repeat 50% 0;
background-size: cover;
}
.me {
width: 285px;
height: 790px;
position: absolute;
top: 16%;
left: 65%;
border: 1px solid green;
}
.me:hover {
cursor: pointer;
}
.name {
background: url("name.png") no-repeat 50% 50%;
background-size: cover;
opacity: 70%;
top: 18%;
}
.click_me {
background: url("click_me.png") no-repeat 50% 50%;
background-size: cover;
top: 10%
}
.portfolio {
background: url("portfolio.png") no-repeat 50% 50%;
background-size: cover;
opacity: 70%;
top: 14%;
}
.whitespace {
width: 100%;
height: 100vh;
}
.content {
width: 80%;
margin: 0 auto;
padding: 80px 0;
font-family: Helvetica;
}
.pointer {
position: absolute;
display: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: green;
border-radius: 50%;
pointer-events: none;
box-sizing: border-box;
transition: 10ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js" integrity="sha256-+xf9aJnHocnmrigq2hIDJGBSAnJdF5NH+Ooe5J2PHiI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="hero-image"></div>
<div class="rellax portfolio" data-rellax-speed="4"></div>
<div class="front"></div>
<div class="rellax click_me" data-rellax-speed="-3"></div>
<div class="rellax name" data-rellax-speed="8"></div>
<div class="me"></div>
<div class="whitespace"></div>
<div class="pointer"></div>
<div class="content">
<div id="about_me">
<h2></h2>
<p>16 Jan 1999 I am a IT-student at Thomas More Kempen. In my spare time I play the guitar and piano and I love going out with friends. Motivation When I graduate, I would like to work for a company in the programming sector to show my creativity and
designing skills. My dream is to become a game developer and I would like to start my own company.</p>
</div>
<div>
<h1></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea ipsum iste molestiae natus quidem? Aut consequuntur doloribus eos ex expedita fugit illo iste maxime neque, officia perferendis quae quia quisquam temporibus vel veniam, voluptates! Culpa
dignissimos dolores eius eveniet, expedita ipsam, laudantium magni nostrum numquam recusandae repudiandae, ut vel! Accusamus accusantium amet aperiam blanditiis deleniti dignissimos esse est explicabo facere illum, ipsam iusto laboriosam laborum
libero maiores modi, neque nisi odit officia porro possimus praesentium provident quasi quia quis quos reiciendis repellendus repudiandae saepe, tempora vel vero voluptate voluptates. Commodi, culpa doloribus in numquam quam sequi tenetur! Cum et,
placeat?
</p>
</div>
</div>
See More: https://api.jquery.com/hover/
I was looking to trigger different sticky buttons/modals for each of my sections.
I want on click hit, a modal popup appears with all the article details.
Everything works fine so far.
My problem is that when first modal is open with all the article details,
I can see the button from the second modals. I tried organizing some specs of the z-index but is not working with the sticking class of my divs.
I was wondering what I have to modify in my Javascript code to make visible just the article without any buttons of modals shown.
Any ideas to what I should fix in my fiddle to make it work correctly?
Here my fiddle: https://jsfiddle.net/CAT999/48rd76mp/5/
my snippet code is here below
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, height=device-height, width=device-width, maximum-scale=1">
<meta name="description" content="CAT is a designer and art director" />
<!--1--><!--1--><!--1--><!--1--><!--1--><!--1--><!--1-->
<!--SECTION-1-->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<div class="img-container" id="uno">
<img src="https://media.endclothing.com/end-features/prodfeatures/5ee628543c59bce18d2dd4614c7aa1b5ca8bca0f_end.-hiroshi-fujiwara-moncler-genius-interview12.jpg" alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<!--MODAL-1-->
<button class='btn-1 modal-btn'>Open Modal 1</button><div class="overlay" id="YourModalBox">
<span onclick="document.getElementById('YourModalBox').style.display='none'" class="close-button topright">×</span><div class="modal"><span>
Title Description-1 👋 🌎<br>
"Sed ut perspiciatis 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.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</span></div></div>
<!--MODAL-1-->
</div></div></div>
<!--1--><!--1--><!--1--><!--1--><!--1--><!--1--><!--1-->
<!--2--><!--2--><!--2--><!--2--><!--2--><!--2--><!--2-->
<!--SECTION-2-->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<div class="img-container" id="due">
<img src="https://i.pinimg.com/originals/90/ec/76/90ec76614129cba11f178821e59a99f8.jpg" alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<!--MODAL-2-->
<button class='btn-2 modal-btn'>Open Modal 2</button><div class="overlay" id="YourModalBox2">
<span onclick="document.getElementById('YourModalBox2').style.display='none'" class="close-button topright">×</span><div class="modal"><span>
Title Description-1 👋 🌎<br>
"Sed ut perspiciatis 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.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</span></div></div>
<!--MODAL-2-->
</div></div></div>
<!--2--><!--2--><!--2--><!--2--><!--2--><!--2--><!--2-->
<!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3-->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<!-- img-container -->
<div class="img-container" id="tre">
<img src="https://media.gq.com/photos/5da1fd854e024d0009825bfd/4:3/w_2520,h_1891,c_limit/pharrell-williams-cover-gq-november-2019-02-16x9.jpg" alt="Smiley face">
<div class="sticky"><div class="sticky-button">
<!--MODAL-3-->
<button class='btn-3 modal-btn'>Tomoaki Nagao info</button>
<div class="overlay" id="YourModalBox3">
<span onclick="document.getElementById('YourModalBox3').style.display='none'" class="close-button topright">×</span>
<div class="modal"><span>Title Description-3 👋 🌎<br>"Sed ut perspiciatis 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.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</span></div></div>
<!--MODAL-3-->
</div></div></div>
<!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3--><!--3-->
<!-- REMOVE!! -->
<div class="break-2"></div>
<!-- REMOVE!! -->
.close-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: red;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.topright {
position: fixed!important;
right: 20px;
top: 20px;
}
*{ z-index: 999999;
margin:0;
padding:0;
}
body, html{
font-size: 16px;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.img-container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding:20px;
background-color: white;
justify-content: center;
z-index:0;
}
#media only screen and (max-width:800px){
.img-container {
padding:20px;
height: 80vh;
}
}
#media only screen and (max-width:450px){
.img-container {
padding:20px;
height: 82vh;
}
}
#uno{background:purple;}
#due{background: yellow;}
#tre{background:black;}
img {
position:absolute;
border-radius: 20px;
height:100%;
z-index:0;
}
#media only screen and (max-width:800px){
img {
width:95%;
height:80%;
object-fit: cover;
}
}
#media only screen and (max-width:450px){
img {
width:95%;
height:100%;
object-fit: cover;
}
}
.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 20px;
right:20px;
justify-content: space-between;
align-self: flex-end;
margin-left: auto;
}
.sticky-button {
background: none;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.4);
box-shadow:0 0px 7px rgba(0,0,0,0.4);
/*padding: 6px 10px;*/
color:white;
font-family:helvetica;
font-weight:600;
font-size: 1rem;
border-radius: 24px;
width: auto;
}
#media only screen and (max-width:800px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
#media only screen and (max-width:450px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
.sticky-button-description {
color: hsla(0,0%,100%,.75);
font-size: 12px;
line-height: 1.4em;
letter-spacing: normal;
font-size: 12px;
line-height: 1.4em;
font-weight:400;
font-family:helvetica;
display:inline;
letter-spacing: normal;
}
#media only screen and (max-width:450px){
.sticky-button-description{
}
}
.sticky-button-break {
padding:0.3rem;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.break{height:200px;
width:100%;
background:black;
margin:0;
padding:0;}
.break-2{height:900px;
width:100%;
background:red;
margin:0;
padding:0;}
.btn-1 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:100;
}
.btn-1:active {
transform: scale(10.9);
opacity:0;
z-index:20;
transition: transform .3s ease;
z-index:100;
}
.btn-2 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:50;
}
.btn-2:active {
position:sticky;
transform: scale(10.9);
z-index:50;
}
.btn-3 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:30;
}
.btn-3:active {
transform: scale(10.9);
z-index:30;
}
/* Modal */
.overlay {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;/*rgba(0, 0, 0, .55);*/
pointer-events: none;
}
.overlay, .modal {
opacity: 0;
transition: .5s;
}
.overlay--open {
opacity: 1;
pointer-events: auto;
}
.overlay--open .modal {
opacity: 1;
transform: none;
}
.modal {
position: fixed;
width: 100%;
margin: 15vh auto 0;
background: black;
color:#fff;
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s;
text-align: center;
font-size: 26px;
font-weight:400;
}
/*MODAL TRIGGER*/
/*MODAL TRIGGER*/
const modalBtns = document.querySelectorAll('.modal-btn');
let overlay;
modalBtns.forEach(btn => {
btn.onclick = function() {
overlay = this.nextElementSibling
overlay.classList.add('overlay--open');
}
})
function closeModal() {
overlay.classList.remove('overlay--open');
}
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
You can try my changes:
Moved modals outside of .sticky element
Made .modal-btn's onclick move up DOM parents and find nextElementSibling
Fixed the crazy z-index that was on *{} in CSS
Fixed z-index of the .modal-btn
Added z-index to .overlay
Removed the .close-button click event
Added a global clear of .overlay--open from .overlay when .close-button is clicked.
JSFiddle here: https://jsfiddle.net/o0aq92r7/2/
const modalBtns = document.querySelectorAll('.modal-btn');
const closeBtns = document.querySelectorAll('.close-button');
let overlay;
modalBtns.forEach(btn => {
btn.onclick = function() {
overlay = this.parentElement.parentElement.nextElementSibling
overlay.classList.add('overlay--open');
}
});
closeBtns.forEach(cBtn => {
cBtn.onclick = function() {
const overlayElements = document.querySelectorAll('.overlay');
overlayElements.forEach(overlay => {
overlay.classList.remove('overlay--open');
});
}
});
function onDocumentKeyUp(e) {
if (e.keyCode === 27) {
closeModal();
}
}
function onDocumentClick(e) {
if (e.target === overlay) {
closeModal();
}
}
document.addEventListener('click', onDocumentClick, false);
document.addEventListener('keyup', onDocumentKeyUp, false);
.close-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: red;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.topright {
position: fixed!important;
right: 20px;
top: 20px;
}
* {
z-index: 1;
margin:0;
padding:0;
}
body, html{
font-size: 16px;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.img-container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
padding:20px;
background-color: white;
justify-content: center;
z-index:0;
}
#media only screen and (max-width:800px){
.img-container {
padding:20px;
height: 80vh;
}
}
#media only screen and (max-width:450px){
.img-container {
padding:20px;
height: 82vh;
}
}
#uno{background:purple;}
#due{background: yellow;}
#tre{background:black;}
img {
position:absolute;
border-radius: 20px;
height:100%;
z-index:0;
}
#media only screen and (max-width:800px){
img {
width:95%;
height:80%;
object-fit: cover;
}
}
#media only screen and (max-width:450px){
img {
width:95%;
height:100%;
object-fit: cover;
}
}
.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 20px;
right:20px;
justify-content: space-between;
align-self: flex-end;
margin-left: auto;
}
.sticky-button {
background: none;
-webkit-font-smoothing: antialiased;
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.4);
box-shadow:0 0px 7px rgba(0,0,0,0.4);
/*padding: 6px 10px;*/
color:white;
font-family:helvetica;
font-weight:600;
font-size: 1rem;
border-radius: 24px;
width: auto;
}
#media only screen and (max-width:800px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
#media only screen and (max-width:450px){
.sticky-button {
width: auto;
font-size: 0.8rem;
}
}
.sticky-button-description {
color: hsla(0,0%,100%,.75);
font-size: 12px;
line-height: 1.4em;
letter-spacing: normal;
font-size: 12px;
line-height: 1.4em;
font-weight:400;
font-family:helvetica;
display:inline;
letter-spacing: normal;
}
#media only screen and (max-width:450px){
.sticky-button-description{
}
}
.sticky-button-break {
padding:0.3rem;
}
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
/*container-video*/
.break{height:200px;
width:100%;
background:black;
margin:0;
padding:0;}
.break-2{height:900px;
width:100%;
background:red;
margin:0;
padding:0;}
.btn-1 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:2;
}
.btn-1:active {
transform: scale(10.9);
opacity:0;
z-index:20;
transition: transform .3s ease;
z-index:100;
}
.btn-2 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:50;
}
.btn-2:active {
position:sticky;
transform: scale(10.9);
z-index:50;
}
.btn-3 {
border: none;
border-radius: 24px;
color: white;
background-color:#3E3E3E;
padding: 10px 18px;
font-size: 16px;
width: 100%;
cursor: pointer;
outline: none;
overflow: hidden;
box-shadow: 0px 12px 20px -12px rgba(0, 0, 0, 0.6);
transition: transform .3s ease;
z-index:30;
}
.btn-3:active {
transform: scale(10.9);
z-index:30;
}
/* Modal */
.overlay {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: black;/*rgba(0, 0, 0, .55);*/
pointer-events: none;
z-index: 5;
}
.overlay, .modal {
opacity: 0;
transition: .5s;
}
.overlay--open {
opacity: 1;
pointer-events: auto;
}
.overlay--open .modal {
opacity: 1;
transform: none;
}
.modal {
position: fixed;
width: 100%;
margin: 15vh auto 0;
background: black;
color:#fff;
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s;
text-align: center;
font-size: 26px;
font-weight:400;
}
/*MODAL TRIGGER*/
/*MODAL TRIGGER*/
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, height=device-height, width=device-width, maximum-scale=1">
<meta name="description" content="CAT is a designer and art director" />
</head>
<body>
<div class="img-container" id="uno">
<img src="https://assets.vogue.com/photos/5cd30b6bd2f46d2eca29ab09/master/w_2560%2Cc_limit/virgil-abloh-vogue-june-2019-issue.jpg"
alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<button class='btn-1 modal-btn'>Open Modal</button>
</div>
</div>
<!--MODAL-1-->
<div class="overlay" id="YourModalBox">
<span class="close-button topright">×</span>
<div class="modal"><span>
Title Description-1 👋 🌎<br>
"Sed ut perspiciatis 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.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</span></div>
</div>
<!--MODAL-1-->
</div>
<div class="img-container" id="due">
<img src="https://i.pinimg.com/originals/90/ec/76/90ec76614129cba11f178821e59a99f8.jpg" alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<button class='btn-2 modal-btn'>Karl info</button>
</div>
</div>
<!--MODAL-2-->
<div class="overlay" id="YourModalBox2">
<span class="close-button topright">×</span>
<div class="modal"><span>
Title Description-1 👋 🌎<br>
"Sed ut perspiciatis 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.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</span></div>
</div>
<!--MODAL-2-->
</div>
<div class="img-container" id="tre">
<img src="https://media.gq.com/photos/5da1fd854e024d0009825bfd/4:3/w_2520,h_1891,c_limit/pharrell-williams-cover-gq-november-2019-02-16x9.jpg"
alt="Smiley face">
<div class="sticky">
<div class="sticky-button">
<button class='btn-3 modal-btn'>Tomoaki Nagao info</button>
</div>
</div>
<!--MODAL-3-->
<div class="overlay" id="YourModalBox3">
<span class="close-button topright">×</span>
<div class="modal"><span>Title Description-3 👋 🌎<br>"Sed ut perspiciatis 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.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</span></div>
</div>
<!--MODAL-3-->
</div>
<!-- REMOVE!! -->
<div class="break-2"></div>
<!-- REMOVE!! -->
</body>
</html>
I seem to be running into a bit of issues with by off canvas navigation.
I'm trying to toggle two classes on one event listener, it's working with the nav menu, but it's not toggling the class on the .Site element. What am I doing wrong?
I'm trying to have the .Site element add a class to set the margin-left to 20% and have a width of 80% while the off canvas menu gets the width of 20% from 0. The Navigation works, but the .Site toggle doesn't work.
let navToggle = document.querySelector('.menuButton');
let nav = document.querySelector('.SiteNavigation');
let site = document.querySelector('.Site');
navToggle.addEventListener('click', (event) => {
nav.classList.toggle("SiteNavigationOpen");
site.classList.toggle("SiteNavOpen");
});
#use postcss-nested;
#use postcss-simple-vars;
html {
background: #fff;
scroll-behavior: smooth;
line-height: 1.15;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
text-shadow: none;
text-rendering: optimizeLegibility;
-webkit-font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: "kern";
font-feature-settings: "kern";
-webkit-font-kerning: normal;
font-kerning: normal;
font-size: calc(16px + (40 - 16) * ( (100vw - 320px) / (7680 - 320)));
}
html,
body {
font-family: 'Lato', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: 1.1;
margin-bottom: 1.1rem;
}
h1 {
font-size: 2.25rem
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75em
}
h4 {
font-size: 1.5rem
}
h5 {
font-size: 1.25rem
}
h6 {
font-size: 1rem;
}
p {
line-height: 1.5;
font-size: 1rem;
margin-bottom: 1.1rem;
font-weight: 300;
}
p.--mousePrint {
font-size: 0.8rem;
}
.textCenter {
text-align: center;
}
.Site {
width: 100%;
margin-left: 0;
}
.SiteNavOpen {
width: 80%;
margin-left: 20%;
}
.menuButton {
position: absolute;
top: 1vh;
right: 1vw;
border: none;
background: none;
color: #eaeaea;
}
.SiteHeader {
min-height: 100vh;
background: url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center center;
background-size: cover;
background-attachment: fixed;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: #eaeaea;
filter: sepia(40%);
}
.siteBranding {
display: flex;
flex-direction: column;
}
.siteBranding a {
color: #eaeaea;
}
.SiteMain {
background: #eaeaea;
color: #353535;
padding-left: 5vw;
padding-right: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}
.mainInner {
#media (min-width: 1280px) {
max-width:66vw;
margin: 0 auto;
}
}
.articleMain {
max-width: 33em;
margin: 0 auto;
}
.--textCenter {
text-align: center;
}
.SiteNavigation {
background: #66023c;
color: #eaeaea;
height: 100vh;
width: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.13s;
}
.SiteNavigationOpen {
width: 20%;
}
.SiteNavigation a {
color: #eaeaea;
}
.SiteNavigation li {
transition: all 0.13s;
}
.SiteNavigation li:hover {
transform: scale(1.2, 1.2);
}
.Site {
width: 100%;
margin-left: 0%;
transition: all 0.13s;
}
.SiteColophon {
background: #66023c;
color: #eaeaea;
padding-left: 5vw;
padding-right: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}
.colophonInner {
#media (min-width: 1280px) {
max-width:66vw;
margin: 0 auto;
}
}
.SiteFooter {
background: #66023c;
color: #eaeaea;
padding-left: 5vw;
padding-right: 5vw;
padding-top: 5vh;
padding-bottom: 5vh;
}
.footerInner {
#media (min-width: 1280px) {
max-width:66vw;
margin: 0 auto;
}
}
.socialMedia {
text-align: center;
}
.fab:hover {
transform: scale(1.2, 1.2);
}
.--btnLink {
background: none;
color: none;
border: none;
}
.socialMediaButton {
transition: all 0.13s;
}
.socialMediaButton:hover {
transform: scale(1.5, 1.5);
}
<nav class="SiteNavigation">
<ul class="nav">
<li>HOME</li>
<li>SERVICES</li>
<li>THEMES</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="Site">
<header class="SiteHeader">
<button class="menuButton">
<i class="fas fa-bars"></i>
</button>
<div class="siteBranding">
<h1 class="textCenter">TEOTIHUACAN DESIGN</h1>
<p class="textCenter">Quality Websmiths</p>
<button class="btn --btnLink alignCenter"><i class="fas fa-arrow-circle-down fa-2x"></i></button>
</div>
</header>
<main id="main" class="SiteMain">
<div class="mainInner">
<article class="articleMain">
<header class="articleHeader">
<h1 class="--textCenter">Niltze! (it means Hello!)</h1>
</header>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere molestiae ex qui laudantium, nobis voluptate quaerat suscipit veritatis ducimus animi corporis, perspiciatis aliquam aliquid! Corrupti dicta magnam autem labore quo.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. In obcaecati, consequatur sed officiis deleniti maxime reprehenderit possimus fugiat officia quasi, nemo doloremque numquam pariatur doloribus! Tempora facere harum earum provident nulla,
ipsam quos animi minus esse nihil! Tempore officiis possimus facilis sint, vel id ipsam obcaecati dolor dolorem suscipit molestias aliquam quaerat itaque distinctio beatae voluptates nostrum nesciunt voluptate? Quae temporibus vitae molestias
magnam sed, nostrum ducimus nulla, totam ad nihil aut magni asperiores natus esse quasi omnis quod voluptatem? Molestiae, possimus eos quis eveniet rerum tenetur aliquam ullam nemo? Laudantium ratione perspiciatis possimus quos quaerat quibusdam,
labore quod deserunt temporibus assumenda ipsam quasi repudiandae maiores quia sed architecto culpa nam cum veritatis fugiat itaque! Accusantium eos velit sunt quia soluta perspiciatis laudantium iste, neque minus consequuntur tempora incidunt
aliquid!</p>
</article>
</div>
</main>
<section class="SiteColophon">
<div class="colophonInner">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque laborum ipsam dolores nisi nesciunt. Doloribus recusandae rem aliquam veniam, soluta repellat earum, alias accusamus ipsam dolorum quo voluptatum dolor dolore.</p>
</div>
</section>
<footer class="SiteFooter">
<div class="footerInner">
<p class="--mousePrint textCenter">Copyright © 2020 Teotihuacan Design. Powered by WordPress</p>
<div class="socialMedia">
<button class="btn --btnLink socialMediaButton"><i class="fab fa-facebook"></i></button>
<button class="btn --btnLink socialMediaButton"><i class="fab fa-twitter"></i></button>
<button class="btn --btnLink socialMediaButton"><i class="fab fa-instagram"></i></button>
<button class="btn --btnLink socialMediaButton"><i class="fab fa-behance"></i></button>
<button class="btn --btnLink socialMediaButton"><i class="fab fa-dribbble"></i></button>
</div>
</div>
</footer>
</div>
I've checked your code and the classes apply correctly. If you inspect the divs you can see the classes applying.
The problem is in .SiteNavOpen CSS. Add the !important tag because width and margin-left get overwritten by .Site. Or, to avoid doing that add that CSS to .Site .SiteNavOpen. Like this:
.SiteNavOpen {
width: 80% !important;
margin-left: 20% !important;
}
//OR
.Site .SiteNavOpen {
width: 80%;
margin-left: 20%;
}
Also I would suggest you start using the DevTools in your browser. If a class CSS gets overwritten and ignored by another class you can see that there and realize where the problems come from.
What I want to do is: when I click on one of the buttons, the paragraph area shows (as it is now). However, I want the next button / div (and the rest of the page below it) to move downwards. To get it simple: when I click on the button, the box shows, while moving the rest of the buttons downwards, so the paragraph area doesn't overlap the others.
I'm sorry for the bad English...
I hope you guys understand what I mean.
( Btw I don't want a frameworks or Jquery, just plain languages ;) )
I have got the following code:
function dropDownOne() {
document.getElementById("dropdownone").classList.toggle("show");
}
function dropDownTwo() {
document.getElementById("dropdowntwo").classList.toggle("show");
}
function dropDownThree() {
document.getElementById("dropdownthree").classList.toggle("show");
}
window.onclick = function(event) {
if(!event.target.matches('.dropdownbtn')) {
let dropDowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropDowns.length; i++) {
let openDropDown = dropDowns[i];
if (openDropDown.classList.contains('show')) {
openDropDown.classList.remove('show');
}
}
}
}
.dropdownbtn {
border: 0;
background-color: gray;
width: 50%;
height: 40px;
border-radius: 5px;
font-size: 15px;
color: black;
cursor: pointer;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdownbtn:hover, .dropdownbtn:focus {
background-color: blue;
color: white;
border: 1px solid white;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdown {
display: inline-block;
position: relative;
margin: 10px auto;
width: 80%;
text-align: center;
}
.dropdown:last-child {
margin-bottom: 20px;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
left: 0;
background-color: blue;
width: 80vw;
margin: 0 auto;
border: 1px solid white;
border-radius: 5px;
padding: 10px;
z-index: 1;
}
.dropdown-content p {
color: white;
font-size: 15px;
display: block;
}
.show {
display: block;
margin-bottom: 200px;
}
<div class="dropdown">
<button onclick="dropDownOne()" class="dropdownbtn">Who am I?</button>
<div id="dropdownone" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownTwo()" class="dropdownbtn">What are your skills?</button>
<div id="dropdowntwo" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownThree()" class="dropdownbtn">Who am I?</button>
<div id="dropdownthree" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
So your problem was you were using position : absolute; on your dropdown-content class, because it has an absolute position it means that the element will take its position regardless of any other elements, which is why your other elements didn't move.
To fix this I changed it to position: relative; so other elements will take it's position into account.
I also removed margin-bottom: 200px; in the show class as this was leaving large gaps between each if your elements.
Here is the edited code in a snippet:
function dropDownOne() {
document.getElementById("dropdownone").classList.toggle("show");
}
function dropDownTwo() {
document.getElementById("dropdowntwo").classList.toggle("show");
}
function dropDownThree() {
document.getElementById("dropdownthree").classList.toggle("show");
}
window.onclick = function(event) {
if(!event.target.matches('.dropdownbtn')) {
let dropDowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropDowns.length; i++) {
let openDropDown = dropDowns[i];
if (openDropDown.classList.contains('show')) {
openDropDown.classList.remove('show');
}
}
}
}
.dropdownbtn {
border: 0;
background-color: gray;
width: 50%;
height: 40px;
border-radius: 5px;
font-size: 15px;
color: black;
cursor: pointer;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdownbtn:hover, .dropdownbtn:focus {
background-color: blue;
color: white;
border: 1px solid white;
-webkit-transition-duration: 300ms;
-moz-transition-duration: 300ms;
-ms-transition-duration: 300ms;
-o-transition-duration: 300ms;
transition-duration: 300ms;
}
.dropdown {
display: inline-block;
position: relative;
margin: 10px auto;
width: 80%;
text-align: center;
}
.dropdown:last-child {
margin-bottom: 20px;
}
.dropdown-content {
display: none;
position: relative;
right: 0;
left: 0;
background-color: blue;
width: 80vw;
margin: 0 auto;
border: 1px solid white;
border-radius: 5px;
padding: 10px;
z-index: 1;
}
.dropdown-content p {
color: white;
font-size: 15px;
display: block;
}
.show {
display: block;
}
<div class="dropdown">
<button onclick="dropDownOne()" class="dropdownbtn">Who am I?</button>
<div id="dropdownone" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownTwo()" class="dropdownbtn">What are your skills?</button>
<div id="dropdowntwo" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>
<div class="dropdown">
<button onclick="dropDownThree()" class="dropdownbtn">Who am I?</button>
<div id="dropdownthree" class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti
dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam
recusandae rem sunt, temporibus velit.
</p>
</div>
</div>