Ответы пользователя по тегу Вёрстка
  • Блок со скрытым контентом, что я не так делаю?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Вызываете свой код (в первой же строчке) только для первого слайдера. Лучше переписать таким образом, чтобы в качестве аргумента была сама Node, а не селектор и продублировать этот вызов для второго слайдера:

    setTimeout(initSliders(document.querySelectorAll('.slider')[0], document.querySelectorAll('.between')[0], document.querySelectorAll('.first')[0], document.querySelectorAll('.second')[0], document.querySelectorAll('.min')[0], document.querySelectorAll('.max')[0]), 0);
    setTimeout(initSliders(document.querySelectorAll('.slider')[1], document.querySelectorAll('.between')[1], document.querySelectorAll('.first')[1], document.querySelectorAll('.second')[1], document.querySelectorAll('.min')[1], document.querySelectorAll('.max')[1]), 0);
    
    function initSliders(argSlider, argBtw, argBtn1, argBtn2, argInp1, argInp2) {
      const slider = argSlider;
      const between = argBtw;
      const button1 = argBtn1;
      const button2 = argBtn2;
      const inpt1 = argInp1;
      const inpt2 = argInp2;
      const min = inpt1.min;
      const max = inpt1.max;
        
      /* инициализация */
      const sliderCoords = getCoords(slider);
      button1.style.marginLeft = '0px';
      button2.style.marginLeft = (slider.offsetWidth - button1.offsetWidth) + 'px';
      between.style.width = slider.offsetWidth + 'px';
      inpt1.value = min;
      inpt2.value = max;
      
      /* первый вывод */
      inpt1.onchange = (evt) => {
        if (parseInt(inpt1.value) < min) {
          inpt1.value = min;
        }
    
        if (parseInt(inpt1.value) > max) {
          inpt1.value = max;
        }
    
        if (parseInt(inpt1.value) > parseInt(inpt2.value)) {
          const temp = inpt1.value;
          inpt1.value = inpt2.value;
          inpt2.value = temp;
        }
    
        const sliderCoords = getCoords(slider);
        const per1 = parseInt(inpt1.value - min) * 100 / (max - min);
        const per2 = parseInt(inpt2.value - min) * 100 / (max - min);
        const left1 = per1 * (slider.offsetWidth - button1.offsetWidth) / 100;
        const left2 = per2 * (slider.offsetWidth - button1.offsetWidth) / 100;
    
        button1.style.marginLeft = left1 + 'px'; 
        button2.style.marginLeft = left2 + 'px';
    
        if (left1 > left2) {
          between.style.width = (left1 - left2 + 18) + 'px';
          between.style.marginLeft = left2 + 'px';
        } else {
          between.style.width = (left2 - left1 + 18) + 'px';
          between.style.marginLeft = left1 + 'px';  
        }
      }
      
      /* второй вывод */
      inpt2.onchange = (evt) => {
        if (parseInt(inpt2.value) < min) inpt2.value = min;
    
        if (parseInt(inpt2.value) > max) inpt2.value = max;
    
        if (parseInt(inpt1.value) > parseInt(inpt2.value)) {
          const temp = inpt1.value;
          inpt1.value = inpt2.value;
          inpt2.value = temp;
        }
    
        const sliderCoords = getCoords(slider);
        const per1 = parseInt(inpt1.value - min) * 100 / (max - min);
        const per2 = parseInt(inpt2.value - min) * 100 / (max - min);
        const left1 = per1 * (slider.offsetWidth - button1.offsetWidth) / 100;
        const left2 = per2 * (slider.offsetWidth - button1.offsetWidth) / 100;
    
        button1.style.marginLeft = left1 + 'px'; 
        button2.style.marginLeft = left2 + 'px';
    
        if (left1 > left2) {
          between.style.width = (left1 - left2 + 18) + 'px';
          between.style.marginLeft = left2 + 'px';
        } else {
          between.style.width = (left2 - left1 + 18) + 'px';
          between.style.marginLeft = left1 + 'px';  
        }
      }
      
      /* события мыши */
      button1.onmousedown = (evt) => {       
        const sliderCoords = getCoords(slider);
        const betweenCoords = getCoords(between); 
        const buttonCoords1 = getCoords(button1);
        const buttonCoords2 = getCoords(button2);
        let shiftX1 = evt.pageX - buttonCoords1.left;
        let shiftX2 = evt.pageX - buttonCoords2.left; 
    
        document.onmousemove = (evt) => {
          let left1 = evt.pageX - shiftX1 - sliderCoords.left;
          let right1 = slider.offsetWidth - button1.offsetWidth;
    
          if (left1 < 0) {
            left1 = 0;
          }
    
          if (left1 > right1) {
            left1 = right1;
          }
    
          button1.style.marginLeft = left1 + 'px';  
          shiftX2 = evt.pageX - buttonCoords2.left;
    
          let left2 = evt.pageX - shiftX2 - sliderCoords.left;
          let right2 = slider.offsetWidth - button2.offsetWidth;
    
          if (left2 < 0) {
            left2 = 0;
          }
    
          if (left2 > right2) {
            left2 = right2;
          }
    
          let per_min = 0;
          let per_max = 0;
    
          if (left1 > left2) {
            between.style.width = (left1 - left2 + 18) + 'px';
            between.style.marginLeft = left2 + 'px';
            per_min = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
            per_max = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
          } else {
            between.style.width = (left2 - left1 + 18) + 'px';
            between.style.marginLeft = left1 + 'px';                
            per_min = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
            per_max = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
          }
    
          inpt1.value = (parseInt(min) + Math.round((max - min) * per_min / 100));
          inpt2.value = (parseInt(min) + Math.round((max - min) * per_max / 100));
        };
        
        document.onmouseup = () => document.onmousemove = document.onmouseup = null;
    
        return false;
      };
      
      button2.onmousedown = (evt) => {       
        const sliderCoords = getCoords(slider);
        const betweenCoords = getCoords(between); 
        const buttonCoords1 = getCoords(button1);
        const buttonCoords2 = getCoords(button2);
        let shiftX1 = evt.pageX - buttonCoords1.left;
        let shiftX2 = evt.pageX - buttonCoords2.left;  
        
        document.onmousemove = (evt) => {
          let left2 = evt.pageX - shiftX2 - sliderCoords.left;
          let right2 = slider.offsetWidth - button2.offsetWidth;
    
          if (left2 < 0) {
            left2 = 0;
          }
    
          if (left2 > right2) {
            left2 = right2;
          }
    
          button2.style.marginLeft = left2 + 'px';                      
          shiftX1 = evt.pageX - buttonCoords1.left; 
    
          let left1 = evt.pageX - shiftX1 - sliderCoords.left;
          let right1 = slider.offsetWidth - button1.offsetWidth;  
    
          if (left1 < 0) {
            left1 = 0;
          }
    
          if (left1 > right1) {
            left1 = right1;
          }                      
    
          let per_min = 0;
          let per_max = 0;
    
          if (left1 > left2) {
            between.style.width = (left1 - left2 + 18) + 'px';
            between.style.marginLeft = left2 + 'px';
            per_min = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
            per_max = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
          } else {
            between.style.width = (left2 - left1 + 18) + 'px';
            between.style.marginLeft = left1 + 'px';
            per_min = left1 * 100 / (slider.offsetWidth - button1.offsetWidth);
            per_max = left2 * 100 / (slider.offsetWidth - button1.offsetWidth);
          }
    
          inpt1.value = (parseInt(min) + Math.round((max - min) * per_min / 100));
          inpt2.value = (parseInt(min) + Math.round((max - min) * per_max / 100));
        };
    
        document.onmouseup = () => document.onmousemove = document.onmouseup = null;
    
        return false;
      };
      
      /* отключение Drag’n’Drop браузера, чтобы не было конфликта */
      button1.ondragstart = () => {
        return false;
      };
      
      button2.ondragstart = () => {
        return false;
      };
    }
    
    /* Получение координат элемента */
    function getCoords(elem) {
      const box = elem.getBoundingClientRect();
      
      return {
        top: box.top + pageYOffset,
        left: box.left + pageXOffset
      };
    }
    Ответ написан
    1 комментарий
  • Как убрать последнюю полосу в меню?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Если бы делали "палки" на liшках, селектор был бы намного приятнее, а так:
    .ull_item:last-of-type .ull_lind:after {
        display: none;
    }
    Ответ написан
    4 комментария
  • Как сделать смену слайдов?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Вы там плагинов насовали... Нужно смотреть умеет ли плагин, который в ответе за драг-н-дроп отдавать коородинаты этого самого драгнутого элемента по событию драга. И сверять пересечение(ну или около того в радиусе квадрата) с заранее известными координатами кружочков ну и тогда, собственно, триггерить переключение на соответствующий слайд. Такое проще с нуля реализовать, когда у тебя есть полный контроль, чем пытаться скрестить плогины.
    Ответ написан
    Комментировать
  • Как изменить текст кнопки при клике?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Например так:
    var readMoreBtn = document.querySelector(".js-btn-readmore"),
        readMoreContent = document.querySelector(".js-description-info");
    
    readMoreBtn.addEventListener("click", function(event) {
        event.preventDefault();
        readMoreContent.classList.toggle("js-readmore-show");
        this.textContent = this.textContent === 'Подробнее' ? 'Скрыть' : 'Подробнее';
    });
    Ответ написан
    7 комментариев
  • Brackets Quick Edit(ctrl + e) для sass?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Ctrl+E для SCSS(не SASS)/LESS работает из коробки - ничего включать не нужно. Brackets ищет ваш класс во всех .css/.scss/.less файлах проекта и либо находит, либо предлагает создать новое правило.
    экстенш для компиляции scss - лично я предпочитаю компилить галпом
    экстеншн для автокомплита scss-переменных.

    Вы, вероятно, хотите подружить brackets со старым SASS синтаксисом - так не получится.
    Помимо возраста, его минусом является несовместимость с CSS.
    Ответ написан
    Комментировать
  • Меню-аккордеон. Как сворачивать неактивные пункты?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    Скрываете все и открываете текущий

    .sub-menu {
      display: none;
    }


    jquery
    $('.btn-menu').on('click', function() {
        $('.sub-menu').hide();
        $(this).siblings('.sub-menu').show();
    });
    Ответ написан
    7 комментариев
  • Как задать фиксированный отступ bottom: 50px не от границы блока, а то границы viewport'а, если блок больше чем viewport?

    like-a-boss
    @like-a-boss
    Признайся,тебяТянетНаКодМужика,ты—программный гей
    У вас там всеми размерами жиэс заправляет.
    Адаптируем имг. codepen.io/like-a-boss/pen/NGPPjo
    Анимация. Теория. Пишем одну анимацию секунд на 10 с парой тройкой перемещений (ищем по ключам: @keyframes transform: translateX TranslateY), даём каждому элементу и делаем ей разные делэи.
    Ответ написан
    2 комментария