Geek Answers Handbook

Change option and reinitialize

I use jscrollas an endless scroll player.

$j('.frontpage').jscroll({
    loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
    padding: 20,
    nextSelector: 'div.next a',
    contentSelector: '.latest-container',
    autoTrigger: true,
    autoTriggerUntil: 1
});

This is a pretty neat plugin, and it uses a must for my project autoTriggerUntil. Using this method, you can limit the time during which the content is downloaded automatically and display the "Next" button on the page.

I am trying to achieve this.

  • Download the first set of messages (actually 2nd page) with infinite. (DONE)
  • After the 2nd page, display the "Download All" button. (DONE)
  • Both 1 and 2 work, but I'm trying to do this: after clicking "Download All" on page 2, I want to destroy the limiter and return to the endless view to the end.

- . - .

+3
3

: -

: -

$('.frontpage').jscroll({
    //your existing settings ,
    callback: function() {
      if ($('div.next a').is(":visible")) {
         $('.frontpage').jscroll.destroy();
         $('div.next a').off('click');
       }
    }
});

onclick a ( , a )

onclick="loadAllClick(event);"

: -

  <script>
      var loadAllClick = function(e) {
           e.preventDefault();
           $('.frontpage').jscroll( //your settings 
                               );
          }
  </script>

- plunker , .

+2

$(el).off() callback.

http://jscroll.com/.

:

var counter = 0;
function scrollerCallback(){
  counter++;
  if(counter<2){return;}
    var el = $j('div.next a'); //Your 'next' selector
    el.off()
    el.on('click',function(e){
      e.preventDefault(); // we don't want the browser to go to redirect
      // Add your code to show the rest of the comments here.
  });
}

bind , :

$j('.frontpage').jscroll({
    loadingHtml: '<div style="text-align: center;"><img width="50" src="ring-alt-1.gif" alt="Loading" /></div>',
    ...
    callback:scrollerCallback,
    autoTriggerUntil: 1
});
+1

In your CallBack function, try using this:

var counter = 0;
function scrollerCallback(){
  counter++;
  if(counter<2){return;}
    var el = $j(document).find('div.next a');
    el.on('click',function(e){

      e.preventDefault();
      console.log("This call gets executed!");

      $j('.frontpage').jscroll({
        autoTrigger: false,
        autoTriggerUntil: false
      });

  });
}

What happens when you do this? I think you need to change the library to make it work, but I'm still not quite sure ...

+1
source

More articles:


All Articles