zeshanshani / simple-load-more Goto Github PK

Great little plugin. Light-weight, easy to implement, and works like a charm. The only thing missing is a custom variable to set how the next list of items will be displayed. Currently clicking the 'Next' button uses fadeIn(), but an option to allow for i.e. slideDown() would be a great addition.

Is there a way to implement a Callback function when the list is completely shown (and the ‘More’ button is hidden)? Meaning, when the last items are displayed to the user, is there a way that I can detect that and trigger a function of my own to do additional processing.

What I’m trying to do is get the next set of records from the database (via AJAX) so the user can ‘transparently’ continue viewing them, until all the records are exhausted.

BTW: I have implemented simple-load-more throughout the app and it works great! I think adding this little feature will make it a more robust tool since it will then not be limited to just the initial retrieve/list display.

Can we have an update or refresh callback if, for instance, we are sorting through a list and are removing/hiding some items?

I was asking if there was the possibility to insert, first of the button "View More", the number of current elements showed / number of total elements. It would be great if after click on View More the counter of current news was updated. I make a simple example. If I have this configuration, with 50 elements:
count: 10, itemsToLoad: 5

Number of news: 10/50
View more >

After the click of the button view more the elements will be 15 and the counter of the current elements will be 15/50 until to get all the elements. Another appreciate issue would be the number of clicks, before View More button until to get the end of elements. In the previous example, given a total of 50 elements, starting with 10 and increasing of 5 elements each time, it should be so:

Number of news: 10/50
[-8] View more >

After the click of "View more" button, the counter of clicks decrease until to get -1, when it arrives to 0 it means we have showed all the elements and so both counter click and view more button is not showed.

Opening this thread on request of @MicJarek

I will be creating a new option using which you can wrap the 'MORE' button in HTML. The purpose is to allow users to apply custom classes and styles on the button. E.g., horizontally centering the button

I'm trying to position the btnHtml on bottom center with TailwindCSS but without success, here's the code

  <script>
$('.gallery').simpleLoadMore({
  item: 'div',
  count: 180,
  btnHTML: `<a href="#" class="load-more__btn rounded-2xl bg-white text-red-500 px-5 p-2 font-bold mx-auto">View More <i class="fas fa-angle-down"></i></a>`,
});
  </script>

Result: