• Есть ли сейчас необходимость в HTML5Shiv и Modernizr?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Зависит от требований браузерной поддержки для проекта.
    Ответ написан
    Комментировать
  • Как сделать чтобы при нажатии на 1 кнопку, видео менялись по очереди?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Чтобы решить любую задачу нужно начать с разбития её на последовательность простых шагов.
    1) Сделать кнопку
    2) Сделать массив адресов видео
    3) Сделать цикличный счётчик от 0 до длина массива из п2 минус один, т.к. индексация в массивах с нуля.
    4) Всё совместить - доставать урл на видео по индексу-значению счетчика.

    // Кнопка
    const nextvideo = document.getElementById('nextvideo');
    // Видео элемент
    const videoElement = document.getElementById("video");
    // Массив путей
    const vids = [
      "../assets/img/web_1.mp4",
      "../assets/img/web_2.mp4",
      "../assets/img/web_3.mp4"
    ];
    // Счётчик
    let idx = 0;
    // Устанавливаем первый урл как первое видео.
    videoElement.src = vids[0]
    // Совмещаем всё вместе в обработчике клик
    nextvideo.addEventListener('click', function () {
      // Цикличность счётчика:
      // Если следующее значение выходит за длину массива минус 1 (выражено знаком "меньше"), 
      // то обнуляем, в противном случае увеличиваем на 1.
      idx = idx + 1 < vids.length ? idx + 1 : 0; 
      const nextVideoUrl = vids[idx];
      videoElement.src = nextVideoUrl
    })
    Ответ написан
    Комментировать
  • Как написать маску для замены в js?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    "[related_products] text text text [/related_products]".replace(/\[related_products\]\s(.+?)\s\[\/related_products\]/g, '$1') // text text text
    Ответ написан
    Комментировать
  • Какой тип у JSX элемента который прокрывается через props?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    А так?
    - <LinkToPage name="Бонусы" link="/bonuse" Icon={<BonusPage />} />
    + <LinkToPage name="Бонусы" link="/bonuse" Icon={ BonusPage } />
    Ответ написан
    Комментировать
  • Почему v-on:click не работает, а v-on:mouseout работает?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Потому что мат часть нужно сначала учить, прежде чем во фреймворки суваться...

    У Вас на container висит обработчик клика.
    События, большинство, всплывают.
    Сначала при клике срабатывает one
    а потом changeTwo, висящий на container, где меняется всё обратно.

    Соответственно, когда у Вас было при наведении, то и не было "конфликта" с обработчиком клика на container, так как это разные события.

    Что делать - не делать такую жуткую кашу с вложенными "интерактивными элементами".
    А если никак - то гуглить модифкатор .stop во vue или event.stopPropagation.

    https://learn.javascript.ru/events
    Ответ написан
    Комментировать
  • Как исправить ошибку Uncaught TypeError: Cannot set properties of null (setting 'textContent')?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    const $days = document.querySelector('.timer__days');
    const $hours = document.querySelector('.timer__hours');
    const $minutes = document.querySelector('.timer__minutes');
    const $seconds = document.querySelector('.timer__seconds');

    Одна из этих переменных на момент исполнения кода - null. То есть такого элемента нет в разметке.

    Не знаю как решить.

    Ну для начала стоит научиться читать тексты ошибок и понимать о чём они Вам говорят.
    Эта Вам говорит что не может установить свойство textContent у null. Это уже говорит о многом куда копать.

    А так же нужно научиться отладке своего кода https://learn.javascript.ru/debugging-chrome
    Ответ написан
    Комментировать
  • Как добавить сюда анимацию?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ну как-то так. Набросал на коленке.

    .pic {
      display: inline-block;
    
    }
    
    .pic img {
      opacity: 1;
      transition: opacity 1s linear;  
    }
    
    .pic img.invisible {
      opacity: 0;
    }
    
    button {
      padding: 1em;
    }
    
    button.active {
      background: tomato;
    }


    document.body.addEventListener('click', e => {
      if (!e.target.matches('button')) return
      
      const img = document.querySelector('.pic img')
      
      img.classList.add('invisible')
      
      img.ontransitionend = () => {
        img.onload = () => img.classList.remove('invisible')
        img.src = e.target.dataset.src
        
        document.querySelectorAll('button').forEach(btn => btn.classList.remove('active'))
        e.target.classList.add('active')
      } 
    })


    P.s. недостатком данного кода является то, что загрузка следующей картинки начинается только после того, как первая исчезла. Это можно оптимизировать, но не всёж за Вас решать :-)
    А ещё не обязательно каждый раз искать элементы в DOM, если они не динамически генерируются.
    Ответ написан
    4 комментария
  • Как вернуть отображение папок проекта при открытии VSCode?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Варианты такие
    1) По умолчанию хоткей на скрытие сайдбара вроде бы ctrl+b
    2) можно открыть settings.json - в него прописываются все нгастройки и убрать не нужную строчку с этим связанную. Открыть settings.json можно, например, нажав F1 и введя user settings. Если это случилось недавно, то искать нужно в низу списка настроек. Что-то связанное с explorer\sidebar и тд
    Ответ написан
    Комментировать
  • Какие есть варианты решения проблем со слайдером?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    да и немного непонятно почему две навигационных панелей

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

    Смотрим в разметку, видим:
    <div class="navigation-auto">
                <div class="auto-btn1"></div>
                <div class="auto-btn2"></div>
                <div class="auto-btn3"></div>
                <div class="auto-btn4"></div>
            </div>

    <div class="navigation-manual">
                <label for="radio1" class="manual-btn"></label>
                <label for="radio2" class="manual-btn"></label>
                <label for="radio3" class="manual-btn"></label>
                <label for="radio4" class="manual-btn"></label>
              </div>


    у меня именно не идет свайп
    Выражайтесь конкретнее, потому что нигде обработчика свайпа у Вас нет. Полагаю, Вы имели в виду переключение картинок.

    Ну и снова нужно лишь внимательно прочитать код.
    Смотрим в консоль - ошибок нет. JS работает.
    Каков механизм переключения слайдов у Вас? Через html и css на радиокнопках. Отлично. Смотрим что может пойти не так.
    Читаем CSS:
    #radio1:checked ~ .first {
      margin-left: 0;
    }
    #radio2:checked ~ .first {
      margin-left: -20%;
    }
    #radio3:checked ~ .first {
      margin-left: -40%;
    }
    #radio4:checked ~ .first {
      margin-left: -60%;
    }

    Читаем HTML:
    <div class="slides">
            <!--radio buttons start-->
            <input type="radio" name="radio-btn" id="radio1">
            <input type="radio" name="radio-btn" id="radio2">
            <input type="radio" name="radio-btn" id="radio3">
            <input type="radio" name="radio-btn" id="radio4">
            <!--radio buttons end-->
    
            <!--slide images start-->
            <div class="slide-first">
              <img src="https://placehold.co/800x500" alt="" >
            </div>
    
            <div class="slide">
              <img src="https://placehold.co/801x501" alt="" >
            </div>
    
            <div class="slide">
              <img src="https://placehold.co/802x502" alt="" >
            </div>

    Вы видите тут блок, у которого был бы класс .first, который ожидается в css?
    Нет, его нет. Есть slide-first.
    Классы разделяются пробелом, а не тире. Соответственно нужно либо в css либо в html внести правки чтобы было одинаково и заработает.
    Ответ написан
    Комментировать
  • Почему не обрабатывается первое нажатие на чекбокс?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Так а зачем Вы дважды назначаете обработчик события?

    Вы какой код написали, так он и работает. При первом change вы добавляете обработчик change, который уже в свою очередь работает с консолью.

    $(document).ready(function() {
        
      let checkbox = "";
    
      function checkbox_add() {
            var isChecked1 = $("#foundation").prop("checked");
            var isChecked2 = $("#drop").prop("checked");
            
            if (isChecked1 && isChecked2) {
              checkbox = "Выбрано два чекбокса";
            } else if (isChecked1) {
              checkbox = "Выбран 1 чекбокс";
            } else if (isChecked2) {
              checkbox = "Выбран 2 чекбокс";
            } else {
              checkbox = "Ничего не выбрано";
            }
    
            console.log(checkbox);
      }
    
      $("#foundation, #drop").on('change', checkbox_add);
    });
    Ответ написан
    2 комментария
  • Порядок селектора в css?

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

    почему веб страница выводит в подпункт 1.1. откуда вторая 1?
    Её добавляет вот этот код:
    ol ol li:before {
     counter-increment: list2; 
     content: counter(list1) "." counter(list2) ". "; 
    }


    ol ol к какому дочернему элементу идет обращение?
    Ко всем ol которые вложены на любом уровне в другой ol. Поэтому если Вы во вложенный ol добавите ещё один ol, то нумерация у них будет одинаковая.
    Ответ написан
    2 комментария
  • Есть несколько визуально одинаковых блоков. Как сделать, чтобы у них все параметры в сss были одни, а фоновые изображения разные?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    как правильно присвоить доп класс, чтобы это работало

    Во-первых, не существует "правильно". Если работает и никого это не смущает - значит решение приемлемое.
    Во-вторых, зависит от того, придерживаетесь ли Вы какой-то методологии или нет. Поэтому ответ будет в наиболее распространённом варианте - будто бы придерживаетесь БЭМ.

    .block-name { // название класса блока - block-name
      // основные стили
    }
    
    .block_type_codestyle{ // добавляем модификатор type со значением codestyle (потому что блок про кодстайл, хотя это не лучший подход для выбора названия класса, но для примера пойдёт)
      // стили, специфичные для этого блока. Например, конкретное фоновое изображение.
    }


    Однако, такой подход подойдёт для статических сайтов, но не подойдёт для сайтов, у которых контент может меняться через систему управления контентом - CMS.
    В таком случае, ссылка на изображение должна устанавливаться не в стилях напрямую, а где-то в HTML. Как правило - inline стилях.
    То есть:
    <div class="block-name" style="background-image: url('...')" >...</div>
    .

    Однако, так же стоит учесть нюанс, что изображение могут быть контентно значимыми (но вроде бы не Ваш случай). То есть изображение, которое насёт полезную нагрузку для информирования пользователя.
    В таком случае, это должны быть не фоновые картинки, а img.
    Ответ написан
    3 комментария
  • Есть ли событие при подключении компонента, в котором асинхронные данные гарантированно будут присутствовать?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Скорее всего success у Вас по умолчанию не false.
    Потому что звучит сомнительно.
    mounted хук срабатывает когда компонент уже смонтирован в DOM, а если там v-if то монтировать в DOM нечего. То есть этого не должно происходить.
    Ответ написан
    Комментировать
  • Почему не работает перевод?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Ну так открываем консоль, читаем ошибку. Думаем.

    google-translate.js:114 Uncaught ReferenceError: TranslateSetCookie is not defined
        at HTMLAnchorElement.<anonymous> (google-translate.js:114:9)
        at HTMLAnchorElement.dispatch (jquery.min.js:2:41772)
        at y.handle (jquery.min.js:2:39791)


    Открываем соответствующий код:
    $('[data-google-lang]').click(function () {
            TranslateSetCookie($(this).attr("data-google-lang"))
            // Перезагружаем страницу
            window.location.reload();
        });


    TranslateSetCookie - не определено. То есть скрипт где определяется этот глобальный метод либо не подключен, либо подключен, но загружается позже чем выполняется этот код.
    Ответ написан
    Комментировать
  • Как убрать точки перед словами?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    list-style-type: none

    а загуглить это быстрее чем задать тут вопрос..
    Ответ написан
    1 комментарий
  • Почему не подключается файл JS к файлу html?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    У Вас нет приращения i в цикле. Всегда ноль снова устанавливается.

    Итого имеем:
    1) цикл у которого начало с нуля.
    2) 0%2 === 0 - true,
    3) потом отрицание, то есть false.
    4) Условие не выполняется.
    5) Цикл уходит на следующую итерацию, где i снова = 0.
    6) Всё уходит работать по кругу. Вкладка браузера умирает.

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

    А когда сделаете прирощение, то, наверное, удивитесь результату, потому что делаете возврат из всей функции, а не из текущей итерации цикла и, как следствие, не будет никакой суммы до числа 10. Будет всегда возвращать 0.
    Ответ написан
  • Почему не работает функция вызванная в addEventListener?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    code должно быть с большой буквы.
    - if (e.keycode === 13) {
    + if (e.keyCode === 13) {


    Тая Зотова учу javascript
    Одно из важнейших, чему стоит научиться в первую очередь - отладка своего кода.
    https://learn.javascript.ru/debugging-chrome
    Ответ написан
    5 комментариев
  • Как скрыть часть текста?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ответ написан
    Комментировать
  • Как изменять размер элемента при наведении на его край курсора мыши?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    окей яндекс: custom resizable element
    https://habr.com/ru/articles/321612/
    Ответ написан
    5 комментариев