I have an unordered list with a variable number of list items, e.g.:
<ul class="list divider-full-bleed">
<li class="tile">
...
</li>
<li class="tile">
...
</li>
...
</ul>
When the browser window resizes, I always want to make sure that I only display the list items that fit within the viewport. The list items that are not visible or only partially visible I want hidden.
This is what I have done so far:
$( window ).resize(function() {
var max_height = $(window).height();
var item_height = $('.divider-full-bleed li:first').height();
var squeeze_to_fit = Math.floor( max_height / item_height );
$('.divider-full-bleed li').each(function(){ $(this).show() })
$('.divider-full-bleed li').offset(squeeze_to_fit + 1).each(function(){ $(this).hide() })
});
That offset function I am using above is only a placeholder and throws an error. Is there a jQuery function or even a built-in Javascript function that will allow me to start my selection of child elements at a specific offset?
