Browse files

added better paging integration instructions

  • Loading branch information...
kristianmandrup committed Aug 30, 2012
1 parent 1acfdae commit ed1fd0e527999a5a00b12ae2ce81b13e4ab0424c
Showing with 70 additions and 2 deletions.
  1. +70 −2
@@ -381,16 +381,84 @@ Or whichever animated loader icon you want to use ;)
You can combine masonry infinite scroll with Kaminari using suggestions here:
In the above example, to enable paging simply have the `pages/2.html` link respond with the next page and infinite scroll will automatically ajax-retrieve and render the elements indicated by `itemSelector` into the container.
[Sausage](, used in this example is also included with this gem ;)
`$container.masonry( 'appended', $newElems, true );`
See [Create-Infinite-Scrolling-with-jQuery]( for another example.
[Sausage]( which used in this example is also included with this gem for convenience ;)
Stylesheets: `sausage/sausage.css`and `sausage/sausage.reset.css`
Javascript: `masonry/jquery.sausagemin.min.js`
For more see [sausage info](
The div with a class of 'page' is important for sausage. It is used to determine the different pages for the navigation on the right.
<div id="container" class="transitions-enabled infinite-scroll clearfix">
<div class='page'>
<%= render @articles %>
<div class='article box col<%= article.size %>'>
<h3><%= article.title %></h3>
<div class='author'>by <%= %></div>
<div class='date'>by <%= article.created_at.to_s(:long) %></div>
<%= article.body %>
Where `article.size` returns a valid col size, fx 1 to 5.
(function() {
var page = 1,
loading = false;
function nearBottomOfPage() {
return $(window).scrollTop() > $(document).height() - $(window).height() - 200;
if (loading) {
if(nearBottomOfPage()) {
url: '/articles?page=' + page,
type: 'get',
dataType: 'script',
success: function() {
It checks if the user scrolled to the bottom of the page. If that is the case, an ajax-request is sent to the `ArticlesController requesting the next page. After the ajax-request is completed successfully the sausage-navigation is redrawn.
When the ajax-request is sent to the ArticlesController we need to append the next page of articles. We need to create a file named `index.js.erb` to achieve this goal.
$("#container").append("<div class='page'><%= escape_javascript(render(@articles)) %></div>");
Note: You need to configure Jquery UI to use sausage.
See: [railscast-endless-page]( for how to use endless pages with Rails using *will_paginate* gem.

0 comments on commit ed1fd0e

Please sign in to comment.