Scroll to top a div if already was called slideToggle function

user_9847607 0
Viewed 58

I want that buttons Demarer and Stop to be scrolled up when div controls-popup is toggled (and not have a fixed position). Have you an idea about that ? I have this code :

$(".hide-controls").click(function() {
  $(".controls-popup").slideToggle(1000);
  $(".actions-popup").scrollTop();
});
.controls-popup {
  position: absolute;
  left: 572px;
  top: 10%;
  width: 400px;
}

.controls-popup-header {
  padding: 10px;
  background-color: #000000;
  color: #fff;
  border-left: 10px solid #747474;
}

.controls-popup-body {
  background-color: #4C4C4C;
  padding: 15px 5px;
  opacity: 0.9;
}

.controls-popup-body span {
  font-size: 12px;
  color: #fff;
}

.controls-popup-body .form-label {
  font-size: 16px;
}

.actions-popup {
  position: absolute;
  left: 572px;
  top: 40%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="controls-popup">
  <div class="controls-popup-header">
    Test
  </div>
  <div class="controls-popup-body">
    <span>Test span</span>
    <p></p>
    <span class="form-label">Label : </span>
    <p></p>
    <span class="form-label">Label 2 : </span>
  </div>
  <div class="color-picker" id="my-color-picker-1"></div>
</div>
<div class="actions-popup">
  <button class="start">Demarer</button>
  <button class="stop">Stop</button>
</div>
<a class="hide-controls" href="#">
  <span class="top-arrow">&#8593;</span> Masquer les contrôles
</a>

The result :

enter image description here

After toggle :

enter image description here

jquery javascript
3 Answers

You could try animate:

$(".hide-controls").click(function() {
  if ($(".controls-popup").is(':visible')) {
    $(".controls-popup").slideToggle(1000);
    $(".actions-popup").fadeIn()
      .css({
        top: '40%',
        position: 'absolute'
      })
      .animate({
        top: '10%'
      }, 1000, function() {
        //callback
      });
  } else {
    $(".controls-popup").slideToggle(1000);
    $(".actions-popup").fadeIn()
      .css({
        top: '10%',
        position: 'absolute'
      })
      .animate({
        top: '40%'
      }, 1000, function() {
        //callback
      });
  }
});
.controls-popup {
  position: absolute;
  left: 572px;
  top: 10%;
  width: 400px;
}

.controls-popup-header {
  padding: 10px;
  background-color: #000000;
  color: #fff;
  border-left: 10px solid #747474;
}

.controls-popup-body {
  background-color: #4C4C4C;
  padding: 15px 5px;
  opacity: 0.9;
}

.controls-popup-body span {
  font-size: 12px;
  color: #fff;
}

.controls-popup-body .form-label {
  font-size: 16px;
}

.actions-popup {
  position: absolute;
  left: 572px;
  top: 40%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="controls-popup">
  <div class="controls-popup-header">
    Test
  </div>
  <div class="controls-popup-body">
    <span>Test span</span>
    <p></p>
    <span class="form-label">Label : </span>
    <p></p>
    <span class="form-label">Label 2 : </span>
  </div>
  <div class="color-picker" id="my-color-picker-1"></div>
</div>
<div class="actions-popup">
  <button class="start">Demarer</button>
  <button class="stop">Stop</button>
</div>
<a class="hide-controls" href="#">
  <span class="top-arrow">&#8593;</span> Masquer les contrôles
</a>

user_73807790

What you need to do is contain the elements in an absolutely positioned container, and then position them relatively inside this container. You'll be able to position the box and the buttons relative to each other inside the absolutely positioned container.

Here's what the code might look like.

$('.hide-controls').click(() => {
    $('.controls-popup').slideToggle(1000);
});
.container {
    position: absolute;
    width: 80%;
    height: 90%;
    left: 20%;
}
.controls-popup {
    position: relative;
    width: 40%;
}
.controls-popup-header {
    padding: 10px;
    background-color: #000000;
    color: #fff;
    border-left: 10px solid #747474;
}
.controls-popup-body {
    background-color: #4C4C4C;
    padding: 15px 5px;
    opacity: 0.9;
}
.controls-popup-body span {
    font-size: 12px;
    color: #fff;
}
.controls-popup-body .form-label {
    font-size: 16px;
}
.actions-popup {
    position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="controls-popup">
        <div class="controls-popup-header">Test</div>
        <div class="controls-popup-body">
            <span>Test span</span>
            <p></p>
            <span class="form-label">Label : </span>
        </div>
    </div>
    <div class="actions-popup">
        <button class="start">Demarer</button>
        <button class="stop">Stop</button>
    </div>
</div>
<a class="hide-controls" href="#">Hide</a>

user_73689850

Change your code:

$('.hide-controls').click(() => {
    $('.controls-popup').slideToggle(1000);
    if($('.actions-popup').hasClass('margin-top')) {
      $('.actions-popup').removeClass('margin-top')
    } else {
      $('.actions-popup').addClass('margin-top')
    }
});

<div class="link">
    <a class="hide-controls" href="#">
        <span class="top-arrow">&#8593;</span> Masquer les contrôles
    </a>
</div>

<div class="controls-popup">
  <div class="controls-popup-header">
    Test
  </div>
  <div class="controls-popup-body">
    <span>Test span</span>
    <p></p>
    <span class="form-label">Label : </span>
    <p></p>
    <span class="form-label">Label 2 : </span>
  </div>
  <div class="color-picker" id="my-color-picker-1"></div>
</div>

<div class="actions-popup">
  <button class="start">Demarer</button>
  <button class="stop">Stop</button>
</div>

.link, .actions-popup {
    position: relative;
    left: 20%;
}

.actions-popup > button {
    margin-top: 1%
}

.controls-popup {
    position: absolute;
    width: 90%;
    height: 90%;
    left: 20%;
}
.controls-popup {
    position: relative;
    width: 40%;
}
.controls-popup-header {
    padding: 10px;
    background-color: #000000;
    color: #fff;
    border-left: 10px solid #747474;
}
.controls-popup-body {
    background-color: #4C4C4C;
    padding: 15px 5px;
    opacity: 0.9;
}
.controls-popup-body span {
    font-size: 12px;
    color: #fff;
}
.controls-popup-body .form-label {
    font-size: 16px;
}

Visit to see working solution on live: Codepen

Happy coding :)

user_104278070
Related