d0ublezer0

Привет! Есть галерея в конце страницы, построенная на masonry https://www.farmadental.ru/doctors/balayan Подозреваю, что на флексе сделать такое вполне реально, более того, нашел пример, демонстрирующий прекрасный результат Но для флекса по колонкам нужна ограниченная высота контейнера, которая в моем случае всегда разная, т.к. количество и размер элементов всегда разные. Реально ли как-то добиться этого без использования JS ?

Так не сработало (проверял первый опубликованный вариант, второй исправленный не тестировал) Сделал так: $sscore = $comment->rating/2; $int_score = floor($sscore); for ($i = 1; $i <= 5; $i++) { if ($i <= $sscore) $star_class = "fa-star fa-star--on"; if ($i > $sscore) $star_class = "fa-star-o fa-star--off"; if ($i == $int_score && $sscore > $i) $star_class = "fa-star fa-star-half-o"; echo "<i class='fa fa-fw $star_class'></i>"; }

Нашел весь функционал https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js Но там сильно перегружено

Помогите с куском кода, плз. Голова сломалась. Понимаю, что просто, но не вижу как ) Задача выводить 5 звезд, рейтинга. Каждая может быть включена полностью, включена наполовину или выключена $sscore = 3.5; for ($i = 0.5; $i <= 5; $i += 0.5) { if ($i < $sscore) $star_class = "star-on"; if ($i == $sscore && is_int($sscore)) $star_class = "star-on"; if ($i == $sscore && is_float($sscore)) $star_class = "star-half"; if ($i > $sscore) $star_class = "star-off"; if ($i == intval($i) || $i == $sscore && is_float($sscore)) { echo "<i class='$star_class'></i>"; } } если оставить intval то выводится 5 звезд, но полу-звезда не показывается, а с моим условием - отображается одна звезда лишняя

В плагине https://www.farmadental.ru/templates/fd/js/jquery.sticky.js есть код, который должен отцеплять плавающий блок при достижении нижней границы контейнера, но он почему то не срабатывает: var stickyWrapperContainer = s.stickyWrapper.parent(); var unstick = (s.stickyElement.offset().top + s.stickyElement.outerHeight() >= stickyWrapperContainer.offset().top + stickyWrapperContainer.outerHeight()) && (s.stickyElement.offset().top <= s.topSpacing); if( unstick ) { s.stickyElement .css('position', 'absolute') .css('top', '') .css('bottom', 0) .css('z-index', ''); } else { s.stickyElement .css('position', 'fixed') .css('top', newTop) .css('bottom', '') .css('z-index', s.zIndex); }

Привет. С помощью плагина https://github.com/garand/sticky сделал плавающий блок с меню. Посмотреть можно тут: https://www.farmadental.ru/service/teeth-implants Недостаток в том, что меню наезжает на другие элементы, когда заканчивается основной текст на странице. Не соображу, как бы его скрыть при достижении нижней границы .article-body который, кстати, является для него родителем Посоветуйте, плз?

Ваш метод подошёл отлично, спасибо. Не понимаю, почему у меня не работало.

Увы, нет возможности разделить содержимое табов на два блока. Список подходящих способов доставки формируется отдельным компонентом, основываясь на адресе получателя. У меня придумалось только скрывать неподходящее по типу при переключении "табов". По факту, табами это не является. Просто переключалка, скрывающая часть опций одного списка. И после переключения нужно выбрать первый видимый элемент. Я пробовал насылать событие клика на инпуты, пробовал ставить им значение через val() и потом вызывать событие change но ничего так и не вышло, значения не меняются

Не совсем то. Я покажу на реальном примере : https://www.zebra-tara.ru/ положите любой товар в корзину У нас есть варианты доставки, которые формируются динамически после загрузки страницы и выводятся все скопом. У меня задача разделить их на два списка, отображаемые по состоянию табов. При этом - выбирать некое значение в списке при переключении табов. P/S/ а с инпутами вместо списка вы правильно предложили, переделаю.

привет. есть набор радио кнопок, по изменению которых срабатывает некая функция $('body').on("change", "[name='virtuemart_shipmentmethod_id']", function (e) { update_infoboxes(); }); возникла задача менять выбранную радио кнопку по внешнему событию? допустим клик на переключалке табов нужно установить правильное значение и чтобы сработало событие change как правильно сделать? пробовал так: $('body').on("click", "#shipment_type_selector li", function (e) { e.preventDefault(); var $set_mode = $(this).data("ship-mode"); $('#shipment_type_selector li').removeClass("active"); $(this).addClass("active"); $("#onepage_main_div").removeClass("_self-pickup _tk-delivery").addClass("_" + $set_mode); if ($set_mode=="tk-delivery") $("#shipment_id_2").prop("checked",true); // выберем транспортную компанию if ($set_mode=="self-pickup") $("#shipment_id_1").prop("checked",true); // выберем самовывоз }); но не вышло: визуально выбор radio кнопки не меняется. событие change не срабатывает вот собрал на коленке для проверок. https://jsfiddle.net/5pa9fj1o/1/ изначально выбран первый пункт после переключения на транспортную выбирается второй, как и должно быть а дальше ничего не происходит, хоть обпереключайся

http://leveler.ru/i-icons/demo.html Cлепил из svg набор иконок в icomoon, приклеил анимацию вращения. Не вращается В найденном примере вроде всё так же. Но при этом - работает: https://codepen.io/Keyamoon/pen/aHxuq Что я сделал не так? UPD: не хватало display:inline-block;

https://tech.yandex.ru/yandex-apps-launch/navigator/doc/concepts/about-docpage/ Тут сообщается о проверке в собственном приложении. А на web-странице как сделать? Это возможно вообще?

О, я не до конца понял статью, значит. Отлично, тогда defer подходит, т.к. зависимость известна.

В этом весь замысел теряется. Скрипты, расположенные внизу страницы и без указания defer прекрасно грузятся последовательно. но загружаться-то они начинают после основного кода. А идея была в том, чтобы грузить их параллельно, не мешая коду. А вот обратиться к ним - только после загрузки всего. Можно конечно в main.js проверять наличие загруженных функций, но это не значит, что они будут привязаны к объектам на странице, когда наконец-то загрузятся.

Верно. Я пытался применить знания из этой статьи, предполагая, что скрипты с async будут грузиться как попало, а defer загрузится уже после всего-всего.

В начале страницы: <script async type="text/javascript" src="/templates/fd/js/custom.js"></script> <script async type="text/javascript" src="/templates/fd/js/owl.carousel.min.js"></script> <script async type="text/javascript" src="/templates/fd/js/jquery.event.move.js"></script> <script async type="text/javascript" src="/templates/fd/js/jquery.twentytwenty.js"></script> <script async type="text/javascript" src="/templates/fd/js/jquery.inputmask.bundle.min.js"></script> <script async type="text/javascript" src="/templates/fd/js/jquery.toc.js"></script> <script async type="text/javascript" src="/templates/fd/js/jquery.sticky.js"></script> <script async type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> /* тут html и php */ В конце страницы: <script defer type="text/javascript" src="/templates/fd/js/main.js"></script> предполагалось, что последний скрипт с defer загрузится и выполнится только когда загрузилось всё, но у меня валятся ошибки инициализации Uncaught TypeError: $(...).inputmask is not a function значит, не успели загрузиться скрипты. при том в последнем файле main.js все обращения к функциям обёрнуты в $(document).ready(function () { /* тут код */}); как гарантированно загрузить всё, при этом не мешая загружаться странице?

Не, не помогло. Шрифт по-прежнему не подгружается

li { position: relative; padding: 0 0 0 20px; width:60px; list-style:none; /* вот тут еще бы пригодилось*/ }

www.zebra-tara.ru использован шрифт Roboto, подключенный через Google Fonts. проблема - в Chrome на PC нормально подгружается и отображается шрифт, а на Mac - нет, ощущение, что вообще шрифт не загружен. Шире - это на Mac, видно, что шрифт другой: Притом в Safari - нормально: Предположил, что локально установлен Roboto без кириллицы, проверил - нет. Куда копать?

и новый глюк словил: https://www.road.media/headunit/mitsubishi/805246 при пролистывании вниз, когда доходим до конца страницы, остается большое белое поле вместо контента

Да, попробую на них перейти. Иначе сейчас получилось криво - флекс-блоки выполненные по предыдущему совету не растягиваются по размеру содержимого. Это можно сейчас увидеть на странице. Высоту карточек зафиксировать нельзя - разная длина названий и описаний. + Есть еще задача на будущее, пока не знаю, как к ней подступиться.: при наведении карточка должна разъезжаться: Это грид позволит сделать? Полагаю, надо "ячейкам" давать relative, а внутренней карточке - absolute, но тут снова возникнет проблема, что содержимое не растянет ячейку.

но флексы шире поддерживаются

Это-то я уловил, но как именно это работает? Взяли родителя с относительным позиционированием, задали ему padding для получения свободного пространства. Абсолютный flex-элемент растянули по всей площади родителя Магия? Где почитать про этот рецепт? Я предварительно в своих изысканиях пробовал без родительского элемента и задавал высоту колонкам - всё кривое выходит. Высота еще куда ни шло, а вот ширина считалась криво.

Спасибо! Есть вопрос - почему использовано абсолютное позиционирование? Без него всё разваливается

zebra-tara.ru на главной странице есть блок с популярными товарами чтобы его организовать, мне пришлось делить список на две части. отдельно в своём контейнере выводится большой первый элемент и далее - остальные, тоже в flex контейнере можно добиться такого визуального представления как-то иначе (без разделения UL списка), когда первый элемент имеет большой размер? мне это потребуется, чтобы на малых разрешениях навесить на этот список owl carousel, а получается, что первый элемент оторван.. Полагаю, это можно как-то решить с колонками, а не строками, но мне этот фокус не удался