The below code allows for a specific amount of posts to be viewed in the browser, with a click event to Load More. The script functions correctly, but my goal is to notify users when they've reached the end. Essentially changing the Load More link to No More Posts. I was able to accomplish a similar solution using the alert() function, but that is ugly and distracting to the user.
If anyone can suggest a better method for going about this issue, I would greatly appreciate it. Thank you.
$(window).load(function(){
$(function(){
$(".post").slice(0, 20).show(); // select the first ten
$("#load").click(function(e){ // click event for load more
e.preventDefault();
$(".post:hidden").slice(0, 20).fadeIn(600); // select next 10 hidden divs and show them
});
});
});
Since I'm not 100% how your structure is set up, this might not be the best solution...
What you can do is, set all of the posts to have a class of 'not-visible' or something like that. Then, when you fade them in, also remove that class. Then in your fadeIn() callback you can see how many of those divs are left.
$(".post.not-visible").slice(0, 20).removeClass('not-visible').fadeIn(600, function () {
if( !$(".post.not-visible").length() ) {
// do something to let the user know there are no more posts
}
});
Hello All,
The below code allows for a specific amount of posts to be viewed in the browser, with a click event to Load More. The script functions correctly, but my goal is to notify users when they've reached the end. Essentially changing the Load More link to No More Posts. I was able to accomplish a similar solution using the alert() function, but that is ugly and distracting to the user.
If anyone can suggest a better method for going about this issue, I would greatly appreciate it. Thank you.
$(window).load(function(){ $(function(){ $(".post").slice(0, 20).show(); // select the first ten $("#load").click(function(e){ // click event for load more e.preventDefault(); $(".post:hidden").slice(0, 20).fadeIn(600); // select next 10 hidden divs and show them }); }); });Since I'm not 100% how your structure is set up, this might not be the best solution...
What you can do is, set all of the posts to have a class of 'not-visible' or something like that. Then, when you fade them in, also remove that class. Then in your
fadeIn()callback you can see how many of those divs are left.Thanks for the reply @thedoc . I'll have to give it a try. Anyone else with a suggestion by chance?