npofopr

А как обращаться только внутрь одно из блоков? Т.е. чтобы кнопка срабатывала только внутри одного блока. Ну и карта соответственно. https://codepen.io/npofopr/pen/RwwaodB

Для 2013 года, норм) Сайт одной картинкой, всё по правилам веба)

viewbox может задан в метатегах? или у родителя ещё есть ограничение. Пользуйтесь DevTools, это облегчит вашу жизнь.

Я лет 5 назад им пользовался. Оно ещё живое?) Аккуратнее с этим) * * jQuery carouFredSel 6.1.0 * Demo's and documentation: * caroufredsel.frebsite.nl * * Copyright (c) 2012 Fred Heusschen * www.frebsite.nl * * Dual licensed under the MIT and GPL licenses. * http://en.wikipedia.org/wiki/MIT_License * http://en.wikipedia.org/wiki/GNU_General_Public_License */

Дак это не навигация в два ряда. Это обычные превью ссылки. thumb. По типу этого https://jsfiddle.net/keithpetrillo/6j7fzwek/ Обсуждения — https://stackoverflow.com/questions/39567327/how-to-create-thumbnail-carousel-with-image-previews-in-slick-js https://swiperjs.com/demos/ (https://swiperjs.com/demos/310-thumbs-gallery-loop.html) в этом плане мне больше нравится. Там синхронизация проще делается. Но и плагин тяжелее.

https://webref.ru/css/font-size

Да! Спасибо! А почему так не срабатывает? cardWrap.onclick = function(event) { let target = event.target; while (target != this) { if (target.classList.contains("flip-card")) { if (target.classList.contains("is-flipped")) target.classList.remove("is-flipped"); target.querySelector(".friends-video").classList.remove("is-back"); target.querySelector(".friends-video__back > video").load(); target.querySelector(".friends-video__front > video").load(); else highlight(target); return; } target = target.parentNode; } }; Удалять класс он удаляет, а дальше target.querySelector(".friends-video").classList.remove("is-back"); target.querySelector(".friends-video__back > video").load(); target.querySelector(".friends-video__front > video").load(); уже нельзя получается? А нет. Добавил скобочки { } и теперь вроде всё как надо, надеюсь. if (target.classList.contains("is-flipped")) { target.classList.remove("is-flipped"); target.querySelector(".friends-video").classList.remove("is-back"); target.querySelector(".friends-video__back > video").load(); target.querySelector(".friends-video__front > video").load(); } else { highlight(target); } return; https://codepen.io/npofopr/pen/zYOmbPv

Да. Совершенно верно. Знать бы ещё как) По идее ваш вариант должен срабатывать, var list = document.querySelectorAll('.is-flipped') list.forEach(function(item) { item.classList.remove('is-flipped'); }); но он не обрабатывает этот клик. Или по идее, я могу накостылять клик на блок с видео, и у родителя удалять класс is-flipped. Правда тоже не факт, что сработает.

Обновил https://codepen.io/npofopr/pen/zYOmbPv 🙂 Вроде даже и с видео разобрался. Воткнул правда две кнопки, одной кнопкой как сменять видео, пока не допёр. Осталось понять, как активную карточку закрывать по правильному, при клике на неё) Пробовал вместо while (target != this) сделать через for, но кроме ошибки это ничего не дало.

Примерно так, да. Там при нажатии добавляется класс .is-flipped , и внутри получается есть ещё кнопка, которая меняет видео. Ну и да, при нажатии на соседнюю плитку, класс надо у соседней удалять. И видео стопорить. Попробую) Попробую на Jq переписать, что есть. Как то мне попроще пока будет.

По изоляции да, подойдёт. Изоляцию я уже починил в примере. Теперь читаю/ разбираюсь как соседние элементы закрывать. Но от помощи не отказываюсь 😄

как изолировать клик по 'button' и клик по 'cardBack'. Там получается, что клик по кнопке срабатывает также как клик по всей области. Читаю про 'e.preventDefault();' но пока не вник, куда его вставить. И как можно закрывать соседние плашки, когда на другую кликаю? https://codepen.io/npofopr/pen/zYOmbPv Видео не стопорится я понимаю почему, потому что первый элемент video и так не проигрывается. По всем тегам, я так понимаю, надо через `querySelectorAll` проходить? Изолировал e.stopPropagation();

Надо или живой пример или кофейную гущу разводить.

Жуть жуткая. Раз уж хотите исправить проблему, начните с ликвидации span (зачем он там?) Он может перебивать вашу жирность. А strong оберните текст в ссылке, а не ссылку.

в DevTools смотреть, начать.