Задать вопрос
  • Активный пункт меню на JavaScript?

    @AnonymousJS Автор вопроса
    Решение моей проблемы, было вполне легкое. Но из за плохого знания CSS, я сделал все не так.

    Нужно было написать вместо:
    .menu-item__link,
    .active.menu-module__text {
        color: #fff;
    }


    Написать так:
    .active .item-link__text {color:#fff;} /* Нужен был пробел перед active. Поэтому он не окрасил div внутри </a>*/


    По итогу - сам JavaScript работает на ура, и правильно. Проблема была в CSS.

    Также, рекомендую, использовать такой скрипт:

    const currentLocation = location.href;
    const menuItem = document.querySelectorAll('.menu-item__link');
    const menuLenght = menuItem.length
    for (let i = 0; i<menuLenght; i++) {
        if (menuItem[i].href === currentLocation) {
            menuItem[i].className = "active menu-item__link";
        }
    }


    Плюс именно такого подхода в том, что (по крайне мере у меня) он не отображается с задержкой, при обновлении страницы.
    Ответ написан
    Комментировать
  • Как пофиксить SASL: SCRAM-SERVER-FIRST-MESSAGE: client password must be a string at Client._connectionCallback?

    @Vsevolod_021
    Добрый день!

    Была точно такая же ошибка. Причем она не возникала с использованием require. А вот с "type": "module" (как у тебя) ругается. Мне помог импорт в этот модуль config из 'dotenv'.

    import { Sequelize } from 'sequelize';
    import { config } from 'dotenv';
    
    config();
    
    const sequelize = new Sequelize(
        process.env.DB_NAME, // Название БД
        process.env.DB_USER, // Пользователь
        process.env.DB_PASSWORD, // Пароль
        {
            dialect: 'postgres',
            host: process.env.DB_HOST,
            port: process.env.DB_PORT,
        }
    );
    
    export default sequelize;


    В ином случае process.env.DB_USER, process.env.DB_PASSWORD в sequelize можно захардкодить) тоже должно работать

    Также при импорте в index.js не забудь указать расширение файла

    import sequelize from './db.js';
    Ответ написан
    Комментировать
  • Плавное появление сверху ul списка (width, height = 100%)?

    MaminProgrammist
    @MaminProgrammist
    Я слава беброу
    Смотрите:
    Лично я делаю так - для "гамбургера" и списка делаю див, объединяющий их двоих, потом, будем считать, что этот див будет назван .dropdown, создаем ему ширину с высотой и ставим в том месте где и гамбургер, пишем:
    .mob-links {
        transform: scaleY(0);
        transform-origin: 0, 0;
        transform-duration: 1s;
    }
    
    .dropdown:hover .mob-links {
        transform: scaleY(1);
        transform-origin: 0, 0;
        transform-duration: 1s
    }
    (а потом прописываете анимацию для самого "гамбургера" через .dropdown:hover, чтобы он активировался только вместе со списком)
    Ответ написан
    Комментировать
  • Как избавиться от странных линиий и пикселей в SVG?

    Figma-designer
    @Figma-designer
    Привет!

    Проблема 1 - применен Inner Shadow на группу. По всей видимости, группы для Figma и для браузера - не одно и тоже. Примените тот же эффект на шейп и всё будет ок (у меня получилось)

    Проблема 2 - в Chrome так и не смог получить) в любом случае, ну кто будет увеличивать вашу графику таким образом?

    Проблема 3 - у вас там набор близко расположенных векторов. Объедините их в один и удалите лишние точки, тогда и артефактов не будет
    Ответ написан
    4 комментария
  • Сверстать кнопку в письме?

    Qurel
    @Qurel
    Если нужна кнопка с border-radius:
    https://buttons.cm/
    Ответ написан
    Комментировать
  • Как запретить ввод пробелов, скобок и тире в поле?

    trapwalker
    @trapwalker
    Программист, энтузиаст
    https://regex101.com/r/nV9ZLS/1
    ^[^\s()-]*$
    Первая "крышка" означает, что это начало строки. Последний "доллар" означает конец строки.
    Между ними любое (0 или более символов) из множества, описанного в квадратны скобках.
    В квадратных скобках крышка означает, что множество инвертировано. То есть допускаются любые символы, кроме перечисленных.
    То есть, данное множество представляет собой НЕ: пробел, скобки и минус, но любые другие символы.
    Ответ написан
    1 комментарий
  • Почему обрезается текст в VML?

    tyukavin_denis
    @tyukavin_denis Автор вопроса
    web developer
    Проблему удалось решить полностью. В VML нужно обернуть тег center в <v:textbox> (inset="0,0,0,0" обязательно).
    <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="letter-spacing: 0em;height:30pt;v-text-anchor:middle;v-text-wrapping:false;width:355pt;" arcsize="15%" stroke="f" fillcolor="#8CBD57">
       <w:anchorlock/>
       <v:textbox inset="0,0,0,0">
          <center style="v-text-wrapping:false;color:#ffffff;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:16px;font-weight:bold;line-height:19px;mso-line-height-rule:exactly;">ПОСМОТРЕТЬ КАТАЛОГ НОВИНОК ВЕСНА-ЛЕТО 2021</center>
       </v:textbox>
    </v:roundrect><![endif]-->


    Высоту и ширину v:roundrect задавайте в pt.
    Ответ написан
    Комментировать
  • NUXT - Cannot read properties of undefined (reading 'state'), или как вывести данные из Store в компонент?

    ViperOMG
    @ViperOMG Автор вопроса
    Долго мучался, на свою версию устанавливал vuex через --force и все сломалось.
    было проделано следующее:
    -вырезан установленный vuex
    -переустановлен nuxtjs версия 2.17.2
    теперь все работает
    Всем спасибо за внимание, надеюсь кому-нибудь поможет.
    Ответ написан
    Комментировать
  • Как узнать о переполнении?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    На CSS решения я не знаю. И, вероятно, его нет вовсе.

    Остается javascript. берем переполняемый элемент и сравниваем его две метрики

    if (el.scrollHeight > el.offsetHeight) {
      // Есть переполнение
    }


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

    Red_Devi1
    @Red_Devi1
    MX-записи говорят о том на сервер с каким IP адресом должна приходить входящая почта, к исходящим сообщениям это отношения не имеет.
    Вероятнее всего, отправленные вами письма попадают в спам. Отправьте тестовое письмо на свой gmail и посмотрите. Если письма в спаме, то наверняка у вас не добавлена SPF запись, которая сообщает серверу получателя с каких IP адресов можно отправлять почту для текущего доменного имени, также это может наблюдаться из-за отсутствия DKIM-подписи

    https://www.ukraine.com.ua/wiki/hosting/mail/spf-d...
    Ответ написан
    Комментировать
  • Можно ли у swiper js убрать навигацию если слайдов меньше 5?

    DanArst
    @DanArst Куратор тега JavaScript
    Гриффиндор в моде при любой погоде!
    Если у вас отображается по 5 слайдов и общее количество равно 5, то у стрелок навигации будет класс .swiper-button-disabled. Просто добавьте следующий стиль:
    .swiper-button-disabled{
        display:none;   
    }
    Ответ написан
    Комментировать
  • Как передавать дополнительные аргументы в $emit события?

    @furashcka
    vue намеренно ограничивает кол-во аргументов в своих стандартных функциях, только ОДИН объект, объясняется это тем что объект нагляднее читается в коде чем просто список аргументов:
    mySuperFunction1(ignoreCache,  isReverse, removeEmpty, visible) { ... }
    mySuperFunction2({ignoreCache,  isReverse, removeEmpty, visible}) { ... }
    
    mySuperFunction1(false, true, true, true);
    mySuperFunction2({
      ignoreCache: false,
      isReverse: true,
      removeEmpty: true,
      visible: true
    })


    В вашем случаи в $emit можно передавать массив

    $emit(`name`, [arg1, arg2]);

    А снаружи раскладывать массив стандартной es6 операцией:
    @событие="metod(...$event)"
    Ответ написан
    Комментировать
  • Как сбросить автопрокрутку у Swiper при переключении таба?

    DanArst
    @DanArst
    Гриффиндор в моде при любой погоде!
    Можно использовать метод slideTo, но он ломает autoplay, поэтому можно сделать следующее:
    отключить autoplay - скролл до 1-го слайда - включить autoplay


    navList[i].addEventListener("click", (evt) => {
        let currentLink = tabContainer.querySelector(
          ".slidersTab__tab-label.current"
        );
        let currentTab = tabContainer.querySelector(
          ".slidersTab__slidersItem.current"
        );
        //добавить 4 строчки -- start 
        let currentSlider = tabList[i].querySelector('.slidersTab__slider-body').swiper;
        currentSlider.autoplay.stop();
        currentSlider.slideTo(0, 0, false);
        currentSlider.autoplay.start();
        //-- end
        currentLink.classList.remove("current");
        navList[i].classList.add("current");
    
        currentTab.classList.remove("current");
        tabList[i].classList.add("current");    
    });


    Ответ написан
    1 комментарий
  • Nuxt.js 3, как запустить с pinia?

    SeaInside
    @SeaInside
    16 лет пилю все эти штуки
    Установить `@pinia/nuxt` недостаточно, нужно установить и саму `pinia`.

    npm install pinia
    Ответ написан
    2 комментария
  • Как спрятать scrollbar в div и отставить возможность скроллинга?

    WebgeekS
    @WebgeekS
    100% рабочий вариант Chrome, Safari, IE и т.д
    .elem {
          overflow: auto;
          -ms-overflow-style: none;
          scrollbar-width: none;
    }
    
    .elem::-webkit-scrollbar {
          width: 0;
          height: 0;
    }
    Ответ написан
    2 комментария
  • Какое регулярное выражение подойдет для проверки номера телефона?

    @kudry
    Тоже столкнулся с проблемой валидизации телефонных номеров.
    Телефоны берутся с участников вебинаров, на которые записываются люди из очень разных стран.
    Соответственно, со всеми предыдущими схемами возникают проблемы:
    1) а что если телефон с Украины (не +7-, а +38-)? А из Казахстана? А США (1-)? А Уганда ( +233-)? (из Уганды, правда, пока слушателей не было, но все впереди).
    2)В разных местностях приняты самые невообразимые способы разбиения телефона на группы цифр:
    8(8888)8-88-88-88 например. или 888(88)88888-888. Да и какие угодно могут возникнуть в будущем.
    Поэтому вариант с "дефолтным разбиением типа "8(888)888-88-88 ну совершенно не катит.

    Соответственно, я придумал следующий валидатор:
    1) В начале могут быть пробелы, после них может быть "+" (а может и не быть)
    2) Дальше должна идти группа цифр в количестве от 10 до 14 (мне нужны номера в международном формате; но если кому-то нужны более короткие - можно исправить диапазон длин).
    3) Поскольку я не знаю, как люди группируют цифры - до и после каждой цифры может быть один из 8 знаков ("-", " ", "_", "(", ")", ":", "=", "+"). Это значит, что между двумя цифрами могут быть любые два из этих знаков.

    В итоге получилось очень коротко и понятно )) :
    /^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){10,14}(\s*)?$/

    Съедает следующие телефоны:
    +7(903)888-88-88
    8(999)99-999-99
    +380(67)777-7-777
    001-541-754-3010
    +1-541-754-3010
    19-49-89-636-48018
    +233 205599853
    Ответ написан
    1 комментарий
  • Как изменить цвет png с оранжевого на белый, средствами CSS (фильтры)?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    filter: brightness(0) invert(1);
    https://jsfiddle.net/ku9uewwf/
    Опять же кроссбраузерность проверь
    Ответ написан
    1 комментарий
  • Почему v-bind перестает работать со строками?

    JRK_DV
    @JRK_DV
    Рецепты https://codepen.io/jrkdv/full/LKLXdq
    потому что с ":" - это вычисляемый аттрибут

    для примера, строку можно взять в одинарные кавычки, чтобы это было валидное выражение:
    :title="'Неработающий заголовок'"

    можно рассматривать как:
    var title = 'Неработающий заголовок';
    без одинарных кавычек, получается так:
    var title = Неработающий заголовок; - ошибочная конструкция
    Ответ написан
    Комментировать
  • Как отслеживать ширину экрана Vue?

    Vlad_IT
    @Vlad_IT
    Front-end разработчик
    Есть событие onresize
    Слушаете его в своем компоненте. и при срабатывании выполняйте нужный метод.
    Ответ написан
    2 комментария