• Background картинка, приближается и отдаляется медленно, анимация, как правильно сделать?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    .bggl {
      background: #101402 url(https://naked-science.ru/wp-content/uploads/2016/04/article_-1_9.jpg) no-repeat center center;
      background-size: 100% auto;
      height: auto;
      min-height: 400px;
      position: relative;
      
      transform: scale(1);
      animation: pulse 5s ease-in-out infinite;
    }
    @keyframes pulse {
      50% {
        background-size: 150% auto;
      }
    }
    Ответ написан
  • Как открыть другой файл html через условие js?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    window.location = 'https://qna.habr.com/q/1245342'
    // ну а если в рамках текущего домена то без протокола.
    // Например, находясь на странице https://vk.com/feed чтобы перейти на https://vk.com/im достаточно будет
    window.location = 'im'
    Ответ написан
    Комментировать
  • Где верстать email html?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Фрэймворк:
    https://mjml.io/

    Расширение для vscode где можно сразу live превью смотреть результата и компилировать в html
    https://marketplace.visualstudio.com/items?itemNam...
    Ответ написан
    Комментировать
  • Как выбрать нужный элемент?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    const index = 2
    const items = document.querySelector(`.parent .child:nth-child(${index})`)
    // или 
    const items = document.querySelectorAll('.parent .child')
    const thirdItem = items[index]

    P.s. только эти две записи вернут разный элемент, потому что в css нумерация не с нуля в nth-child.
    Ответ написан
    Комментировать
  • Можно ли разместить тег div внутри table?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Можно. Но только внутри td.
    https://caninclude.glitch.me/caninclude?child=div&...
    Ответ написан
    Комментировать
  • Почему у сайта такие странные классы?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    У вас querySelector выдаёт null. Выше, в тексте ошибки.
    То, что на других сайтах работает, не значит что везде будет работать. Значит на других сайтах блоки которые вы меняете не асинхронно подгружаемые или загружаются раньше чем расширение .

    Тут можно посмотреть в сторону mutation observer, либо в head добавить кастомную секцию style где будет css меняющий стили этого блока с important. То есть найти элемент head, создать элемент style, задать текстовое содержимое для style - css правило, добавить style в head.

    Код от автора вопроса, решивший проблему по вышеописанному лагоритму:
    let head = document.getElementsByTagName('head')[0];
    let styleR = document.createElement('style');
    head.appendChild(styleR);
    styleR.innerHTML =
      '.amber-button_theme_accent { background-color: #FA8072 !important; }';
    head.appendChild(styleR);
    Ответ написан
    Комментировать
  • Всплывающеий блок при наведении мышки, hover, как заменить на клик?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Например, с помощью чекбокса.
    <label for="trigger">Пробег</label>
    <strong>Выбрать</strong>
    <input type="checkbox" id="trigger">


    #trigger:checked ~ .prcr {
    /* .pro:hover .prcr { */
      display: block;
      opacity: 1;
      visibility: visible;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
    }


    Осталось его скрыть и увеличить зону кликабельности лэйбла как Вам надо, а не только на слово "Выбрать"
    Ответ написан
    8 комментариев
  • Как можно сделать перенос строк?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    word-break: break-word;

    в прошлой теме я думал что можно заменить пробелы через javascript, но такой способ работает только на визуйльной части а не в исходнике

    Ну логично что в исходнике поменять можно только поменяв...в исходнике. Он на то и исходник. (то есть в админке, в вашем случае. Ну или на стороне сервера перед отдачей этой строки на клиент)
    Ответ написан
    6 комментариев
  • Почему после добавления нового блока слетают события со всех остальных?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    После этого и срабатывает этот блок success. где отрисовывается новый блок.

    document.getElementById('client-personal-note-container').innerHTML += appendNotemakrup;

    Нет, это НЕ добавление нового элемента.
    Это чтение разметки КАК СТРОКИ, добавление к этой СТРОКЕ новой СТРОКИ и потом преобразование под капотом в DOM элементы. Понимаете?

    То есть все элементы что у Вас были - умирают и заменяются НОВЫМИ. Без добавленных на них ранее обработчиков.

    Как исправить?
    Основных пути 2:
    1) Научиться именно добавлять элементы https://learn.javascript.ru/modifying-document
    2) Освоить делигирование событий https://learn.javascript.ru/event-delegation
    Ответ написан
    1 комментарий
  • Почему каждый раз выдаёт undefined?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Вас совершенно не смущает что alert Вы делаете на первой строчке в функции example, а инициализацию переменной на 13ой?

    Тело функции выполняется каждый раз заново.
    Чтобы сработало так как Вы хотите, нужно определить переменную ВНЕ функции и убрать var для buffer внутри функции. (но для первого раза всё равно будет undefined, хотя если вне функции инициализировать переменную так же как и внутри функции, через querySelector().innerHTML, то будет ок).

    А вот чтоб прям совсем работало, даже с первого раза, то сначала нужно объявлять переменную, а потом использовать, а не наоборот.
    Ответ написан
    1 комментарий
  • Почему return не возвращает числовое значение?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    На примере этого участка:
    select.addEventListener('change', function () {  
      formValidation(form);
      console.log(errors);
      ine.innerHTML = errors;
    });

    Так Вы никуда значение и не присваиваете, которое возвращает функция formValidation.
    console.log(errors) - errors не существует в данной области видимости. Функции возвращают значение, которое хранится в переменной, а не переменную с её названием в область видимости, где функция была вызвана.

    Таким образом:
    select.addEventListener('change', function () {  
      const errors = formValidation(form);
      console.log(errors);
      ine.innerHTML = errors;
    });
    Ответ написан
    1 комментарий
  • Почему игнорируется условие if?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    1. Если что-то не работает как задумано, первое что нужно сделать это открыть инструменты разработчика на вкладке console и посмотреть нет ли там никаких ошибок. Если есть то загуглить их и посмотреть где они возникают. Попытаться осознать и исправить. А ещё лучше научиться отладке собственного кода https://learn.javascript.ru/debugging-chrome
    2. Перед тем как пользоваться тем или иным способом объявления переменных (var\let\const) стоит почитать про него и ознакомиться с нюансами.
    https://medium.com/nuances-of-programming/%D0%B2-%...

    А именно:
    if (parseInt(number.innerHTML) == 0){
      let step = 3;
      } else {
      let step = parseInt(number.innerHTML) - 1;
      }

    Переменной step не существует вне фигурных скобок, соответственно, ниже, где Вы пытаетесь засунуть step как innerHTML - возникает ошибка, что step не определена.
    Ответ написан
    2 комментария
  • Сделать область регистрации касания "шире" без изменения параметров самого элемента?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Псевдоселекторы псевдоэлементы типа :before

    Но тут ещё стоит учесть ситуацию, когда 2 элемента окажутся рядом друг с другом. Что тогда? Ну, очевидно, один из них будет пеекрывать другой по z-index. Но вероятность что это будет не тот что нужно - высока. В итоге пользоватею нужно будет сначала убрать перекрывающий элемент, поправить целевой, вернуть обратно перекрывающий, а если их несколько?

    Поэтому варианта я вижу 3 и их лучше всего совместить:
    1) Расширить зону через псевдо
    2) Делать выбор элемента по тапу. То есть тапнул на элемент, он выделился - и потом с ним взаимодействуетшь. Если нессколько элементов лежат друг под другом, то выбирать последовательно на каждый тап следующий элемент. Первый тап выбирает самый верхний, второй тап выбирает лежаший под и так далее.
    Найти все элементы в координатах тапа поможет метод https://developer.mozilla.org/en-US/docs/Web/API/D...
    3) Сделать условный select в котором можно будет выбрать нужный элемент. В идеале - если каждый элемент будет как-то уникально промаркрован.

    Ну и ещё можно дать возможность зумить чтобы элементы становились больше, что облегчит взаимодействие с ними
    Ответ написан
    Комментировать
  • Можно как-то в css убрать определенные стили, если присутствуют другие?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    /* Правило для li, у которых атрибут style НЕ содержит подстроки list-style-type */
    li:not([style*="list-style-type"]) {
      /* свои стили */
    }
    Ответ написан
    1 комментарий
  • Почему выбор кастомного чекбокса работает только по клику на label?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    как добиться "выбора" чекбокса при клике на span visible-checkbox

    Либо и span и input должны лежать внутри label, либо только через js.
    Ну или хотя бы span внутри label
    И селектор тогда надо будет не забыть поменять.
    Ответ написан
    1 комментарий
  • Как получить новый объект с посчитанными суммами?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    const out = items.reduce((acc, {id, price}) => {
      const key = obj[id]
      if (key) { // проверяем что элемент с таким id нас вообще интересует
        if (acc[key]) { // если он встречался ранее, то добавляем к текущему значению
          acc[key] += price
        } else { // иначе запоминаем с текущей ценой
          acc[key] = price
        }
        acc.total += price // и всегда добавляем к total
      }
      return acc
    }, { total: 0 })
    Ответ написан
    Комментировать
  • Как заставить элемент не рендериться на сервере, но рендериться на клиенте?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Ответ написан
    Комментировать
  • Почему touch slider (не плагин) не работает когда я открываю консоль?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    а с чего Вы решили, что у Вас touch слайдер? Где хоть один обработчик события touch*...?
    Вижу только обработчики mouse* события.

    В эмуляции девайса как раз включается эмуляция тача.

    UPD: fix на скорую руку. Стоит конечно же вынести функции отдельно, чтобы не дублировать.
    fix

    let slider = document.querySelector('.container-3_1');
    let innerSlider = document.querySelector('.container-3-1_blocks');
    
    
    let pressed = false;
    let startx;
    let x;
    
    slider.addEventListener('mousedown', (e)=> {
        pressed = true;
        startx = e.offsetX- innerSlider.offsetLeft;
        slider.style.cursor = 'grabbing'
    })
    
    slider.addEventListener('touchstart', (e)=> {
        pressed = true;
        const evt = e.touches[0]
        startx = evt.clientX- innerSlider.offsetLeft;
        slider.style.cursor = 'grabbing'
    })
    
    slider.addEventListener('mouseenter', ()=> {
        slider.style.cursor = 'grab'
    })
    
    slider.addEventListener('mouseup', ()=> {
        pressed = false;
        slider.style.cursor = 'grab'
    })
    
    slider.addEventListener('touchend', ()=> {
        pressed = false;
        slider.style.cursor = 'grab'
    })
    
    
    slider.addEventListener('mousemove', (e)=> {
        if(!pressed) return;
        e.preventDefault();
    
        x = e.offsetX;
    
        innerSlider.style.left = `${x - startx}px`
        
    
        checkboundary()
    })
    
    slider.addEventListener('touchmove', (e)=> {
        if(!pressed) return;
        e.preventDefault();
    
        const evt = e.touches[0]
        x = evt.clientX;
    
        innerSlider.style.left = `${x - startx}px`
        
    
        checkboundary()
    })
    
    
    function checkboundary(){
        let outer = slider.getBoundingClientRect();
        let inner = innerSlider.getBoundingClientRect();
    
        if(parseInt(innerSlider.style.left) > 0) {
            innerSlider.style.left = '0px'
        } else if (inner.right < outer.right){
            innerSlider.style.left = `-${inner.width - outer.width}px`
        }
    }

    Ответ написан
    Комментировать
  • Как Кинопоиск делает черный квадрат в захвате экрана?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Судя по всему - они это делают на основе DRM.
    Первый ответ на СО содержит ссылку на статью про это где есть демка, где работает точно так же.
    Ответ написан
    7 комментариев