Comments (8)
bump
from mason.
Yes, knowing how to do so would be excellent!
from mason.
A potential solution for this has been found - @Jamie452 and I are working to see if it is viable and works as it should.
from mason.
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?
from mason.
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.
from mason.
@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 :)
from mason.
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.
from mason.
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
from mason.
Related Issues (20)
- virtual scrolling
- Is it possible to work with zeptojs instead of jquery? HOT 1
- Items repeating unnecessarily HOT 9
- fixed outer container (both height and width) HOT 3
- Adding and removing boxes HOT 1
- Blocks not filling in space HOT 3
- Fillers should be hidden to people using screenreaders HOT 2
- Fillers disappearing
- Fillers with different sizes HOT 3
- Fillers off by exactly 8px? HOT 2
- Items left-aligned and a ton of fillers HOT 3
- Feature request: smooth transitions HOT 1
- Hide original filler element(s) HOT 1
- Example with multiple images? HOT 6
- Feature request: Variable Gutter
- Space around the grid
- May I suggest
- Getting typeError
- Fixed height of container
- Is there a way to refresh Mason? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mason.