Определить количество столбцов или строк с элементами списка как inline-block + quirk - PullRequest
Новая
       8

Определить количество столбцов или строк с элементами списка как inline-block + quirk

0 голосов
/ 22 декабря 2011

Первый вопрос.Надеюсь, это не повторение.

У меня есть неупорядоченный список миниатюр, отображаемых в виде встроенных блоков.Изображения все выстраиваются в красивую, чистую сетку.Но, в зависимости от размера их оболочки, количество столбцов и строк может варьироваться.У меня есть данные, которые всплывают над изображением при наведении (с задержкой).Данные отображаются ниже и справа от миниатюры.Но это означает, что данные могут отображаться со страницы, если изображение находится справа.Мне было интересно, есть ли способ определения номера строки или столбца с помощью jquery, чтобы я мог заставить элементы на любом конце отображать детали правильно.

Если нет, я думал, что смогу получитьвнешняя ширина моего списка элементов с их полями и внутренняя ширина оболочки.Я разделил бы обертку на элемент списка, и тогда я бы получил максимальное количество элементов списка на строку!Тогда я мог найти элементы на краю ряда с помощью различных средств магии JavaScript.Однако это не всегда работает.

Например, в моем предыдущем тесте были квадратные миниатюры размером 150px с полем в 2px.Внутренняя ширина обертки была 937. 937/154 = 6.0844.Кстати, это цифры прямо из jquery.Тем не менее, строки были представлены с 5 столбцами.Сброс моего поля до 1, чтобы мои ширины составляли 152 пикселя, позволило мне получить 6 изображений в строке (6.164).Я мог бы очень хорошо поработать над плагином для моей цели, как она есть, но эта небольшая причуда беспокоила меня.

Есть идеи или рекомендации?

Кстати, это было проверено в Chrome и Firefox.

1 Ответ

2 голосов
/ 22 декабря 2011

Полагаю, я не могу комментировать без 50 повторений ... Так что я просто напишу здесь.

Как сказал + Кевин Б. , и с кем я согласен, одно из возможных решений - найти позицию объекта, который является родительским для всплывающего окна. Сравните эту позицию с шириной страницы и, если она меньше ширины вашего всплывающего окна, переместите всплывающее окно дальше влево, чтобы компенсировать это. Пример: 

<style>
#parent { width: 200px; float:right }
#popup { width: 100px; }
</style>

<script>
    $(document).ready(function () {
        var parentRight = $("#parent").position().right;
        var windowRight = $(window).width();

        var width = windowRight - parentRight;
        if ($("#popup").width() < width) {
            //display popup
        }
        else {
            var offset = $("#popup").width() - width;
            var newLeft = $("#popup").position().left - offset;
            //display popup
            $("#popup").css('left', newLeft);
        }
    });
</script>

<div id="popup" />
<div id="parent" />
...