Ответы пользователя по тегу HTML
  • Можно ли разместить тег 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);
    Ответ написан
    Комментировать
  • Как можно сделать перенос строк?

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

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

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

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

    Либо и span и input должны лежать внутри label, либо только через js.
    Ну или хотя бы span внутри label
    И селектор тогда надо будет не забыть поменять.
    Ответ написан
    1 комментарий
  • Почему 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 Куратор тега HTML
    Верставший фронтендер
    Вы хотя бы пытались гуглить?
    Меньше минуты - https://codepen.io/nicolaserny/pen/zYEqgVv
    Ответ написан
    Комментировать
  • Что за библиотека для анимации на сайте?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Вот вроде основные:
    GSAP,
    TweenMax js
    ScrollMagic js
    barba js
    swiper js
    lottie

    Возможно есть аналоги на js или jquer

    Они все на js. Хотя jQuery у них к сайту тоже подключается.
    Ответ написан
    Комментировать
  • Как правильно сверстать сайт, на котором хедер и первый блок сделан одной картинкой?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Не сделан тут Header и первый блок одной картинкой. Просто у header нет фона и он спозиционирован поверх блока с фоном, например, через position: fixed, либо располагается внутри него:
    .hero background-image: url()
      header


    P.s. hero screen - паттерн, когда первый экран на весь экран, и, как правило, вместе с шапкой.
    Ответ написан
    Комментировать
  • Как решить проблему с CLS?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Судя по всему ему не вертикальный шифт не нравится, а горизонтальный. По обновляйте свою страницу быстро несколько раз. Сначала один элемент первый, а потом другой.

    Если это происходит из-за инициализации слайдера, то можно попробовать её отложить.
    Ответ написан
    Комментировать
  • Как сверстать плитку с разным количеством элементов в ряду?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Вообще тут Ваш код должен был быть, с Вашей попыткой реализации..

    Ответ написан
    Комментировать
  • Как сделать стрелку двух линий с помощью css?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    google: chevron css
    Ответ написан
    1 комментарий
  • Почему не работает всплывашка, сам скрипт подключен в html перед закрывающим body?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    const openPopUp = document.getElementById('open_pop_up');
    - id должен быть уникальным в рамках страницы. Не должно быть более одного элемента, с повторяющимся id. В итоге тут будет найден только первый в разметке элемент с таким id. То есть только первая кнопка "заказать" будет работать.

    const closePopUp = document.getElementById('pop_up_close');
    - не существует элемента с таким id. Есть с class.

    const popUp = document.getElementById('pop_up'); - аналогично предыдущему.

    <a class="table_box_button" href="#" class="open_pop_up">Заказать</a>
    Это где Вы научились два раза один и тот же атрибут объявлять на элементе? Объединить в один.
    Ответ написан
    4 комментария
  • Как заставить работать colspan или существует другой способ компоновки?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Проблема в шапке таблицы, где вложенные объекты раскрываются в другую таблицу

    Всё верно. Проблема именно в этом. Что у Вас получается 2 несогласованные таблицы. Не понято зачем.

    <table>
      <thead>
        <tr>
          <th rowspan="3">Наименование</th>
          <th colspan="3">Компания</th>
          <th rowspan="3">Цена</th>
          <th rowspan="3">Валюта</th>
        </tr>
        <tr>
          <th rowspan="2">Название</th>
          <th colspan="2">Страна</th>
        </tr>
        <tr>
          <th>Название</th>
          <th>Морсокй морт</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>lorem</td>
          <td>lorem</td>
          <td>lorem</td>
          <td>lorem</td>
          <td>lorem</td>
          <td>lorem</td>
        </tr>
      </tbody>
    </table>
    Ответ написан
    Комментировать
  • Как найти ближайший элемент на чистом js?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Если под "ближайший" подразумевается вверх по дереву, то:
    onclick="doLoad(this.closest('form'))"
    Ответ написан
  • Как изменить дефолтное поведение инпут дате?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    он возвращает дату в формате
    MM-DD-YYYY - месяц день год

    Нет, не возвращает.
    Возвращает в формате YYYY-MM-DD.

    как-то можно без библиотек поменять на
    DD-MM-YYYY

    Можно. Все библиотеки для JS работают на JS.

    var d = document.querySelector('input[type="date"]')
    
    d.addEventListener('change', function(){
      console.log(this.value) // YYYY-MM-DD
      const [y, m, d] = this.value.split('-')
      console.log(`${d}-${m}-${y}`) // DD-MM-YYYY
    })
    Ответ написан
    Комментировать
  • Как сделать, чтобы вводимый в инпут текст не заезжал под иконку очистки инпута, которая находиться в этом инпуте справа?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    добавить паддинг справа
    Ответ написан
    Комментировать
  • Title == aria-label?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Не совсем.
    1) Не все скринридеры посчитают title существенным для озвучивания (пруфов на руках нет).
    2) Есть степень специфичности, на основе которой решается что озвучить пользователю.
    aria-label приоритетнее чем title.
    title наименее приоритетный, насколько я помню. Его перебьёт всё что угодно, и если совсем ничего нет, даже content, только тогда на него обратят внимание.
    title - нет на мобильных девайсах. По крайней мере визуально (voiceover`ом не проверял)

    Вот скрин кнопки "подписаться" под Вашим вопросом из дерева доступности в десктопном гугл хром:
    6370abfd6a92c130018887.png
    Как видно - по итогу пользователю зачитается "Подписаться1", потому что aria-labelledby и aria-label не заданы, а content приоритетнее чем атрибут title.

    А в приведённом Вами примере, если опустить aria-label, то, на вскидку, должен зачитать: "изображение" + значение атрибута alt + "ссылка", так как контент есть.
    А вот если бы в ссылке не было вообще ничего и картинка рисовалась на css, скажем, фоном. Вот тогда, НАВЕРНОЕ, можно было бы сказать что aria-label и title равны. Но только при условии что скринридер вообще считает title за семантический атрибут.
    Ответ написан
    Комментировать
  • Как обвернуть одинаковые куски кода в отдельные одинаковые теги в vscode?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    1) Выделяем искомый, повторяющийся участок кода, который нужно обернуть.
    2) Делаем Ctrl+h (открывается поле поиска и замены, где в поле поиска выделенный участок)
    3) Фокус установлен в поле "заменить", которое пустое. (Если не установлен, то установить)
    4) Нажимаем Alt+enter - получаем простановку мультикурсора на все совпадающие участки
    5) f1 -> wrap with abbreviation
    6) и дальше вводите emmet-like строку, например, .my-div - обернёт все вхождения в <div class="my-div">
    7) enter
    Готово. Вы заменили все вхождения в текущем файле.

    UPD: Версия по короче, на основе ответа от WbICHA:
    1) Выделяем искомый, повторяющийся участок кода, который нужно обернуть.
    2) ctrl + shift + L - проставляет мультикурсор в совпадающие участки кода (или f1 -> select all occurrences)
    3) f1 -> wrap with abbreviation
    4) и дальше вводите emmet-like строку, например, .my-div - обернёт все вхождения в <div class="my-div">
    7) enter
    Готово. Вы заменили все вхождения в текущем файле.
    Ответ написан
  • Можно ли сослаться на класс или атрибут в ссылке, чтобы перейти к ним на странице?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    https://yablyk.com/128244-chrome-link-to-text-fragment/
    1. Откройте браузер Google Chrome и перейдите на необходимую веб-страницу.
    2. Выделите нужный фрагмент текста, на который вы хотите создать ссылку. Это может быть как одно слово, так и целый абзац. Нажмите правую кнопку мыши.
    3. Выберите в контекстном меню пункт Копировать ссылку на выделенный текст.
    Ответ написан