Как переопределить позиционирование с помощью скрипта?

Question

[ligisayan]

Всем привет. Есть магазин и секция с двумя товарами: один статический, второй вариативный. Цену на товары абсолютно позиционирую внутри контейнера в зависимости от содержимого. Содержимое кода товаров во многом совпадают, но для статического товара высоту скрипт переопределяет все верно, а для динамического переопределения не происходит. наглядно это можно видеть в fiddle


В чем подвох?

Answer 1

[Денис Инешин]

В том, что картинки загружаются не мгновенно и их высота заранее не известна. Если вы хотите высоту ставить динамически то нужно вначале дожидаться их загрузки (гуглите "Js загрузка изображений")

Но на самом деле в вашем случае, можно и на CSS все сделать, без скриптов (гуглите "css вертикальное выравнивание")

Comments

[ligisayan]

Денис Инешин мне не выровнять, а расположить нужно, поэтому с помощью css этого точно не добиться. "В том, что картинки загружаются не мгновенно и их высота заранее не известна" тогда почему в случае с простым товаров все позиционируется верно?

[ligisayan]

и в случае "Js загрузка изображений" не подойдет - нужно менять src на data-src в html

[Денис Инешин]

ligisayan: это уже lazy load

[ligisayan]

Денис Инешин к сожалению, это мне ничего не дает, чтобы решить ситуацию..

Answer 2

[Stalker_RED]

В вашем fiddle какая-то каша, стилей минимум, картинок нет и совершенно непонятно зачем там абсолютное позиционирование да еще и скрипт исправляющий высоту каких-то блоков. css min-height не вариант?

Comments

[ligisayan]

Stalker_RED нет конечно, не вариант - контент динамический и может быть разной высоты без всяких минов. Это поточу, что я раз в 10 упростил и уменьшил код, чтобы воспроизвести проблему - вы думаете кто-то захочет разбираться если увидит 1000+ строк кода, который якобы красивее все отобразит? самое главное, что проблема воспроизводится - если открыть редактор, то четко видно, что в простом товаре top переопределился относительно изначального, а в вариативном нет. в связи с чем конкретный вопрос - почему? я же не прошу исправлять структуру

[ligisayan]

абсолютное позиционирование нужно, т.к. html структура некоторых блоков выводится выводится позади блока с описанием описания, а элемент цена должен позиционироваться в верхнем блоке. "скрипт исправляющий высоту каких-то блоков" нужен для позиционирования элемента цена при высоте контента отличающегося от стандартного. Stalker_RED у меня получилось доступнее объяснить?

[Stalker_RED]

ligisayan: Чем, кроме названия, отличается статический от динамического?

[Stalker_RED]

ligisayan: И что мешает сразу выводить цену там, где она нужна, вместо того чтоб двигать ее абсолютным позиционированием.

[Stalker_RED]

ligisayan: Не это вы пытаетсь сделать? https://jsfiddle.net/d991jn45/

[ligisayan]

Stalker_RED "Чем, кроме названия, отличается статический от динамического?" тем, что динамическая формируется исходя из размеров, которые пользователь выбирает селектом. "И что мешает сразу выводить цену там, где она нужна, вместо того чтоб двигать ее абсолютным позиционированием." форма, которая формирует цену исходя из селекта,часть которой должна располагаться в одном месте, а часть в другом и связанные между собой инпуты, которые считают количество и тоже влияют на цену.
"Не это вы пытаетсь сделать? https://jsfiddle.net/d991jn45/" да, похоже, только бесценно должно располагаться в определенном месте, в данном случае на уровне лап

[Stalker_RED]

ligisayan: так? https://jsfiddle.net/d991jn45/1/
html5 позволяет выносить инпуты из формы. www.sitepoint.com/the-html5-form-attribute
или эти данные можно собирать скриптом срабатывающем на form.submit()

[Stalker_RED]

ligisayan: как-то так https://jsfiddle.net/d991jn45/2/

[ligisayan]

да Stalker_RED по расположению так. Осталось только это под мой вариант со скриптами подстроить. "html5 позволяет выносить инпуты из формы." да, знаю, но не вариант, но у меня есть страницы где должно располагаться в правильном порядке, притом еще есть еще и связанные инпуты, которые таким способом не вынесешь.

[Stalker_RED]

ligisayan: обратите внимание, в данном случае данные собираются скриптом, аттрибут form="myform1" я не использовал.

[ligisayan]

Stalker_RED на что обратить внимание -в вашем примере скриптом я вообще не вижу