Best way to append new content for infinity scrolling page

[Jamie452]

I was just wondering if anyone has looked at Mason for an infinity scrolling style page.

Is there a recommended way to append content to the main content div without causing everything to redraw?

Thanks,

Jamie

[pr1ntr]

bump

[UnaOmnia]

Yes, knowing how to do so would be excellent!

[DrewDahlman]

A potential solution for this has been found - @Jamie452 and I are working to see if it is viable and works as it should.

[UnaOmnia]

What is branch 2 currently solving? I am not sure I follow..

Is it that I am swapping out your JS and leaving my mockup the same? Or did anything of the expected setup change?

[DrewDahlman]

Everything should be the same - the promoted posts did change a little. check the readme as well as the examples in the public folder. you will see a double grid example for how you could potentially setup the infinite scroll.

[Jamie452]

@UnaOmnia - just wanted to point out that the change to promoted posts in the options isn't too obvious, it took me a while to notice that the order of the class_name, x, y has changed from:

promoted: [
        [2, 1, 'class_name'],
        [2, 3, 'class_name'],
        [3, 3, 'class_name'],
    ]

to:

promoted: [
        ['class_name', 2, 1],
        ['class_name', 2, 3],
        ['class_name', 3, 3],
    ]

Hopefully that will save you some time :)

[UnaOmnia]

I found the issue with my problem. The infinite scroll demo should work, however for the HTML markup you need to be sure you include a class on the grid container to include the necessary CSS to not get the infamous Cannot set property of "0".

.mason-container {
width: 100%;
position: relative;
}

Then be sure this class is on all grids. Then the Mason.js should work just fine. .mason() can be called on different selectors, and the .box and .fillerBox and .custom_filler class can stay the same.

Fillers remain the same, unless you remove or reorder them. That is what I do. I lazy load and them remove the fillerBox's that get cloned and turned into .custom_fillers. Then I append() the remaining fillerBox's to the next grids filler box container (#fillers). But it is also prudent to make a class .fillers, that essentially does the same thing as #fillers, picks up the display: none CSS, but for all fillerBox containers.. just like my idea for the .mason-container class.

In the infinite scroll demo of mason 2.0 (double_grids), it shows JS specifying the next load. If you were using WordPress you could emulate this better in combination with WordPress pagination and .load() AJAX.

https://github.com/DrewDahlman/Mason/blob/2.0/public/double_grids.html

http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/

But you would need to go further.. MUCH FURTHER.. to remove/append fillers.. and control the size of the elements INSIDE the boxes!!!!

i.e. you have to go further into increasing and decreasing text excerpts, or changing image size based on parent box container etc.

localnationalnews.com <-- my work so far.. only works up to load 6.. sometimes 11.. not sure why.. it works over and over, but eventually it fails. with no error. I am not sure the cause, so it could have to do with pagination, however I checked for the last page (turned out to be page 14 in my case) and my lazy load did not work up to the last page. I will try to fix that tonight.

ALSO, if the last line of boxes are filler boxes, the element that proceeds them will not clear the grid. In my case if the last 4 boxes are fillers my load more button overlaps those posts. So I will have to ensure the last post is always a regular box - or something of that nature.

I hope this project turns into something a tiny bit more useful, as randomly sized boxes you can't do anything with, aren't that useful, in and of themselves.

[DrewDahlman]

I am closing this and going to note that there is an example of adding grids now in the master branch in public/double_grids.html