Highlander

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

Добрый день уважаемые коллеги, столкнулся со странным поведением элемента в Firefox, точнее странном отсутствии поведения. http://test.shn-host.ru/ в разделе Каталог товаров есть фильтр, с цветом, размером, стилем. Во всех браузерах выпадающие списки в фильтрах работают как нужно, только в FF на нажатие вообще нет реакции. Обычно проблемы в IE, но тут нет, в IE все отрабатывает нормально. Просмотрел все что в голову приходило, посмотрите кому не сложно, возможно что-то упускаю. Спасибо.

вам же уже дали код готовый в code pene, разберите его и скопируйте с редактированием под себя

Задам сразу три вопроса дабы не плодить темы: 1. Подскажите кто знает существует ли решение для реализации тач зума для изображений на мобильных устройствах? Смысл какой, в десктоп версии к изображениям прикручен обычный js loupe. При наведении на картинку на мышке появляется квадратик со scale 2x. Теперь нужен похожий эффект на мобильной версии, в голову приходит только появление такого квадратика по нажатию. Клиент водит пальцем по изображению и рассматривает как в увеличительное стекло изображение. Ну или же придется делать просто лайтбокс с возможностью зума двумя пальцами. Поиск ничего не дал. 2. Реализовал на fancybox всплывающие окна с крестиком для их закрытия. Собственно столкнулся с тем, что на мобильной версии многие пользователи пытаются закрыть всплывающее окно кнопкой назад, но их вообще выкидывает с сайта на предыдущую страницу. Существует ли вариант взаимодействия с кнопкой Назад или только избавляться от всплывающих? 3. На сайте есть всплывающие окна с формами для введения телефонов и адресов почты. Реализовано через input type tel и input type email. На мобильной версии сайта при открытии всплывающих с инпутами сразу фокус ставится на эти поля и открывается клавиатура. Есть ли возможность запретить фокус как-то? Чтобы если посетитель посчитает нужным подписку, кликнет на поле и тогда только появится клавиатура. Спасибо за помощь.

Проверяйте отступы и их значение. Если изначально верстаете с live reload в хроме или лисе, то они сами много чего добавляют в код и поэтому в браузерах выглядит все хорошо. Попробуйте использовать reset.css если не используете (не normalize, а именно reset). Попробуйте задать свойства для позиционирования даже если их нет. Т.е. задайте margin: 0, padding:0 (или любое другое нужное значение) если блок как-то воздействует на соседей своим положением. Мне это не раз помогало именно для айфонов.

Мода понятие относительное, сегодня плоский, завтра еще какой-то. А тем кто занимается версткой из PSD все равно какие тренды, какой макет дали такой и делают. Лично мне решение ниже кажется вполне комфортным для использования, аналогов прямых не нашел на первых страницах поиска, может плохо искал. P.S. Если ненужный баян, то прошу модеров удалить тему как решенный вопрос.

всё оказалось просто, через три состояния и transform: translateY(); доделаю и выложу тут линк на codepen

Воссоздать в том же кодепене. В итоге обнаружил, что кнопка это картинка, при нажатии происходит анимация подмены этой картинки, всего три картинки, нажатая, отжатая и на 50% между. Такая реализация непригодна для использования, поэтому сижу пытаюсь добиться плавности и изменения состояния для button с линком внутри. Но пока только обычные варианты получаются. А фишка именно в плавности из примера, "уж очень она замечательная" (с).

Не знаю, у меня нормально загружается.

Подскажите кто сталкивался с анимированием эффекта нажатия через animation? Через transition понятно как, но вот тут http://landing-animation.powercode.pro/ верхние правые кнопки уж очень приятно выглядят, пробовал повторить через инспектор, но безуспешно. Или где-то ошибаюсь или есть какая-то особенность. Спасибо.

http://thenextweb.com/microsoft/2016/01/05/web-developers-rejoice-internet-explorer-8-9-and-10-die-on-tuesday/ вообще великолепно

Благодарю, значит приоритет флексбокса вполне оправдан если не бежать за 1% юзеров на ИЕ9 или ниже. Инфобизнесмены это печаль, особенно, которые юзают дримвивер и таблицы для верстки

Доброго времени суток всем. В процессе обучения и начальной практики верстки созрел вопрос. Вот сверстал я страницу макета на обычных блоках, с флоатами, инлайнами и прочим, работает, адаптивно, вроде нормально. Потом по мере обучения дошел до flex технологий, начал осваивать, переверстал эту же страницах на флексе. И вот по ощущениям как-то проще получилось, меньше кода, более предсказуемо ведут себя блоки, частично встроенная даже без медиа адаптивность и т.д. Поддержка ИЕ с 10 версии, что в принципе терпимо с учетом тенденций к тотальному переходу минимум на вин7 даже лоу лвл сегмента ПК всех видов. Почему очень многие до сих пор верстают блоками обычными? Во всех видео-уроках, на большинстве сайтов-самоучителях, форумах, я вижу в 95% случаев обычную верстку с флоатами. Может есть какие-то подводные камни этой технологии, которые не позволяют ей заменить флоаты? Пока я увидел только плюшки одни, ну и минус с поддержкой старых ИЕ. Просветите и направьте на путь истинных верстальщиков

Если топик-стартер не против, то спрошу в его теме (дабы не плодить новых). Есть хтмл с height:100% и max-width:1000px; , в нем есть два дива во флекс контейнере, у этих контейнеров есть бекграунд картинки размерами 700*200px. Необходимо, чтобы на экране >1000px эти два блока занимали по 50% ширины флекс обертки (500px) и высоте равной пропорционально уменьшенной высоте фоновой картинки. А если размер экрана тянут вниз, то соответственно масштабировались дивы в сторону уменьшения. В центре этих блоков тексты из двух слов у каждого, они же ссылки. В первую очередь интересна возможность на чистом CSS, потом уже скриптовая (если единственно возможный вариант). Как только уже не изощрялся, в ширину нормально растягивает фон, и пропорционально уменьшается как нужно. Но упорно дивы не хотят растягиваться фоновыми изображениями, ни через contain ни через cover. Если выставляю фиксированную высоту, тогда да, но в этом случае блоки не масштабируются. Если min max, то уменьшается картинка до размера текста. Как заставить див растянуть свою высоту по размеру высоты фонового изображения без статических единиц? PS Пока единственный вариант это задавать тексту в блоке падинги в %, предварительно подобрав примерные значения для получения нужной высоты.