Комментарии пользователя Вадим

Ошибка при запуске webpack serve, не могу понять в чем проблема?

Вадим @MrDecoy Куратор тега CSS

я не понимаю что там нужно исправить

Как вариант, посетить документацию по post css loader и посмотреть как конфигурировать его правильно.

{
    loader: "postcss-loader",
    options: {
        postcssOptions: {
            plugins: [
                [
                    "postcss-preset-env",
                    {
                        // Options
                    },
                ],
            ],
        },
    },
}

Написано более трёх лет назад

Vue, vualidate как начать валидацию?

Вадим @MrDecoy

ettaluni, Не за что. И Вам не нужно вызывать $touch() в обработчике сабмита. В обработчике сабмита нужно проверять $invalid. Если $invalid - true, значит форма не валидна и отправлять её не нужно.

Написано более трёх лет назад

Vue, vualidate как начать валидацию?

Вадим @MrDecoy

ettaluni, В указанном коде $v.name.$touch() использовался только в шаблоне.
Соответственно, в методах он доступен по this.$v

Во vue3 не пользовался.

На сайте написано что текущая версия для vue2.

На гитхабе есть такой вот пункт, касающийся vue3 https://github.com/vuelidate/vuelidate#vue-3-support
И ветка где описано как пользоваться с третьей версией https://github.com/vuelidate/vuelidate/tree/next

Написано более трёх лет назад

Как дописать скрипт, чтобы на странице открывалось только одно pop-up окно?

Вадим @MrDecoy Куратор тега JavaScript

Дмитрий Медведкин, Возможно стоит ещё сделать проверку что target не Null

Написано более трёх лет назад

Как дописать скрипт, чтобы на странице открывалось только одно pop-up окно?

Вадим @MrDecoy Куратор тега JavaScript

Дмитрий Медведкин, обновил ответ, попробуйте ещё раз, так как это действительно не функция, а свойство.

Написано более трёх лет назад

Как дописать скрипт, чтобы на странице открывалось только одно pop-up окно?

Вадим @MrDecoy Куратор тега JavaScript

Дмитрий Медведкин, ну тогда удалить вообще id у этих элементов, раз он не уникальный. А решение в ответы сейчас напишу

Написано более трёх лет назад

Ошибка при запуске webpack serve, не могу понять в чем проблема?

Вадим @MrDecoy Куратор тега CSS

PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap?, implementation? }

Написано же что Pluginsне поддерживаемое свойство и ниже перечислены свойства, которые поддерживаются.

Написано более трёх лет назад

Чем заменить uploadify.swf?

Вадим @MrDecoy Куратор тега JavaScript

Gragor, я может чего-то не понял, а input file miltiple не подходит?

Написано более трёх лет назад

Как дописать скрипт, чтобы на странице открывалось только одно pop-up окно?

Вадим @MrDecoy Куратор тега JavaScript

А айдишники у модалок разные в разных секциях?

Вот тут Ваш скрипт находит элемент модалки по id, исходя из того, что написано в атрибуте href у ссылки

const target = event.target.closest(`.${CLASS_LIST.TRIGGER_OPEN}`);
const modalId = target.getAttribute('href').replace('#' , ''); // смотрит на значение href, вырезает решётку.
const modal = document.getElementById(modalId); // находит элемент с таким id

И точно ли у Вас открываются все модалки сразу? Тут один элемент только ищется.

Написано более трёх лет назад

Правильно ли выполнена асинхронность запроса?

Вадим @MrDecoy

Но тогда получается "перенасыщение" прелоадеров в приложении

Дополню

Вы либо даёте пользователю знать о том что происходят какие-то важные фоновые процессы, либо нет

Либо делаете один глобальный лоадер, условно на всю страницу, и когда хоть где-то что-то грузится - он активируется и показывается.
Либо блочите весь интерфейс пока оно всё не отрисуется :-)

Итого 4 варианта :-)
Много лоадеров,
Один лоадер,
Нет лоадеров - есть взаимодействие с интерфейсом,
Нет лоадеров - нет взаимодействия с интерфейсом

Написано более трёх лет назад

Что это за синтаксис?

Вадим @MrDecoy

Скорее всего плагин не поддерживает гриды, а именно функцию repeat и парсил их как что-то другое

Написано более трёх лет назад

Как скрыть навигационную панель, вручную, на мобильных устройствах (на чистом js)?

Вадим @MrDecoy Куратор тега JavaScript

aspirantes, мне недавно тоже это мешало, находил решение мол установите сразу прокрутку в какое то положение, хотя бы 1 пиксель и тогда они скроются сразу, но что-то не помогло :с

Написано более трёх лет назад

Как скрыть навигационную панель, вручную, на мобильных устройствах (на чистом js)?

Вадим @MrDecoy Куратор тега JavaScript

aspirantes, только метатэг этот судя по всему начиная с ios 8 уже не поддерживается, а текущая версия 14. То есть не поддерживается на ios в принципе.

Написано более трёх лет назад

Как работать с gulp в команде?

Вадим @MrDecoy

vasya2004, репозиторий лучше именно клонировать в рабочую папку, а не скачивать архив.
Далее зайти в рабочую папку, там должен быть файл package.json - если он есть, то в командной строке этой папки ввести npm i - установит все зависимости так же, как это сделал автор репозитория.
Попробовать запустить галп команду.
Если заработало - пользуемуся.
Если не заработало и выдаёт ошибку что-то вроде gulp - неизвестная команда, то ставим галп глобально с помощью npm i gulp -g, пробуем запустить ещё раз.

Описал с условиями, так как зависит от того, как настроен проект сейчас.

Написано более трёх лет назад

Как скрыть навигационную панель, вручную, на мобильных устройствах (на чистом js)?

Вадим @MrDecoy Куратор тега JavaScript

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

Написано более трёх лет назад

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

Вадим @MrDecoy

hover, mouseover?

Написано более трёх лет назад

Проблемы с всплывающим окном, как исправить?

Вадим @MrDecoy Куратор тега CSS

fronttrty, Да, поэтому тут удобнее использовать либо объект, который будет хранить в себе все необходимые данные, таким образом, все его методы будут иметь доступ до них, либо просто хранить данные в общей области видимости между функциями.

Написано более трёх лет назад

Как разместить блок внутри псевдоэлемента?

Вадим @MrDecoy Куратор тега CSS

Сергей Золотарёв, так правильно, + означает "следующий" элемент. А у Вас не следующий, а вложенный.
И опять же, всё верно, если убрать + то стили применяются для promoblock_content.
Изучите предоставленный выше CSS, который под спойлером. Там отдельно стили для promoblock и отдельно для promoblock_content.
В вашем случае, если Вы хотите чтобы у них была одинаковая специфичность, то примерно так:

#promo > main.swiper-container .promo-feed .promoblock {
    position: relative;
    z-index: 1;
    height: 440px;
    box-shadow: 0 0 5px 1px grey;
}

#promo > main.swiper-container .promo-feed .promoblock .promoblock__content {
    position: absolute;
    top: 10px;
    left: -10px;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 1;
    padding: 10px 10px 10px 0;
    box-sizing: border-box;
    box-shadow: inherit;
}

#promo > main.swiper-container .promo-feed .promoblock .promoblock::before {
  content: '';
  pointer-events: none;
  position: absolute;
  top: 5px;
  left: -5px;
  z-index: -2;
  width: 100%;
  height: 100%;
  background-color: white;
  box-shadow: inherit;
}

Написано более трёх лет назад

Как разместить блок внутри псевдоэлемента?

Вадим @MrDecoy Куратор тега CSS

Сергей Золотарёв, Если по ссылке уже обновлённый вариант, то не увидел заданных стилей для promoblock_content и теней. У Вас получилось только одна рамка сзади, а по дизайну у Вас вроде как 2.

Написано более трёх лет назад

Как разместить блок внутри псевдоэлемента?

Вадим @MrDecoy Куратор тега CSS

Сергей Золотарёв, Чтобы применить предложенное решение нужно обернуть контент, скажем, promoblock
в дополнительный div, и сделать так, чтобы высота у промоблока была не по высоте контента.

HTML

<div class="promoblock swiper-slide swiper-slide-next" data-swiper-slide-index="1" role="group" aria-label="11 / 27" style="margin-right: 30px;/* position: relative; *//* z-index: 1; *//* width: 100%; *//* height: 440px; *//* background-color: white; *//* box-shadow: 0 0 5px 1px gray; */">
    <div class="promoblock__content">
                        <header>
                            <a href=""><strong>Factorys</strong>(92)</a>
                        </header>
                        <main>
                            <span class="location">
                                Austria
                            </span>
                            <img src="https://lyubimiigorod.ru/web/v2assets/img/noImg_2-1.jpg" alt="Not image">
                        </main>
                        <footer>
                           <div class="info">
                                <span>Austria, a plant for the production of sausages...</span>
                                <span>&nbsp;</span>
                                <span>$ 10 300 000</span>
                            </div>
                            <div class="raiting">
                                <span>Expert Raiting</span>
                                <div class="rating-mini">
                                    <span class="active"></span>	
                                    <span class="active"></span>    
                                    <span class="active"></span> 
                                    <span class="active"></span>	
                                    <span class="active"></span>    
                                    <span class="active"></span>
                                    <span class="active"></span>    
                                    <span></span>
                                    <span></span>    
                                    <span></span>
                                </div>
                            </div>
                        </footer>
                    </div></div>

CSS

#promo > main.swiper-container .promo-feed .promoblock {
    position: relative;
    z-index: 1;
    height: 440px;
    box-shadow: 0 0 5px 1px grey;
}

.promoblock__content {
    position: absolute;
    top: 10px;
    left: -10px;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 1;
    padding: 10px 10px 10px 0;
    box-sizing: border-box;
    box-shadow: inherit;
}

.promoblock::before {
  content: '';
  pointer-events: none;
  position: absolute;
  top: 5px;
  left: -5px;
  z-index: -2;
  width: 100%;
  height: 100%;
  background-color: white;
  box-shadow: inherit;
}

Результат

Написано более трёх лет назад

Войдите на сайт