I'm using Infinite Ajax Scroll for pagination on my blog. When there are no more posts left to load, I want to hide the trigger (the buttons) parent container (currently, it just has opacity: 0, but this leaves unwanted whitespace).
In the console, I can see that IAS leaves a message saying "No more pages left to load", so I know there is a method in place to check if more posts exist. But, having applied two methods, I cannot get it to work.
Method 1: Using last:function()
Method 2: Checking if the trigger has opacity: 0, then hiding parent container if so
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@webcreate/infinite-ajax-scroll@3.0.0-beta.6/dist/infinite-ajax-scroll.min.js"></script>
<div class="container pagination-hide">
<div class="row">
<div class="col-12">
<div class="pagination">
<a class="loadmore">Load more</a>
</div>
</div>
</div>
</div>
<script>
$(function() {
var ias = new InfiniteAjaxScroll('.insertPosts', {
item: '.insertCard',
pagination: '.blog-pagination',
next: '.next-posts-link',
trigger: '.loadmore',
loadOnScroll: false,
last:function(){
$(".pagination-hide").addClass("d-none");
}
});
// $('.loadmore').click(function(){
// if ( $(this).css('opacity') == '0' ) {
// console.log("true");
// $(this).parent(".pagination-hide").addClass("d-none");
// }
// });
});
</script>Have also tried the following, as per IAS docs, however, this just adds the d-none class to pagination-hide on page load, rather than adding the class (as it should) if there are no more posts to load.
trigger: {
element: '.loadmore',
// this function is called when the button has to be hidden
hide: function(element) {
$(element).closest(".pagination-hide").addClass("d-none");
element.style.opacity = '0'; // default behaviour
}
},Seems like you would also need to add a show() method that un-does the changes in hide(), in order to get the correct behavior:
trigger: {
element: '.loadmore',
// this function is called when the button has to be hidden
hide: function(element) {
$(element).closest(".pagination-hide").addClass("d-none");
element.style.opacity = '0'; // default behaviour
},
show: function(element) {
$(element).closest(".pagination-hide").removeClass("d-none");
element.style.opacity = '1';
}
},Sorry, but you went on a bad road. You shoud show button <a class="loadmore">Load more</a> if you have some other conten unstead of hiding unnecessary. It's wrong in root. You are calling unnecessary operations in the DOM render. You better rewrite your code.
AFAICT you were on the right track with your first attempt - the last event seems like exaclty the right way to do what you need. But the docs also show that you need to bind event handlers with .on(), not pass them as options, which is what you tried.
For example, something like this:
var ias = new InfiniteAjaxScroll('.insertPosts', {
// ... your options
// last:function(){} // <-- won't work, not the way to bind event handlers
});
// What we want to happen when we've hit the last page
function noMorePages() {
$(".pagination-hide").addClass("d-none");
}
// Handle the "last" event with our function
ias.on('last', noMorePages);
There is a similar example in the docs.