UL that allows only a set limit of LI elements?

I want to create a UL that has a certain amount of LI elements, but instead of showing every LI element, I want to either display 5 of them or whatever the containing DIV will allow just before activating the “overflow or scroll”.

So in other words, let’s say I have a div with a height of about 300px. If the UL generates a few list items, in turn, creating a UL that supersedes this height value, a scroll bar will be generated (depending, of course, on how the CSS and whatnot is written). So, what I would like to do is generate a “Read More” link at the bottom of the UL and display only whatever number of list items it can take that will fit appropriately within the DIV element.

It was my understanding that things like this are usually done with JavaScript because I can’t see how PHP would govern the height of an element unless you somehow replaced the height attribute of the CSS with some sort of PHP variable (which would mean I would have to change the CSS extension and do a bunch of stuff I think would be outside my scope at the given moment). What do you think? What’s your perspective on this?

How can someone do this using JavaScript? Is this even possible?

it’s possible, but overflow: auto; will only show a scroll bar if it’s needed. Is that all you’re after?


ul {
  height: 300px;
  overflow: auto;
}

I’m not sure what you’re looking at doing when you click Read more, but ulElement.childNodes.length will give you the number of li elements it contains.

The problem with doing it with CSS is that you a part of a LI showing at the bottom. That looks ugly and like the website has been poorly developed.

With JavaScript you can measure the height of the container (clientHeight or [URL=“https://developer.mozilla.org/En/DOM/Element.scrollHeight”]scrollHeight - they’re different and which you use depends on the circumstances) and then loop through the LI items, measuring their height in turn and adding them together.

When you get to the point where adding one more means the value will be greater than the height of the container, you simply start giving them display:none. Then at the end you add your “read more…” link.

Would something like this be capable of being done if percentages are used instead of pixels?

Nope. What Raffles suggested is the best way to do it.

Just to make sure I understand you–you’re saying it is virtually impossible to use the method Raffles suggested to find the height percent value of an element?

I find this hard to believe.

It should work the same.

Alternatively, just keep hiding elements until the scrollbar disappears.

Let’s say I have the following:


<div id="block">
   <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
   </ul>
</div>

Using clientHeight and scrollHeight, would I then use a condition to compare the height of the UL’s required vertical scroll space against that of the available space DIV#BLOCK has? If the latter is smaller than the other, cut-off the li? Is that right?