• Постраничная навигация Битрикс (через "показать еще"). Как решить ошибку в JS?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    querySelector* вызывается на DOM элементах. Сервер не может вернуть Вам ссылку на дом элемент.
    Что в data? Селектор, судя по всему? тогда
    document.querySelector(data).querySelector('.news-item')
    , если это сужение поиска необходимо.
    ---
    $(data).find('.news-item') не равно data.querySelectorAll('.news-item'). Вы либо ошиблись, либо не до конца понимаете что такое $(data)
    Ответ написан
  • Как покрасить текст в зависимости от символа?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    const MCITEMDIFFERENCE = document.querySelectorAll('.mc__span');
    
    MCITEMDIFFERENCE.forEach((element)=>{
        if (element.innerHTML.startsWith("+") {
            element.classList.add("plusDifference");
        }
        if (element.innerHTML.startsWith("-") {
            element.classList.add("minusDifference");
        }
    })

    Dzambulat, а круглые скобки кто будет после if закрывать?
    Вам ошибка синтаксиса в консоле вообще ни о чём не намекает?

    Вот где исправлено и работает:
    Ответ написан
    1 комментарий
  • Как сделать css before неразрывным с элементом?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    .elem::before {
      content: 'Текст\00a0' /* , где \00a0 - юникод символ неразрывного пробела */
    }

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

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    3 комментария
  • Как обрабатывать событие $('.div-nested').on('click', function() { у ещё не созданных элементов?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Либо по средствам делегирования событий (рекомендуется)
    И тогда на jQuery будет что-то типа:
    $('.div-0').on('click', '.div-nested', function() {...}

    Либо при создании элемента добавлять ему обработчик.
    И тогда что-то типа:
    var d = $('div', {
      class: 'div-nested',
      on: {
        click: function() {}
      }
    })
    Ответ написан
    2 комментария
  • Почему в Chrome не отображается круг, а получается квадрат?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ну, судя по всему, у хрома давно проблемы с тенями и закруглением и это их текущая реализация - если блок маленький, то и тень будет не круглая, а со скругленными углами. Это можно увидеть если поставить промежуточное значение без анимации для вашего "круга". Из тени получится квадрат со скруглёнными углами. Если увеличивать размер круга, до хотя бы 4х пикселей по ширине и высоте, то и тень станет круглой.

    Решение я тут вижу сходу пока только одно - другая реализация.

    Накидал на ходу (не 1 в 1, но я думаю сможете подкрутить):
    Ответ написан
    8 комментариев
  • Не работает grid-template-areas?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    В grid-template-areas указываются не классы элементов, а значения grid-area, которое задано элементам.

    Например:
    .ac {
      grid-area: ac
    }
    
    ...
    
    .buttons {
        display: grid;
        grid-template-areas:
        "ac plus-minus percent division"
        "seven eight nine multi"
        "four five six minus"
        "one two three plus"
        "zero zero dot equal";
    }


    Ну и сетку тоже нужно определить. А то грид указали, а какие колонки\строки не указали.
    Ответ написан
    Комментировать
  • Почему на мобильной версии сайта картинки плохого качества?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Да и еще вопрос, если через режим адаптивности смотреть на сайт в блоке Режимы работы опять таки блоки стоят в 2 столбика, а на телефоне этот же блок стоит в 1 столбик.


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

    А разметка разная отдаётся потому что, полагаю, разные страницы открываются :-)
    Сравните урл на пк и на мобилке. Где-то редирект.
    Ответ написан
    1 комментарий
  • Как сделать такую кнопку в CSS?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    background-image: linear-gradient(to right, tomato 70%, transparent 70%)
    Ответ написан
    Комментировать
  • Как сделать блоки одинаковой высоты?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    https://brm.io/jquery-match-height/
    (уверен есть вариация без jQuery)

    Либо фиксировать размеры отдельных элементов карточки по высотам.

    CSS не умеет так как Вам надо в динамике.
    Одинаковая высота может быть только в рамках одного родителя через display: flex или grid.
    А Вам нужна одинаковая высота между разными элементами, у которых общий родитель не ближайший вверх по дереву.

    Единственное что можно сделать, это задать margin-top: auto первому блоку после описания Товара, тогда это прижмёт к низу все последующие блоки, что может создавать пустоту в отдельных случаях между описанием товара и остальными блоками (хотя такое будет и с решением на js)
    Как-то так:
    Ответ написан
    4 комментария
  • Есть ли объяснение данному поведению Flexbox?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Чтобы дочерние элементы были одной высоты (по максимальному в строке), им не нужно задавать display: flex.

    Не понятно на самом деле какое нужно объяснение? Так работает flexbox. Точка.
    Но это поведение можно изменить с помощью align-items, у которого по умолчанию значение stretch. Даже если оно явно не указано.
    Ответ написан
    3 комментария
  • Как сделать ренж инпуты?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    1) Зависит от того, нужна ли возможность менять значения.
    Если нет(а судя по скриншоту как раз это просто индикатор), то это скорее тэг meter или progress
    Правда у progress всего 1 цвет по умолчанию, а у meter 3 цвета, а у вас, судя по картинкам - 4 (орандж, жёлтый, зелёный, фиолетовый)
    То есть можно создать на основе meter свой компонент или сделать обработчик и доопределить цвета в зависимости от значения, либо обойтись 3мя цветами (которые можно переопделить: https://stackoverflow.com/questions/8094835/how-to...)
    На худой конец это просто div с заливкой.

    2) Как определять цвета - это Вам не у нас нужно спрашивать. То есть нужно узнать на каком основании делать разбивку. Мы можем придумать Вам вариант, но Вы и сами можете придумать как угодно (описанный в вопросе вариант - один из возможных). Если это просто рандомный макет, то так и сделайте. Задавайте как в голову придёт. Если нет - спросите у постановщика.
    Ответ написан
    Комментировать
  • Как вызывать функцию по кнопке больше одного раза?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    btn_open.onclick = modal.style.display = "block"
    Так а зачем вы перезаписываете функцию, которая должна происходить по клику?

    Что необходимо изменить, чтобы функция постоянно отзывалась по клику?

    - btn_open.onclick = modal.style.display = "block"
    + modal.style.display = "block"
    Ответ написан
    Комментировать
  • Как элементы массива сделать значениями объекта?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Мое решение:

    let arr = ['a', 'b', 'c', 'd', 'e'];
    let obj = {};
    for (let i = 0; i <= arr.length; i++) {
    obj[i + 1] += arr;
    }
    console.log(obj);


    Ну Вы были относительно близко.
    1. Зачем Вы делаете += ? Вы же не плюсуете к чему то, а назначаете значение. То есть
    - obj[i + 1] += arr;
    + obj[i + 1] = arr;

    2. Зачем Вы прибавляете весь arr, когда Вам нужен элемент массива, а не весь массив. То есть:
    - obj[i + 1] = arr;
    + obj[i + 1] = arr[i];

    3. Цикл выполнится 6 раз, так как у Вас от нуля до длины массива - 5. То есть, 0,1,2,3,4,5. Вместо этого можно начать с 1, и в итоге тогда:
    let arr = ['a', 'b', 'c', 'd', 'e'];
    let obj = {};
    for (let i = 1; i <= arr.length; i++) {
    obj[i] = arr[i-1];
    }
    console.log(obj);


    Ну и как уже сказали выше, можно через reduce. Тогда будет значительно короче:
    let arr = ['a', 'b', 'c', 'd', 'e'];
    let obj = arr.reduce((a, c, i) =>  (a[i+1] = c, a), {});
    console.log(obj);
    Ответ написан
    Комментировать
  • Как расположить flex-элементы для разных экранов по разному?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Ответ написан
    Комментировать
  • Cannot read properties of null (reading 'classList')?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Не стал считать какая строка у Вас тут 31ая...
    Ошибка означает, что querySelector* или переменная, на которой это вызывается - вернули null.
    То есть элемент не найден в разметке.
    Ответ написан
    Комментировать
  • Почему axios запрос работает не так как я ожидаю?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    оффтоп

    Интересно, про это каждый день спрашивают, или всё же с промежутками...

    console.log(data) - а по факту я получаю не то, что было там
    console.log(obj)

    Это выполнится раньше чем запрос.
    Если Вам это понятно, то что Вам НЕ понятно?
    Либо всё дальше в .then, либо идите дальше осваивать асинхронный javascript, а именно - async\await

    Ну и
    но как тогда сделать правильно в моем случае

    1) Правильно понятие абстрактное и относительное
    2) Откуда нам знать что Вы делаете, чтобы предложить варианты? Где критерии для "правильно"?
    Ответ написан
  • Как отследить изменение содержимого input через jQuery?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Не с той стороны Вы подошли к вопросу.
    Вам не за инпутом следить надо, а пойти в доку дэйтпикера и найти событие, которое эмитится наверх при выборе даты в дэйтпикере, подписаться на него и делать нужную обработку.

    https://jqueryui.com/datepicker/

    В случае с этим дэйтпикером нужно указать коллбэк в соответствующей опции при инициализации:
    https://api.jqueryui.com/datepicker/#option-onSelect
    Ответ написан
    Комментировать
  • Как сверстать такое сообщение?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Набросал на коленке.
    Не идеально, но бесплатно и без вашего кода(что вообще то не приветствуется правилами сервиса):
    Ответ написан
    3 комментария
  • Как изменить background инпутов contact form 7?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ответ написан
    Комментировать