How do you make an automatic plug when the block opens?



  • The problem can be seen clearly in theif:

    введите сюда описание изображения

    How do you make an automatic plug when the block opens? I'm covering the block. But when I press the same button again to open the block back, it's not automatic. And this block doesn't work. How do I fix it?

    I've already tried anchors and stuff like that. ♪ ♪



  • I'll see you around here. https://jsfiddle.net/mvqvjbkq/1/

    <!DOCTYPE html>
    <html lang="en">
    

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <style>
    #trigger,
    #trigger2 {
    position: fixed;
    width: 100%;
    background: #FFCECE;
    color: #555;
    font-size: 150%;
    cursor: pointer;
    text-align: center;
    }

    #trigger {
      top: 0px;
    }
    
    #trigger2 {
      bottom: 0px;
    }
    
    #block {
      display: none;
      padding: 10px;
      border: 3px solid #eee;
      text-align: center;
    }
    

    </style>

    <body>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>

    &lt;div id="trigger"&gt;Кнопка&lt;/div&gt;
    
    &lt;div id="block"&gt;
      &lt;img src="http://www.fndvisions.org/img/cutecat.jpg" alt="Изображение"&gt;
    &lt;/div&gt;
    
    &lt;div id="trigger2"&gt;Кнопка 2&lt;/div&gt;
    
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
    
    &lt;script&gt;
      $(document).ready(function() {
        /* Первый вариант. Выравнивание блока сверху. */
        var triggerButton = $('#trigger'); // Кнопка
        var block = $('#block'); // Блок 
        var blockPadding = 10; // Отсутп кона сверху стайта
        var scrollSpeed = 300; // Скорость прокрутки
        var slideSpeed = 300; // Скорость прокрутки
    
        triggerButton.click(function(event) {
          if (block.is(":hidden")) {
            block.slideDown(slideSpeed, function() {
              marginTop = block.offset().top - blockPadding;
              $('html,body').animate({
                scrollTop: marginTop
              }, scrollSpeed);
            });
          } else {
            block.slideUp(slideSpeed);
          }
        });
    
        /* Второй вариант. Выравнивание блока снизу. */
        triggerButton = $('#trigger2'); // Кнопка
        block = $('#block'); // Блок 
        blockPadding = 30; // Отсутп кона сверху стайта
        scrollSpeed = 300; // Скорость прокрутки
        slideSpeed = 300; // Скорость прокрутки
    
        triggerButton.click(function(event) {
          if (block.is(":hidden")) {
            block.slideDown(slideSpeed, function() {
              marginTop = $(document).height() - $(window).height() - block.offset().top + blockPadding;
              $('html,body').animate({
                scrollTop: marginTop
              }, scrollSpeed);
            });
          } else {
            block.slideUp(slideSpeed);
          }
        });
      });
    &lt;/script&gt;
    

    </body>
    </html>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2