How to show limited number of items in a list based on lines consumed by li

StackOverflow https://stackoverflow.com/questions/18075391

Question

I am using a bulleted list to show only limited number of items without scrollbar in 'UL' on page loads and then on click of a 'more' button, I want to show the rest of item with scrollbar in UL, for that purpose, I have use following code that works fine:

<body onload="resetPops();">
<form id="form1" runat="server">
<div class="info2-wrapper">
    <div class="info2">
        <asp:BulletedList ID="listACB" runat="server" />
        <%  const Int16 numACB = 2;
            if (listACB.Items.Count > numACB)
            {
        %>
        <div class="more">
            <% =(listACB.Items.Count - numACB) %>
            more</div>
        <div class="less">
            Collapse</div>
        <% } %>
    </div>
</div>
</form>
</body>

in code behid, I bind the list as:

protected void Page_Load(object sender, EventArgs e)
    {
        listACB.DataSource = GetCategoryBoxItems();
        listACB.DataBind();
        foreach (ListItem item in listACB.Items)
        {
            item.Attributes.Add("class", "detail bullet");
        }
    }

    private object GetCategoryBoxItems()
    {
        return new List<String>
        {
            "abc",
            "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. ",
            "pqr",
            "xyz",
            "Lorem ipsum dolor sit am"
        };
    }

JS code is like:

function resetPops() {
        $('.info2, .info2 ul').removeClass('expanded');
        $('.more').show();
        $('.less').hide();
    }
    $(document).ready(function () {
        $('.info2 .more').click(function () {
            resetPops();
            $('.info2, .info2 ul').addClass('expanded');
            $('.more, .less').toggle();
        });
        $('.info2 .less').click(function () {
            $('.expanded').scrollTop(0);
            resetPops();
        });
    });

This code is working good for the number of items in the list, but problem is that when any list item is getting into more than one lines, last items are not visible.(as height of ul is fixed).This scenario comes when we see it on lower resolution, in this case, few list items get into more than one line and due to which last items are not visible.

For example, as shown below, 2nd item gets into two line causing 5th list item to be hidden:

•   abc
•   Lorem ipsum dolor sit amet, consectetuer 
    adipiscing elit. Nam cursus. Morbi ut mi.
•   pqr
•   xyz
•   Lorem ipsum dolor sit am

I am facing this issue because I have have handled this based of number of list items only not the number of lines in the UL. So how can I handle this scenario that more button is shown based on number of line in the UL and number of list item both?

Was it helpful?

Solution 2

I have got the logic to find the number of items after which I can show that 'more' button. Actually I have calculated total number of items after which I can show more button based on its height and when total height of lis exceeds height of ul then I can show that 'more' button, as:

getTotalHeight = function () {
var Visibleitemsheight = 0;
var lastindex = 0;
var totalItems = 5; //five items height is 80 that is fixed
var totalheight = 80;//height is 80 that is fixed for ul
var items = $('.info2 ul li');
items.each(function (index) {
    Visibleitemsheight += $(this).height();
    lastindex = index;
    if (Visibleitemsheight >= totalheight) {
        return false;
    }
});
lastindex++;
if (Visibleitemsheight >= totalheight) {
    if (lastindex < items.length) {
        $('.more').show();
        $('.more').text((items.length - lastindex) + " more items");
    }
    else if (lastindex == items.length) {
        if (Visibleitemsheight > totalheight) {
            $('.more').show();
            $('.more').text("more...");
        }
    }
  }
}

For now its working fine, Please suggest if there is any better approach. thanks!!!

OTHER TIPS

demo

$('li:gt(2)').hide();
$('input').click(function(){
$('li:gt(2)').show();
$('li:gt(4)').hide();
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top