Infinite Scroll and articles

151 Posts

sitsol Reply #1, 13 years ago

Hello, I want to use articles with Infinite Scroll (https://github.com/paulirish/infinite-scroll). Anyone has experience with this?

Can you please tell me how to trigger the next page. I want to have a "load more" button under the first articles that when clicked on triggers the next articles, etc...

I know I have to first load the section, but then I don't know how to handle the navigation to get the next articles. Where do I put the next-button and how is it called?

   <script type="text/javascript">
var $container = $('#masonry-box');
$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.masonry-item',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    var $newElems = $( newElements );
    $container.masonry( 'appended', $newElems );
  }
);
</script>

Thx for help from experienced Modx-users.

This question has been answered by sitsol. See the first response.

☆ A M B ☆
3,112 Posts

goldsky Reply #2, 13 years ago

You need to use ajax to grab the list.
I'm not sure that you can use articles for this purpose.
You must create a processor to retrieve the resources.
This ajax part sends the pagination limit to the processor, bit by bit, and so it can return back the next output.
Usualy REST takes a part.

Rico
Genius is one percent inspiration and ninety-nine percent perspiration. Thomas A. Edison
MODx is great, but knowing how to use it well makes it perfect!

www.virtudraft.com

Security, security, security! | Indonesian MODx Forum | MODx Revo's cheatsheets | MODx Evo's cheatsheets

Author of Easy 2 Gallery 1.4.x, PHPTidy, spieFeed, FileDownload R, Upload To Users CMP, Inherit Template TV, LexRating, ExerPlan, Lingua, virtuNewsletter, Grid Class Key, SmartTag, prevNext

Maintainter/contributor of Babel

Because it's hard to follow all topics on the forum, PING ME ON TWITTER @_goldsky if you need my help.

discuss.answer

151 Posts

sitsol Reply #3, 13 years ago

In mean time I found the solution with use of a behavior for Infinite Scroll.

And yes, I can confirm that you can use Articles with Masonry & Infinite Scroll. For the load button you just use the first entry and the rest is calculated auto.

So just put you button inside a div. The button is triggered with an "a href". The destination is just the first entry: ?page=2

59 Posts

ronbonqqq Reply #4, 11 years, 8 months ago

Hi Sitsol,

I have read your post about using the Infinite Scroll plugin for articles.
My aim is to implement something similar (without Masonry) though.

I actually looked into different plugins for infinite scrolling, i.e. JScroll, and Infinite-Ajax-Scroll. The implementation should be SEO friendly ofcourse.

I was wondering if you could let me know how Infinite Scroll (Paul Irish) is working for you and if you would mind sharing how you got it to work. I am quite a newbie and I would appreciate if you could list me the steps I need to take.

Thank you on forehand for your help.

Ronaldo.

Answered Infinite Scroll and articles