d0ublezer0

Привет. Помогите советом: есть ли какой-то трюк с расположением элементов внутри скролл-контейнера, чтобы при наведении и увеличении они не обрезались родителем?

https://codesandbox.io/s/scroll-and-scale-yv3kq0?file=/src/App.js

Можно и не внутри контейнера, но главное, чтобы лишнее скроллилось, а при наведении не обрезалось.

Фиксированная высота родителя делает свое дело. Вопрос снят.

Привет!

Не соображу, как сделано так, что при наведении на карточку в каталоге появляется блок добавления в корзину, но высота родительского блока не меняется. Вернее, сетка не расползается. Как это сделано?

https://mirbelia.ru/catalog/nizhnee_bele/

14 часов назад, npofopr сказал:

background-position: bottom center; ?

Неа. Проблема, похоже, в фиксированной высоте псевдоэлемента.

А как сделать его масштабируемым пропорционально?

привет.

геометрия.онлайн

на главной странице слайдер с наложенным фоном на псевдоэлемент

почему-то не тянется фон при масштабировании страницы. почему?

40 минут назад, klierik сказал:

Существуют более надёжное решение для создания шестиугольной фигуры: http://brenna.github.io/csshexagon/

Да, пожалуй, перемудрил я с clip-path для однотонного шестиугольника с зафиксированным размером. 

40 минут назад, klierik сказал:

Но в Ваше случае, раз уж используете для рамки SVG, то намного проще и универсальнее использовать 1 SVG и для рамки и для фона.

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

Клиенту надизайнили вот такой макет. Не понимаю, как верстать.

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

Ещё занятно то, что левый край фигуры выходит за сетку. Это видно по левой границе текста.

https://codepen.io/d0ublezer0/pen/bGpqgKY

вот что удалось сверстать

что не нравится: придется ловить значения бордюра для разных разрешений, чтобы попасть в ширину блока

ну и рамочку так и не смог запилить.

UPD: добрался до clip-path

Более-менее. но не уверен как с поддержкой браузерами. Может, есть бронебойное решение?

https://codepen.io/d0ublezer0/pen/qBZrrEb

С рамочкой пока бессилен. 

2 часа назад, AlexZaw сказал:

как это стыкуется между собой? 🙂

Никак ))

Я некорректно описал задачу. Точнее, пытался решить ее иначе. 

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

https://jsfiddle.net/g0x7aj2v/

тогда проще отказаться от тени.

мне были нужны "угловые" кнопки градиентным фоном и тенью

что-то такое:

https://jsfiddle.net/a8s1yxeq/

хочу сделать угол у переключателей с тенью, но псевдоэлемент получается над основным и тень видно слева. А запихнуть ниже не удается. Это возможно?

UPD: ошибка: #sizes_table вместо #_sizes_table

Вопрос снят

https://jsfiddle.net/d0ublezer0/vd6fe2zs/

Такое дело. Содержимое таблицы заполняется автоматически из массива, основываясь на доступных опциях радио-списка со страницы.то есть, все строки создаются динамически через append

При клике на строку, она принимает класс selected. Задача - получить атрибут "for" при клике на кнопку "выбрать размер".

Как ни пробовал, выбранная строка не возвращается в виде объекта.

Помимо варианта в примере, пробовал так:

jQuery("#sizes_table tr.selected").first()

Что я сделал не так?

form.addClass("cart-product-adding");
btn.prop("disabled", true).text("Минутку");
// тут идет AJAX вызов и ждем ответ. после него изменяем статус кнопки и формы
form.removeClass("cart-product-adding").addClass("cart-product-added");
btn.text('Готово').delay(200);
form.removeClass("cart-product-added");
btn.text('В корзину').delay(1000).prop("disabled", false);

Это логика формы добавления в корзину. Задача показать процесс добавления, пока ajax не вернет ответ. Сообщить об этом и поменять вид кнопки обратно по завершении обработки.

Почему не работает delay в этом случае? Всё без остановки пролетает на последних четырех строчках

UPD: нашел. потому что нужно использовать setTimeout

Привет.

Как такое возможно сделать, чтобы отдавались разные версии страниц, в зависимости от устройства?

Сделано, например в wildberries.ru

Адреса страниц одинаковые, а оформление разное. И это не адаптив, а именно разные версии страниц. Определяют типа клиента на сервере и используют разные макеты?

Накопилось много лишнего. Как бы так пройтись по всему сайту, убрать ненужное и ничего не сломать?

https://jsfiddle.net/d0ublezer0/h4aLb7z6/9/

Я использовал для позиционирования технику, когда картинке задается float:left, а соседнему блоку overflow:hidden, чтобы блок не съезжал вниз. У второго пункта (криолиполиз) есть псевдоэлемент (новинка), который не видно из-за overflow:hidden родительского слоя.

Есть какая-то иная техника, чтобы и картинка была слева и псевдоэлемент был виден?

https://www.farmadental.ru/doctors/margasov

В работах обрезается тень у последнего элемента. Не смог найти, кто виноват. Подскажите?

1 час назад, Switch74 сказал:

размеры элементов и их содержимое посмотрите, скорее всего проблема где-то там

Размеры явно не указаны. Содержимое действительно разное, такое ощущение что флекс тянется по "весу" элемента, основанному на количестве символов в нём.

https://www.road.media/

на разрешении 1200px неровное расстояние между пунктами меню. почему так?

для контейнера указано

    justify-content: space-between;

по идее, должно быть ровненько

спасибо, поправил 

$('body').on("change", "[name='virtuemart_shipmentmethod_id']", function (e) {
	var $method_id = parseInt($("[name='virtuemart_shipmentmethod_id']:checked").val());
  $("#sel_id").text($method_id);
});

https://jsfiddle.net/d0ublezer0/jytpbs08/1/

не пойму, почему так?

14 часов назад, AlexZaw сказал:

https://www.google.ru 

Есть более точное решение