Задать вопрос
MrDecoy

Вадим

Верставший фронтендер
Комментарии

  • Как сделать что бы картинка сдвигала соседние боковые элементы?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Типа так?
    Написано

  • Зачем две функции?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Андрей Кузнецов, отлично.
    Обращайтесь
    Написано

  • Зачем две функции?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Андрей Кузнецов, Ну, собственно, это логично, что не удаляет. Обработчик у Вас есть же только на добавление:
    if (item.checked) {
        const punkt = document.createElement('p');
          punkt.className = 'p_punkt';
          contentLine.append(punkt);


    Возможных алгоритмов решения на самом деле можно придумать несколько. Но суть, в целом, будет одна.
    Нам нужно хранилище данных, на основе которых будет происходить отрисовка.
    А по срабатыванию выбранного тригера - делать перерисовку.

    В данном случае, в качестве хранилища, у Вас выступают HTML элементы чекбоксы, хранящиеся в checkBoxses.
    Тригером перерисовки выступает клик по кнопки "Применить."

    Вы в шаге от решения своей задачи.
    Первой строчкой в обработчике клика нужно отчищать имеющуюся в conentLine разметку.
    То есть: contentLine.innerHTML = "".
    А потом Ваш уже написанный код снова сгенерирует разметку на основе только выбранных чекбоксов.

    Ещё более оптимально будет не отчищать разметку, а генерировать новую и замещать текущую за одну операцию вставки. Даже сейчас у Вас идёт несколько операций изменения DOM (append в цикле). А работа с DOM одна из наиболее медленных операций в браузере.

    Статья по теме: https://learn.javascript.ru/modifying-document
    documentFragment - поможет с более оптимальным решением. Но так как элементов у Вас там не много, эта оптимизация может быть преждевременной. То есть Ваши затраты на неё будут больше, чем оно того стоит.
    Написано

  • Зачем две функции?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Андрей Кузнецов, ну вы список вопросов задавайте, что знаю объясню
    Написано

  • Как выровнять карточки flexbox?

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

  • Насколько правильно сбрасывать стили блока через all:unset?

    MrDecoy
    @MrDecoy Куратор тега CSS
    godsplane,
    я до сих пор не понима почему normalize популярнее reset

    Одно из больших заблуждений в сообществе, что это конкурирующие библиотеки.
    Они решают две совершенно разные задачи.

    В контексте сегодняшнего дня, если Вы не пишите под легаси браузеры, такие как ie и, скажем, сафари 10(пальцем в небо) то Вам, скорее всего, не нужно ни то ни то. Может какой-то маленький сабсет из нормалайза.

    А популярнее он потому, что на дистанции с reset Вы мало того, что подключаете доп стили, которые всё сбрасывают, так потом ещё и большую часть из них заного вручную определяете. И чем дольше живёт проект, тем больше пересечение между обнулёнными и заного определёнными. Так зачем сбрасывать то, что потом всё равно переопределяется? А ещё если разметка приходит с CMS через wisywig редактор, то ресет может подпортить результат.

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

  • Насколько правильно сбрасывать стили блока через all:unset?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Насколько это верное решение

    Настолько, насколько оно подходит лично Вам, команде и проекту.
    И это ответ на любой вопрос, который начинается с "Как правильно" и дальше что-то в отрыве от контекста.
    Контекст решает всё.
    То, что совершенно не пригодно для одного проекта - вполне приемлемо для другого.
    Написано

  • Как анимировать SVG?

    MrDecoy
    @MrDecoy Куратор тега CSS
    как ее интегрировать в сайт

    https://htmlacademy.ru/blog/html/short-4

    Можно ли сделать так, чтобы при наведение , он бы отсылался бы к дрyгой svg, и так бы полyчилась анимация

    Выбросьте это покадровое мышление из зари мультипликации, что Вам нужно отрисовать промежуточные кадры.. Свг свойства и фигуры анимируются путём указания какое свойство какое должно иметь значение через определённое время анимации (как правило в процентах).
    Например, говорите что начальное значение цвета - красный. Конечное синий. Анимация длится 2 секунды. И вот 2 секунды цвет будет плавно переходить из красного в синий.

    или где то отдельно на редакторах надо делать

    Можно сделать в, например, svgator, если Вы больше дизайнер чем разработчик. Там есть иморт конечного результата как на js, так и на css.

    Ну и вбейте Ваш вопрос в гугл. 100500 ответов на любой вкус. (Вы должны были это сделать перед тем как задать вопрос, согласно правилам сервиса)
    Написано

  • Как найти ближайший элемент на чистом js?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    vilkakpp, Не за что. Но Вам ниже дельную вещь предлагают.
    Если обработчик этой кнопки перед отправкой формы, то почему бы не привязать обработчик вместо кнопки к прослушиванию события submit у формы? А кнопку просто сделать type="submit". Тогда в обработчике будет в event.target, или внутри this - форма. И вообще не нужно будет в DOM ничего искать.
    Написано

  • Эффект hover для кнопки?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Для начала осознать что тут не экстрасенсы сидят и предоставить код.
    Написано

  • Как выровнять карточки flexbox?

    MrDecoy
    @MrDecoy Куратор тега CSS
    4mn13y, на 2к мониторе одинаковая высота. На fullHD да, уже начинает быть разной.

    Ох... так а зачем же Вы текст позиционируете через padding...
    Сделайте карточке 
    display: flex; flex-direction: column; min-height: 320px
    .
    padding сделайте "адекватным" сверху. Например такой же как и снизу.
    А для .text: margin-top: auto

    Ну и соответственно align-items: end убрать
    Написано

  • Как запретить невалидные сравнения в if?

  • Как запретить невалидные сравнения в if?

    MrDecoy
    @MrDecoy
    Даниил Сугоняев, ну вот, уже более понятно что Вас не устраивает. Стоило с этого начинать.
    Написано

  • Можно ли в iframe добавить поверх свою рекламу?

  • Как запретить невалидные сравнения в if?

    MrDecoy
    @MrDecoy
    А чем это сравнение не валидное?
    Тем что сравнивает разные типы данных? Ну так это валидно для языка.
    Тем что Вам это не нравится? Ну тогда напишите предварительно сравнение типов данных.
    Написано

  • Как выровнять карточки flexbox?

    MrDecoy
    @MrDecoy Куратор тега CSS
    4mn13y, А ну так по ссылке там одинаковые размеры по высоте.
    Зачем Вы align-items: flex-end задали? Оно выравнивает карточки по низу строки. Уберите и будут одной высоты всегда, по большей.
    Написано

  • Как выровнять карточки flexbox?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Что значит "выравнивались"?
    Чем Ваш пример на codepen отличается от скриншота?
    Тем что ширина у них разная? Это так не работает. Flexbox по высоте в строке выравнивает по большей. не по ширине.
    Нужно сетку делать чтобы одинаковая ширина была. Ну или как минимум вручную её задать.
    Ну на худой конец всем flex-grow: 1; но это не выравнивание по большем. А равномерное заполнение.
    Написано

  • Можно ли в iframe добавить поверх свою рекламу?

    MrDecoy
    @MrDecoy Куратор тега CSS
    что мешает в общего с iframe родителя поместить свой блок и спозиционировать его поверх iframe?
    Написано

  • Как дать стиль элементу в который вложен checkbox?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Можно сделать псевдоэлемент для label, position:relative для ячейки таблицы, поместить псевдо под низ и красить.
    Родительский элемент на основе состояния дочерних покрасить условно нельзя. Только через очень свежий :has, либо более поддерживаемый :focus-within, но это не то что Вам нужно.
    Написано

  • Как бы вы переместили контент из одной колонки в другую?

    MrDecoy
    @MrDecoy
    Как бы вы переместили контент из одной колонки в другую

    на гридах.


    Возможно ли это реализовать на флексах

    Можно помучаться, но зачем?
    Написано