Ответы пользователя по тегу JavaScript
  • Стилизация json на странице html. Как сделать?

    @sewaca
    const data = [ /* Array with JSON data */ ];
    document.body.innerHTML = data.map((item)=>`
      <i class="fa fa-user-circle" aria-hidden="true"></i> ${item.name} 
      <i class="fa fa-envelope" aria-hidden="true"></i> ${item.email}
      `)
      .join(" ");

    В data пишите свой массив
    Если надо менять не весь контент на странице, а только в каком-то месте, то вместо document.body пишите селектор на этот элемент
    Ответ написан
    3 комментария
  • Как наложить несколько прозрачных png-изображений, чтобы они показывались по отдельности при наведении курсора?

    @sewaca
    В идеале бы посмотреть демку, а то не оч понятно почему надписи должны быть картинкой
    В общем случае я бы просто юзал position: absolute на надписях и менял opacity при наведении. Не понимаю с чем возникла проблема
    Ответ написан
    Комментировать
  • Как создать анимированную интерактивную схему?

    @sewaca
    Как сейчас реализована анимация:
    У вас есть 50 срендереных картинок анимации вроде этой и каждые n милисекунд меняется номер картинки
    13.webp
    В таком виде реализации вы ограничены по плавности анимации именно количеством таких кадров и в целом больше ничем

    Как можно сделать лучше:
    Вариант 1.
    Анимация станет плавнее, если просто будете вопроизводить ее в 60 fps.
    То есть просто поменяете код для смены аттрибута src на что-то такое:
    let i = 0;
    let a = setInterval(()=>{
        document.querySelector("body > div.page > div.places > div > div > div > div.places-map-wrap > div > div > img").src= "/assets/images/home_sequence/" + i + ".webp";
        i = (i + 1) % 49;
    }, 1000/60) // 1000 / 60 означает что вы хотите вопроизводить 60 кадров в секунду

    Минусы: из-зи увеличения fps таким способом увеличится и скорости анимации

    Вариант 2.
    Cделать не 50 типовых картинок, а 100 и менять их способом из варианта 1 c фпс в два раза выше чем сейчас
    Тогда удастся сохранить и скорость анимации и сделать плавнее
    Минусы: много работы (придется переделывать раскадровку всей анимации) + упадет скорость сайта из-за того что придется загружать в два раза больше картинок

    Вариант 3.
    ВОЗМОЖНО самый удачный, но ТОЧНО самый сложный и требующий много сил. Используйте вместо картинок вида
    13.webp
    canvas и библиотеку three.js (тут уже как-то самому придется разбираться, советов дать не могу, потому что сам недостаточно работал с этой библиотекой
    Минусы: вполне вероятно, что из-за того что на сайт добавится +1 библиотека, а также 3д модельки скорость сайта будет не сильно отличаться от второго варианта.
    Плюс по сравнению с вариантом № 2: Вы получите полную свободу в управлении этой анимацией. Сможете когда надо замедлить, когда надо ускорить без лишней работы
    В целом скорость сайта не должна стать большой проблемой, потому что это не первый экран и даже не самое важное в карте. Соответственно можно что-то подгрузить попозже, что-то пораньше, что-то вообще не подгружать если слабый инет
    Иными словами, загружать эту анимацию только после того как загрузили все остальное

    В общем я постарался понятно расписать минусы и плюсы. Плюс многое зависит от того, как сделана эта штука у ваших дизайнеров
    Если что-то непонятно объяснил - спрашивайте
    Ответ написан
  • Как переписать класс DOM элемента?

    @sewaca
    JS выполняется на стороне клиента. Он не меняет файлы на сервере (потому что насколько я понял из вашего вопроса, вам нужно именно это)
    Если хотите менять классы в самом html файле то в vs code выделите слово element, нажпмите shift+ctrl+l вроде и напишите новый класс
    Ну либо используйте сборщики + шаблонизаторы, чтобы сильно не страдать когда надо что-то поменять в коде
    Ответ написан
    Комментировать
  • Как добавить недостающие открывающиеся html теги?

    @sewaca
    Это стандартная задача на правильную скобочную последовательность, просто немного в другом виде
    Примеров и решений в интернете уйма, изучайте
    Но вообще, лучше бы разобраться и нормально копировать эти строки, без недостающих открывающихся тегов))
    (ссылка на объяснение задачи на максимале https://e-maxx.ru/algo/bracket_sequences)
    Ответ написан
    Комментировать
  • Как получить первоначальное значение dataset по клику?

    @sewaca
    // ... предыдущий код
    btnSwap.addEventListener('click', function() {
        btnSwap.dataset.storage = (btnSwap.dataset.storage === 'local' ? 'api' : 'local');
        console.log(btnSwap.dataset.storage);
        console.log(btnSwap.dataset);
      })
    // ... следующий код
    Ответ написан
    1 комментарий
  • Почему локально видео не показывается?

    @sewaca
    В чем проблема
    На самом деле проблема (скорее особенность) внутри плагина, который вы используете для загрузки видео с ютуба.
    При загрузке видео ваша ссылка меняется на ссылку вида: //www.youtube.com/...
    Первые две черточки перед www (//) говорят о том, что нужно сохранить протокол общения таким, каким он был у вашей страницы.
    То есть если вы открыли страницу по http, то и запрос получится http://www.youtube.com/..., а если открыли локально (file://) то и запрос получается file://www.youtube.com/...

    Решения:
    Плохое: лезть в код плагина и менять // на https://
    Хорошее:
    использовать live server или его аналоги для запуска проекта. Тогда страница откроется на адресе, к примеру, http://localhost:3000/ и проблем не будет

    Надеюсь смог помочь
    Ответ написан
    Комментировать
  • Как изменить код?

    @sewaca
    Ответ написан
    Комментировать
  • Как выполнить поиск по странице сайта?

    @sewaca
    Для начала давайте поймем а что именно вам нужно
    Если задача кликнуть, значит элемент, очевидно, должен быть кликабельным
    Значит это либо button, либо input[type="button"], либо тег a

    Код который вы привели в пример (назвав его 1 вариантом) выбирает все теги на странице, а затем проверяет каждый из них. Это значит, что кнопка, прописанная в html как <button> <span>текст</span> </button> будет кликнута (а точнее, будет вызван обработчик клика по ней) как минимум 2 раза (первый, когда кликаем на тег span, второй когда жмем на тег button)
    Отсюда и возникает баг с многоразовым нажатием

    Если задача и правда сводится к тому, что нужно проверить все элементы, и, если они содержат какой-то текст, кликнуть на них, то логичнее использовать код, который и выбирает только кликабельные элементы. Примерно так:
    const items = document.querySelectorAll("input[type=button], button, a");
    
    items.forEach((item)=>{
          if (item.textContent.includes("Your Text Here")){
                console.log("success"); 
                items[i].click();
          }
    });

    Это не только поможет избежать багов, но и существенно ускорит ваш код

    P.S.: Любые операции с DOM-деревом заметно замедляют ваш код. Старайтесь как можно реже использовать подход с проверкой содержимого всех DOM-элементов (как в этом кейсе).
    Ответ написан
    Комментировать
  • Не находит элемент в блоке?

    @sewaca
    Скорее всего проблема с тем, что DOM-дерево еще не обновилось на тот момент
    Операции с дом очень тяжелые, поэтому выполняются в последнюю очередь
    Можете попробовать запихнуть цикл в
    setTimeout(()=>{
    for ... 
    }, 0)

    Это сделает из вашего цикло (микрозадачи) макрозадачу
    Ответ написан
    Комментировать
  • Как сделать так, чтобы ссылка внутри активного li меняла цвет?

    @sewaca
    Чтобы не прописывать !important - увеличьте вложенность стилей для активного a
    В вашем случае, надо прописывать правила для
    .facilities-block .sidebar li.clicked a
    Ответ написан
  • Contact form 7 + Wordpress - как стилизовать checkbox для политики конфиденциальности?

    @sewaca
    Если речь про желтый квадратик спереди, то можно просто добавить в css
    .popup-policy__label .wpcf7-list-item::before{content: unset;}
    Ответ написан