Как сделать так, чтобы JS витжет не ломал изначальную верстку на странице?
Задача такова: нужно рализовать при помощи JS витжета подгрузку кнопки рядом с каждой картинкой, помеченной определенным классом.
Теперь подробнее. На странице есть одна или более картинка с определенным классом, например our-class. На страницу подгружается витжет на JS, который будет производить логику с каждой такой картинкой. Он будет брать ее src, отправлять к нам на сервер, получать массив результатов. Если результаты есть, то нужно показать кнопку поверх картинки. При клике на кнопку открывается блок с результатами рядом с кнопкой.
Так вот. Есть две сложности.
1. Как правильно спозиционировать КНОПКИ и БЛОКИ С РЕЗУЛЬТАТАМИ относительно картинок, чтобы не сломать чужую верстку? Верстка может быть любая, главное в ней есть <img class="our-class">.
В данный момент я вычисляю left и top относительно документа, но есть минусы: надо при каждом обновлении DOM и ресайзе документа пересчитывать все-все-все координаты.
Предвижу ответ: оберни в родительский DIV! Но не сломает ли это верстку чью-нибудь? Вдруг там какой-нибудь inline зажит.
2. На узких экранах div с результатами любит вылезти куда-нибудь за пределы. Есть ли способ это побороть? Как безошибочно определить, что элемент вылез за границы window?
1. Оберни в div с display:inline-block; и дай ему position:relative; после этого все абсолютные блоки внутри будут позиционироваться относительно его, а не документа.
так же не забывай про псевдо селекторы :before и :after, скорее всего можно чисто на них вывезти
2. Перещитывай в какой стороне экрана стоит кнопка, если в правой - отображай результат слева, если в левой - справа. Задай блоку с результатами max-width с шириной экрана
1. Оберни в родительский div. У которого размеры 0x0.
2. Универсальным вариантом было бы отображать див с результатами как модальное окно, по центру экрана. Типа темный фон, бла-бла-бла...
Или же если див будет персональный для каждого блока - тогда просто абсолютным slide-layer-ом его в нашем первом диве.
1. надо попробовать с пустым div.
Но кто-то может прописать стиль с прямым наследованием типа ul > li > img
И тогда все поломается из-за нашего div
2. модалка точно не подходит, хотя работать будет бескосячно.
нужен какой-то хороший скрипт по кроссбраузерному кроссплатформенному отображению блока с результатами (чтобы вычислялись все координаты и он не вылазил)
Вячеслав Лукоянов, пробуй так. Все там будет нормально. Диву нулевому нашему после аппенда принудительно установить требуемые свойства с !important; но огрничить классом, чтобы на остальные дивы не пошла холера:)
Exploding если оборачивать в родительский div с 0х0, то ломается верстка при флоатах. Только что тестировал. Там картинка в col-sm-12, потом идет текст и этот текст проваливается вверх. Вообщем тест не пройден :)
Вячеслав Лукоянов, значит делать как все: фигачить в боди с абсолютным позиционированием, вычислять положение картинки и расставлять все по местам... Универсальнее наверное ничего не придумать уже:)
Простой