Ответы пользователя по тегу HTML
  • Как при клике убрать активный класс?

    neuotq
    @neuotq
    Прокрастинация
    Немного упростим главный код и исправим названия класса.
    Активный класс, если это БЭМ или типа БЭМ, должен быть не _active, а fits-cars-showmore-content_active, ну и с остальными соответственно.
    Так же разделим название для data атрибутов, чтобы у кнопок и контента они различались, так желательно в данной семантике. Либо в дата атрибут передавать айди кого будем дёргать. Тут уже на усмотрение разработчика в зависимости от дельнейшего пути
    Сам цикл упростим (но желательно конечно вернуть/добавить проверки аргументов, существования элементов и тп, я убрал для наглядности.).
    const autoBtns = document.querySelectorAll('.block-tabs-main-home__item');
    	autoBtns.forEach(
        btn => {
          btn.addEventListener("click", (e) => {			
            const contentId = btn.getAttribute("data-content-id");     
            document
                .querySelectorAll(`[data-id="${contentId}"], .fits-cars-showmore-content_active`)
                .forEach( (el) =>
                  el.classList.toggle('fits-cars-showmore-content_active')
                )
    	        }
          );
        }
      );

    Обновил пример, забыл что вы хотели закрывать и другие. В любом случае действий мы выполняем меньше, чем обходя безусловно все элементы. Здесь мы обходим только те кто открыт и тот у кого айди совпадается
    Рабочий пример
    Ответ написан
    Комментировать
  • Есть ли смысл делать анимацию без JS?

    neuotq
    @neuotq
    Прокрастинация
    Анимация = анимации рознь.

    Конкретный ответ со списком вы тут не увидите, это будет большая статья, со множественными "а вот тут", "но здесь" просто потому что многое зависит от контекста, задач, планирование.
    Главные рекомендации это не делать на js то, что отлично реализуется с помощью css. Этим к сожалению часто болеют многие фронтендеры, особенно из тех кто принципиально не любит вёрстку. Банальные примеры некоторые виды трансформаций объектов при булевых сменах какого параметра(условно навел/убрал наведения, вкл-выкл и тп).

    Но нужно иметь ввиду, что там где у вас выходит сложная логика, разные усложнённые сценарии, динамические параметры запуска и тп и тд. Без js естественно никуда.

    Поэтому просто зная возможности css, имея здравый смысл, вы будете видеть и знать где что использовать.
    К счастью css тоже в последнее время активно развивается давай нам всё больше возможностей.
    Поэтому - простая штука, что-то типа одноразовых анимации, простого повторения, туда сюда - подумать про css.
    Если к этому добавляются всякие реакции на сложные тайминги, старт-пауза перемотать остановить на промежутке и тп - js.
    Ну и безусловно разные сложные, многоходовки с завязкой друг на друга - однозначно js.

    В целом информации на эту тему достаточно в интернете, мудрить здесь особо не стоит. Поэтому повторюсь: просто здравый смысл и держать в уме знание css и не брезговать его использовать. Нередко кстати сами верстальщики уже готовят эти анимации, но это уже отдельный разговор организации команд и внутрипроектной кухни. Я сторонник того что фронтэндер, пусть и не обязан прям верстать верстать, но знать вёрстку/css должен на очень хорошем уровне.
    Ответ написан
    Комментировать
  • Как убрать полоски в градиенте, которые из-за блоков div?

    neuotq
    @neuotq
    Прокрастинация
    Старайтесь звездочку особо не использовать, ведь это применение стиля для каждого, а не наследование сверху вниз. Насчёт заднего фона, он так дублируется так не считает высоту полно экранной.
    Сделайте так:
    body {
     //Просим сделать минимальную высоту в 100% процентов от высоты экрана
      min-height: 100vh;
      background: linear-gradient(45deg, #121212, #29005e);
    }
    Ответ написан
    Комментировать
  • Почему не работает range slider?

    neuotq
    @neuotq
    Прокрастинация
    Главная причина в том, что вы отключили pointer events для него в CSS (у range.input : pointer-events: none;).
    Далее, в value вы отправляете просто константу, более того куда и как он будет обновлять значения?

    Обновим немного код, добавив состояния, чтобы потом можно было легко использовать значения в дальнейшей логике.
    import * as React from 'react';
    import styles from './style.module.scss';
    
    export default function App() {
      // состояние для левого
      const [leftVal, setLeftVal] = React.useState(2500);
      // состояние для правого
      const [rightVal, setRightVal] = React.useState(7500);
      //  Константы для ограничения макс и минимального значения
      const MINVAL = 0;
      const MAXVAL = 10000;
      return (
        <div className={styles.main}>
          <div className={styles.slider}>
            <div className={styles.slider__progress} />
          </div>
          <div className={styles.range}>
            <input
              type="range"
              name="range-min"
              min={MINVAL}
              max={MAXVAL}
              value={leftVal}
              onChange={(e) => setLeftVal(parseInt(e.target.value))}
            />
            <input
              type="range"
              name="range-max"
              min={MINVAL}
              max={MAXVAL}
              value={rightVal}
              onChange={(e) => setRightVal(parseInt(e.target.value))}
            />
          </div>
        </div>
      );
    }


    Далее, у вас теперь будет работать только последний(по порядку в коде html/jsx ), тк он будет "наверху" и события мышки просто не могут достучаться до второго. Более того, логика работы нарушается, например он может быть меньше своего левого брата, что не ок. Ну и ещё МНОГО подводных камней. Вся проблема в том, что сам стандартный элемент input range поддерживает только одно значение, а вам нужно да. Логика испольнения этого не то чтобы сложна, но таки не совсем тривиально, нужно немного поработать.

    Вот ссылка, можете изучить пример если идти по вашему пути.
    Либо как это делают через другие html элементы(условно на div), эмулируя порведение.

    На мой взгляд гибое дело с этим возиться, если у вас только не личный интерес поиграться. Если для дела - то берите готовую библиотеку + во всех(или почти всех) UI библиотека он тем или другим способом реализован.
    Ответ написан
    Комментировать
  • Для чего нужен грид в 24 колонки?

    neuotq
    @neuotq
    Прокрастинация
    Чаще всего используют 12 колонок. Причина в сравнении с красивыми 10 проста - большее количество вариаций делений при относительно небольшом числе колонок, учитывая исходные что ширина бОльшей часть экранов кратно 8. Поэтому может вернее будет назвать эту систему системой 8-пиксельной, тк шаг в 8 пикселей для большинства размеров(при хард сетке всё кратно 8, при софт только расстояния между элементами). Таким образом легко быстро выстраивается модульная сетка с приятным ритмом.
    Поэтому многие системы/фреймворки по умолчанию настроены на 12 колонок.
    24 колонки - можно условно считать вариацией для любителей чуть большей вариативности и тонкостей с шириной/расстоянием между колонками и шага в 4 пикселя и тонкой настройки золотого сечения на странице.
    Отдельно стоят любители 16 колонок(относительно популярный вариант), это, как другие менее популярные, уже частные случаи сетки и дизайна, где все в ручную подбирается, либо изначально допускается меньшая вариативность размещения элементов/колонок/модулей. Поэтому прям зацикливаться не стоит, исходите из своих задач и требований, полёта фантазии дизайнера.
    Ответ написан
    Комментировать
  • Как в форму вставить блок?

    neuotq
    @neuotq
    Прокрастинация
    Поместите всё в один общий блок. Вот я схематично набросал
    Ответ написан
    2 комментария
  • Как реализовать событие ручной перемотки видео?

    neuotq
    @neuotq
    Прокрастинация
    Идём в документацию, находим два интересных нам события seeking и seeked.
    const video = document.querySelector('video');
    
    video.onseeked = (event) => {
      console.log('Video found the playback position it was looking for.');
      console.log(video.currentTime);
    };

    PS а вообще советую не городить свои костыли с плеерами, а взять готовую библиотеку обертку, типа Plyr.
    Ответ написан
    Комментировать
  • Как поменять цвет кнопки play для видео с youtube внутри iframe?

    neuotq
    @neuotq
    Прокрастинация
    Я бы на вашем месте не мучался, взял бы https://plyr.io/ и сделал свой дизайн.
    Ответ написан
    Комментировать
  • Почему псевдо элемент вылезает выше слоем, если родителя сместить в сторону с помощью транслейт?

    neuotq
    @neuotq
    Прокрастинация
    Долго рассказывать, есть такая тема как контекст наложения, так вот при использовании трансформа ты как бы вырываешь кнопку из той движухи с псевдо элементом. Поэтому если хочешь делать по своему плану, придумай как переверстать. либо накладывай трансформ на родителя обёртку, чтобы кнопка и псевдоэлемент были внутри.
    Типа такого
    Ответ написан
    1 комментарий
  • Как сделать чтобы текст рос вверх?

    neuotq
    @neuotq
    Прокрастинация
    Короче, забудь про абсолюты как про страшный сон. Очень редко, только когда другое ну никак нельзя.
    Сделать можно разными способами, например на флексах
    Ответ написан
    3 комментария
  • Какое задать значение max-width для адаптации под телефон?

    neuotq
    @neuotq
    Прокрастинация
    Советую все брейкпоинты самому по минимуму придумывать, а брать у лидеров:
    https://getbootstrap.com/docs/5.1/layout/breakpoints/
    https://tailwindcss.com/docs/responsive-design
    Изучи какие они используют, смело бери их к себе в проект.
    Ну и конечно же лучше идти снизу вверх, те по умолчанию у тебя мобильная вёрстка, в брейкпоинтах пишешь то, что отличается у тех кто больше.
    Ответ написан
    Комментировать
  • Откуда взять изображения под ретину?

    neuotq
    @neuotq
    Прокрастинация
    По хорошему, вы изначально работаете с учётом "ретина" дисплеев, те разрешение растровых изображений условно в два раза больше чем физический размер в пикселях, а уже при сдаче проекта либо вы, либо верстальщик в автоматическом режиме(через сборщик проекта), делает все остальные.
    Таким образом, например у вас в макете есть растр размером(по макету) 200 на 300 пикселей, вы должны предоставить картинку 400 на 600.
    Ответ написан
  • Почему PHP Simple HTML DOM Parser берет только текст из ячейки таблицы?

    neuotq
    @neuotq
    Прокрастинация
    В строке
    $flight[] = $cell->plaintext;
    Вы используете метод plaintext который очищает все теги, ну и для этой ячейки должен вернуть текст 'PDF'.
    Не совсем ясно что вам нужно? Если нужно дополнительно разбирать и другие вложенные html элементы, то нужно усложнять вашу логику, добавлять условия. Вот из той же документации, добавляете вложенные циклы для того же тега a и из него уже парсите href если вам нужно отдельно. И тд и тп.
    Ответ написан
    Комментировать
  • Блок выходит за пределы, как убрать scroll?

    neuotq
    @neuotq
    Прокрастинация
    Ну так у вас же прокрутку добавляет не section, а другой блок(content). Вот ему и добавляйте новый класс для hidden
    Ответ написан
    4 комментария
  • Табы в JS. Почему не работает трансформация на втором изображении?

    neuotq
    @neuotq
    Прокрастинация
    Вы пишите в коде :
    let currentArrow = document.querySelector(".tab__arrow");

    Таким образом выбирая стрелку по слишком общему селектору, попадает первая.
    Ответ написан
    3 комментария
  • Как сделать такой графический индикатор?

    neuotq
    @neuotq
    Прокрастинация
    У них скорее всего на стороне сервера генерируется и потом кешируется для отдачи, так что это не супер проблема 1000+ картинок.
    А насчёт css, то сделать легко, но без регулирования либо через ручное изменения style на элементе или через js никак.
    Ну те так:
    Ответ написан
    Комментировать
  • Как сделать, чтобы открывался сайт, а не ссылка?

    neuotq
    @neuotq
    Прокрастинация
    Тут не в ларавел дело, а в принципе работы тега a И его параметра href.
    Если вы не указывайте протокол, полный и понятный/известный пусть для бразуера, он будет считать что вы указали относительный путь.
    Поэтому добавляйте http:// или https:// и всё будет работать.
    Ответ написан
  • Почему видео работает после закрытия?

    neuotq
    @neuotq
    Прокрастинация
    Я не лез прям разбираться в ваш код на сайте, это неудобно.
    Но проблема не в плагине. Плагин делает только две штуки: ставит превьюшку видео как обычную картинку, по клику динамически загружается iframe всего плеера youtube. Всё.
    Ваша задача, реализовать новые функции по зыкрытию модельного окна.
    Алгоритм:
    1. Отслеживаете событие закрытие окна.
    2. Когда событие сработало вы либо, через youtube js api ставите плеер на паузу (не знаю насколько это возможно в вашем варианте) либо полностью сами удаляете весь плеер, и восстанавливаете вид поумолчению, те то как должен выглядит код html с самого начала тег div с параметрами, но тут вопрос насколько динамически отслеживает библиотека, поэтому наверное легче будет снести вообще всё оттуда. А инициализировтаь div и библиотеку lazyYT динамически каждый раз когда модалка открывается.
    Вообще конечно всё корявенько по совремнным меркам.

    А вообще советую использовать тогда лучше уж plyr вмеcто устаревшего lazyYT , у него хотя бы api есть для удобного управления плеером.
    Ответ написан
    1 комментарий
  • Как называется это?

    neuotq
    @neuotq
    Прокрастинация
    Квизы (от англ. - quizzes - викторины), модный последние два года метод лидогенерации либо метод заставить пользователя проделать определенные шаги. Но в подавляющем числе случаев конечно же используется для сборы контактов.
    К сожалению сегодня их стали слишком часто использовать там где не нужно.
    Ну и да, один из кейсов это совмещение с чат ботом, что помогает сразу же направить человека к нужному специалисту, либо не тратить время менеджера на первичный опрос клиента, и тд и тп
    Ответ написан
  • Адаптивное горизонтальное меню?

    neuotq
    @neuotq
    Прокрастинация
    Открывай смотри.
    Для этого удобно использовать Flex, при этом используя media query можно менять направление на колонку, вместо строки.
    Ну а дальше дело техники. Добавляй вспомогательные элементы, которые видны только на маленьком экране, а на большом не видно. Это может быть как раз символ меню(ну допустим тот же "бургер"), далее с помощью js можно сделать по клику добавлять "показать"/ "скрыть" для нового уже вертикального меню (на самом деле можно и чисто на css, чуть больше мороки и ограничений)

    Ответ написан
    4 комментария