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!!!