CODEWITHSUNDEEP
jqueryinfinite-scroll
Anton
Anton

Reputation: 75

Infinite Scroll Remove the paginator when we're done

I need remove the paginator when we're done like at the demo http://www.infinite-scroll.com/trigger.html

    // remove the paginator when we're done.
    $(document).ajaxError(function(e,xhr,opt){
      if (xhr.status == 404) $('a#next').remove();
    });

But this code doesn't work. I have mentioned that at the demo the version of Infinite Scroll is 1.5.100504 but the latest versiont that I have downloaded here is 2.0b2.110713 So, any help please?

Maybe this can help me:

state: {
    isDuringAjax: false,
    isInvalidPage: false,
    isDestroyed: false,
    isDone: false, // For when it goes all the way through the archive.
    isPaused: false,
    currPage: 1
  },

?

Upvotes: 1

Views: 6388

Answers (4)

marbol2
marbol2

Reputation: 11

You can use errorCallback option:-

$container.infinitescroll({
    errorCallback: function(){ 
        $('#load-more').remove()
    }
});

Upvotes: 1

Karolis Astrauka
Karolis Astrauka

Reputation: 23

You can add the script to be executed in the finishedMsg option for loading:

$container.infinitescroll({
  ...
  loading: {
    finishedMsg: "<div class='infinite-scroll-finished'>No more articles to load!</div>
                  <script type='text/javascript'> $('#infinity-start').hide(); </script>"
  ...
  }
}

Upvotes: 1

Someguy
Someguy

Reputation: 11

You may be able to plugin this in the start code but I just edited it directly.

Where you see the following:

opts.loading.start = opts.loading.start || function() {

add this opts.loading.msg = $('');

to make

opts.loading.start = opts.loading.start || function() {
$(opts.navSelector).hide();
opts.loading.msg = $('<div id="">');

on the dev version it's around line 155. This basically shorts out the loading box without destroying callbacks etc.

Upvotes: 1

JaredMcAteer
JaredMcAteer

Reputation: 22536

Your site never sends back a 404 http status code therefore this line will never work:

if (xhr.status == 404) jQuery('#load-more').find('.text').html('No more posts to load.').end().delay(2000).fadeOut();

The "No more posts to load" message is coming from the "finishedMsg" property of your infinitescroll initialization.

If you were to add

finished: function() {
    if (this.options.state.isDone) {
        $('#load-more').remove();
    }
},

to the loading property of the config:

$container.infinitescroll({
            navSelector: '#nav-pagination-load-more',
            nextSelector: '#nav-pagination-load-more .next',
            itemSelector: '.hentry',
            loading: {
                selector: '#load-more',
                finishedMsg: 'No more posts to load.',
                img: 'http://cdn.moozpaper.com/lucidpress/wp-content/themes/lucidpress/images/loading_small.gif',
                // like so: ==============================
                finished: function() {
                    if (this.options.state.isDone) {
                        $('#load-more').remove();
                    }
                }, 
                msgText: ''
            },
            behavior: 'local'
        },

it should probably do what you need. It's hard to say though since this version of the plugin is not documented very well.

Upvotes: 2

Related Questions