Is there a way to keep the 3rd div fixed

user_14282182 0
Viewed 101

Is there any way to make the 3rd div positioned to fixed, because when I clicked the slideUp button, the divs are collapsing. I want all of them to slide up and down in their current position. I think its due to flexbox as it is centering the whole thing. I tried removing that but still it doesn't work.

$(document).ready(function () {
  $("#btn2").click(function () {
    $("#div1").slideUp();
    $("#div2").slideUp("slow");
    $("#div3").slideUp(3000);
  });

  $("#btn1").click(function () {
    $("#div1").slideDown();
    $("#div2").slideDown("slow");
    $("#div3").slideDown(3000);
  });
});
h1 {
  text-align: center;
}

#btn1 {
  position: absolute;
  left: 60vw;
}

#btn2 {
  position: absolute;
  left: 20vw;
}

button {
  padding: 15px 60px;
}

#flex {
  display: flex;
  position: absolute;
  top: 30vh;
  justify-content: space-around;
  width: 99vw;
}

#flex > div {
  width: 30vw;
  border: 1px solid black;
  height: 30vh;
}

#div1 {
  background-color: blueviolet;
}

#div2 {
  background-color: salmon;
}

#div3 {
  background-color: greenyellow;
}

button:active,
button:visited {
  background-color: yellow;
}

.white {
  background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <script src="jquery.min.js"></script>
    <title>Assignment</title>
  </head>
  <body>
    <h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
    <button id="btn1">CLick to slideDown boxes</button>
    <button id="btn2">CLick to slideUp boxes</button>
    <div id="flex">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

css jquery javascript
4 Answers

Please try this once
You just need to add wrapper div and set it's width

.wrapper{
width:33.33%;
}


$(document).ready(function () {
  $("#btn2").click(function () {
    $("#div1").slideUp();
    $("#div2").slideUp("slow");
    $("#div3").slideUp(3000);
  });

  $("#btn1").click(function () {
    $("#div1").slideDown();
    $("#div2").slideDown("slow");
    $("#div3").slideDown(3000);
  });
});
h1 {
  text-align: center;
}

#btn1 {
  position: absolute;
  left: 60vw;
}

#btn2 {
  position: absolute;
  left: 20vw;
}

button {
  padding: 15px 60px;
}

#flex {
  display: flex;
  position: absolute;
  top:200px;
  justify-content: space-around;
  width: 99vw;
}

#flex > div > div {
  width: 30vw;
  border: 1px solid black;
  height: 30vh;
}

#div1 {
  background-color: blueviolet;
}

#div2 {
  background-color: salmon;
}

#div3 {
  background-color: greenyellow;
}

button:active,
button:visited {
  background-color: yellow;
}

.white {
  background-color: white;
}
.wrapper{
width:33.33%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <script src="jquery.min.js"></script>
    <title>Assignment</title>
  </head>
  <body>
    <h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
    <button id="btn1">CLick to slideDown boxes</button>
    <button id="btn2">CLick to slideUp boxes</button>
    <div id="flex">
    <div class="wrapper">
     <div id="div1"></div>
    </div>
     <div class="wrapper">
      <div id="div2"></div>
    </div>
    <div class="wrapper">
     <div id="div3"></div>
    </div>  
    </div>
    <script src="script.js"></script>
  </body>
</html>

user_124834630

Don't need to wrap div with extra div so You can achieve with existing div structure with help of justify-content: flex-end; property on #flex div.
And add css on child like: #flex > div { flex: 1 0 calc(100% / 3); max-width: calc(100% / 3);}.

Flexbox Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You can try below snippet.

$(document).ready(function () {
  $("#btn2").click(function () {
    $("#div1").slideUp();
    $("#div2").slideUp("slow");
    $("#div3").slideUp(3000);
  });

  $("#btn1").click(function () {
    $("#div1").slideDown();
    $("#div2").slideDown("slow");
    $("#div3").slideDown(3000);
  });
});
h1 {
  text-align: center;
  font-size: 20px;
}
button {
  padding: 15px 20px;
  margin-bottom: 5px;
}

#flex {
  display: flex;
  position: relative;
  justify-content: flex-end;
  width: 100%;
}
#flex > div {
  flex: 1 0 calc(100% / 3);
  max-width: calc(100% / 3);
  border: 1px solid black;
  height: 30vh;
}
#div1 {
  background-color: blueviolet;
}
#div2 {
  background-color: salmon;
}
#div3 {
  background-color: greenyellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
<button id="btn1">CLick to slideDown boxes</button>
<button id="btn2">CLick to slideUp boxes</button>
<div id="flex">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</div>

user_70529270

You could try this, this will automatically adjust based on how many divs you are putting inside your #flex. You are correct about the problem in your divs are, once they got 0 height, they will tend to disappear, and since they are centered by flex, divs are tend to center itself. Now enclosing it in divs will prevent it from disappearing.

$(document).ready(function () {
  $("#btn2").click(function () {
    $("#div1").slideUp();
    $("#div2").slideUp("slow");
    $("#div3").slideUp(3000);
  });

  $("#btn1").click(function () {
    $("#div1").slideDown();
    $("#div2").slideDown("slow");
    $("#div3").slideDown(3000);
  });
$("#flex div div").parent().css({
    "width":((100 / ($("#flex div div").parent().length)).toFixed(0)-1)+ "%",
    "display":"inline-block",
    "vertical-align":"top"
});
});
h1 {
  text-align: center;
}

#btn1 {
  position: absolute;
  left: 60vw;
}

#btn2 {
  position: absolute;
  left: 20vw;
}

button {
  padding: 15px 60px;
}

#flex {
  display: table;
  position: absolute;
  top: 30vh;
  justify-content: space-around;
  width: 99vw;
}

#flex > div > div{
  width: 30vw;
  border: 1px solid black;
  height: 30vh;
}

#div1 {
  background-color: blueviolet;
}

#div2 {
  background-color: salmon;
}

#div3 {
  background-color: greenyellow;
}

button:active,
button:visited {
  background-color: yellow;
}

.white {
  background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="style.css"/>
    <script src="jquery.min.js"></script>
    <title>Assignment</title>
</head>
<body>
<h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
<button id="btn1">CLick to slideDown boxes</button>
<button id="btn2">CLick to slideUp boxes</button>
<div id="flex">
    <div>
        <div id="div1"></div>
    </div>
    <div>
        <div id="div2"></div>
    </div>
    <div>
        <div id="div3"></div>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>

user_79283480

This is another approach. This doesn't rely on display:flex at all. Here we make the flex div have a position:relative and it's child i.e. flex>div or box have a position:absolute.

Now on starting of the JS code, I have added a bit to dynamically take care of the left position of these absolutely positioned child elements. In our case , div1 will end up with left = 0%, div2 with left = 33% and div3 with left = 66% . I have added a smooth transition as well to make up for the delay in positioning the elements.

Now your slideUp and slideDown is working on absolutely positioned elements which actually don't occupy any space like normal position:static (yes this is by default) elements. So you don't need to wrap them in additional individual divs now.

Also this is just one of the many approaches. Felt fancy so sharing it.

$(document).ready(function () {
  let leftPos = 0;
  let boxes = [...document.querySelectorAll('.box')];
  for(let index = 1;index<boxes.length;index++)
  {
      boxes[index].style.left = `${(100/boxes.length)*index}%`;
  }
   
  $("#btn2").click(function () {
    $("#div1").slideUp();
    $("#div2").slideUp("slow");
    $("#div3").slideUp(3000);
  });

  $("#btn1").click(function () {
    $("#div1").slideDown();
    $("#div2").slideDown("slow");
    $("#div3").slideDown(3000);
  });
});
h1 {
  text-align: center;
}

#btn1 {
  position: absolute;
  left: 60vw;
}

#btn2 {
  position: absolute;
  left: 20vw;
}

button {
  padding: 15px 60px;
}

#flex {

  position: relative;
  top: 30vh;
  width: 99vw;
}

#flex > div {
  width: 30vw;
  position:absolute;
  border: 1px solid black;
  transition: left 0.5s;
  height: 30vh;
}

#div1 {
  background-color: blueviolet;
}

#div2 {
  background-color: salmon;
  left:0
}

#div3 {
  background-color: greenyellow;
    left:0
}

button:active,
button:visited {
  background-color: yellow;
}

.white {
  background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <script src="jquery.min.js"></script>
    <title>Assignment</title>
  </head>
  <body>
    <h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
    <button id="btn1">CLick to slideDown boxes</button>
    <button id="btn2">CLick to slideUp boxes</button>
    <div id="flex">
      <div class='box' id="div1"></div>
      <div class='box' id="div2"></div>
      <div  class='box' id="div3"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

user_81306900
Related