javascript - Hide <li> element when not fully visible

Question

Basic: I have an unordered list with many listitems (containing a picture and title). Not knowing how long the title will be I don't know the hight of each listitem. To the left of this list is a big picture with title that "sets" the hight of my list (depending of the height en length of the title).

What I try to do: When the last listitem of my list can't be fully displayed, hide the whole listitem.

Examples: http://d.pr/eAlK & http://d.pr/8MVO

In the second example the 4th article is hidden because it wouldn't be fully visible.

Is this possible? I prefer I clean way that works crossbrowser if possible...

Answer 1

Basically the idea is to calculate all the height of child elements together and compare with maximum allowed height.

Using jQuery

var neededHeight = $("#lhscontainer").outerHeight(); //you can also use static value 
var totalChildHeight = 0;
$("ul").children("li").each(function() {
    totalChildHeight+= $(this).outerHeight(); //add up to the total height 
    if(totalChildHeight> neededHeight) {  //compare if the height limit was exceeded
       $(this).hide(); // if it did, hide the current element
       $(this).nextAll().hide(); //hide all other list also
       return false; // break the loop to stop the further iteration
    }
});