Question

First question. Hope this isn’t a repeat.

I have an unordered list of thumbnails displayed as inline-blocks. The images all line up in a nice, clean grid. But, depending on the size of their wrapper, the number of columns and rows can vary. I have data that will pop up over the image on hover (with a delay). The data is displayed below and to the right of the thumbnail. But this means the data can show up off the page if the image is on the far right.
I was wondering if there is a way of determining the row or column number via jquery, so I could make elements at either end display the details properly.

If there isn’t, I was thinking that I could get the outer width of my list elements with their margin and the inner width of the wrapper. I’d divide the wrapper by the list element, and I would then get the maximum number of list elements per row! Then I could find elements on the edge of a row through various means of javascript magic. However, this does not always work.

For instance, my previous test had 150px square thumbnails with a 2px margin. The interior width of the wrapper was 937. 937 / 154 = 6.0844. Those are numbers straight out of jquery, by the way. However, the rows were rendered with 5 columns. Dropping my margin to 1 so that my widths were 152px allowed me to get 6 images per row (6.164). I could very well work on a plugin for my goal as it is, but this little quirk bothered me.

Any ideas or recommendations?

By the way, this was tested in Chrome and Firefox.

Answer 1

I guess I can’t comment without at least 50 rep… So I’ll just post here.

As +Kevin B said, and who i agree with, one possible solution is to find the position of the obj that is the parent for the popup. Compare that position to the width of the page and if it’s smaller than the width of your popup move the popup further to the left to compensate. Example:

<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" />