The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Notify when no more posts to load

  • # January 16, 2013 at 6:00 am

    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.

    $(".post").slice(0, 20).show(); // select the first ten
    $("#load").click(function(e){ // click event for load more
    $(".post:hidden").slice(0, 20).fadeIn(600); // select next 10 hidden divs and show them
    # January 16, 2013 at 1:34 pm

    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

    # January 17, 2013 at 5:49 am

    This reply has been reported for inappropriate content.

    Thanks for the reply @thedoc . I’ll have to give it a try. Anyone else with a suggestion by chance?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed