Question

I have a containing element that is set to overflow hidden with a UL that overflows the container. How would I go about getting the li’s that are visible?

My markup:

<div class="dm-similar-photos-content-container">
    <ul class="carousel" style="left: 0px;">
        <li class="dm-image">
            <img data-photoid="1" src="http://lorempixel.com/150/150/food/1">
        </li>

        <li class="dm-image">
            <img data-photoid="2" src="http://lorempixel.com/150/150/food/2">
        </li>

        <li class="dm-image">
            <img data-photoid="3" src="http://lorempixel.com/150/150/food/3">
        </li>

        <li class="dm-image">
            <img data-photoid="4" src="http://lorempixel.com/150/150/food/4">
        </li>

        <li class="dm-image">
            <img data-photoid="5" src="http://lorempixel.com/150/150/food/5">
        </li>

        <li class="dm-image">
            <img data-photoid="6" src="http://lorempixel.com/150/150/food/6">
        </li>

        <li class="dm-image">
            <img data-photoid="7" src="http://lorempixel.com/150/150/food/7">
        </li>

        <li class="dm-image">
            <img data-photoid="8" src="http://lorempixel.com/150/150/food/8">
        </li>

        <li class="dm-image">
            <img data-photoid="9" src="http://lorempixel.com/150/150/food/9">
        </li>

        <li class="dm-image">
            <img data-photoid="10" src="http://lorempixel.com/150/150/food/10">
        </li>

    </ul>
</div>


<div>
    <a class="left">
        <- Left
    </a>
    <a class="right">
        Right ->        
    </a>    
</div>

My Styles:

.dm-similar-photos-content-container {
    margin: 0 30px;
    overflow: hidden;
    width: 335px;
}
.carousel {
    margin: 0;
    padding: 0;
    position: relative;
    width: 9999px;
}
.dm-similar-photos-content-container .dm-image {
    margin: 13px 27px 13px 0;
}

.dm-image {
    float: left;
    list-style: none outside none;
    margin: 16px 16px 0 0;
    position: relative;
}


.dm-image img {
    border: 2px solid #7F8886;
}

and finally the simple left and right JS:

jQuery('.left').on('click', function() {
    jQuery(".carousel").animate({
        left: "-=181"
    });
});

jQuery('.right').on('click', function() {
    jQuery(".carousel").animate({
        left: "+=181"
    });
});

You can see it here: http://jsfiddle.net/GGhUF/

Answer 1

There general approach is to figure out whether the element lies within the bounding box of its parent, which can be figured out using their respective widths and offsets. The best way to incorporate all this is in a single custom selector:

jQuery.extend(jQuery.expr[':'], {
    inparent: function(el) {
        parent = $(el).parent();
        if ($(el).offset().top >= parent.offset().top && 
            $(el).offset().top + $(el).outerHeight(true) <= parent.offset().top + parent.outerHeight(true) && 
            $(el).offset().left >= parent.offset().left && 
            $(el).offset().left + $(el).outerWidth(true) <= parent.offset().left + parent.outerWidth(true)) 
        {
            return true;
        }
        return false;
    }
});

You can then use it like this:

var visibleli = $('li:inparent');

This could obviously benefit from some optimisation (early exit after comparing widths etc.), but I’ll let you work that out.

Here’s a demonstration: http://jsfiddle.net/DDRYj/