List of items is too long, how do we detect condition and resolve it?

Question

We have a fixed size div in which we are displaying some news items. We display 6 news items, and then a link that follows, which links them to archives. When the news article titles are all one line in length, everything fits. When multiple news items have titles that are two lines in height, the group of items takes up more space that we have.

Using jQuery, CSS, and HTML, how can we cut off or not display news items which cause the group to not fit in the div? Scroll bars is not an option. The height and width of the div is constant and known.

The structure of the news items is simply a list of list items.

Answer 1

You can set CSS on your div to hide the extra data:

<div style="overflow: hidden;">

Or char limit your news item titles in your scripts. In PHP this would be:

<?php echo strlen($article['title']) > 60 ? substr($article['title'], 0, 57) . '...' : $article['title'] ?>

That would cut off any article titles longer than 60 characters at the 57th character and add '...' to show continuation.

Hope that helps.

Answer 2

I'd have to look up the exact code, but it is entirely possible with jQuery.

Something like this perhaps?:

var container = $("#container");
var list = $("#list");

var contHeight = container.height();
var listHeight = list.height();

while (ulHeight > contHeight) {
  ul.children().last().hide();
  var ulHeight = ul.height();
}

Haven't tested it, but that's the idea. Or you could step through each child adding the heights together and then hide all the ones over your limit.

Answer 3

First you would need to grab the fixed height of your div. Then loop over the items in the div and figure out when they start poking out of the div and hide them.

Example: http://jsfiddle.net/pqsEG/1/