metafizzy / metafizzy/infinite-scroll
infinite scroll and masonry not working in tumblr theme?
- Dominant language
- HTML
- Stars
- 7.5k
- Forks
- 1.7k
- PR merge metrics
- No merged PRs in 30d
Description
I'm trying to use the infinite scroll and masonry to make a 2 - column tumblr theme. My issue is that it seems the code isn't triggering; neither the masonry nor infinite scrolling is working. I've tried moving the script to different places in the code and that didn't work. I took out the irrelevant parts of my code, hopefully someone else can help me understand it.
```
.main {
margin: auto;
margin-top: 30px;
width: 1000px;
}
.posts {
margin-bottom: 30px;
width: 400px;
float: left;
background: white;
}
#content {
margin-top: 80px;
width: 1000px;
}
div class="pag">
{block:Pagination}{block:PreviousPage}previous ·{/block:PreviousPage} {block:NextPage}next{/block:NextPage}{/block:Pagination}
{block:Posts}
{block:IndexPage}
{/block:IndexPage}
var $container = $('#content').masonry({
// options
itemSelector: '.posts',
columnWidth: 400
});
// get masonry instance
var msnry = $container.data('masonry');
$('#container').infiniteScroll({
// options
path: '.pag #next',
append: '.posts',
history: false,
outlayer: msnry,
});
```
Contributor guide
Research direction
Start by tracing the inline script's initialization of #content, #container, .posts, and the .pag #next pagination link, then compare those selectors with the included jQuery and Infinite Scroll scripts. Confirm what is required for the masonry and infinite-scroll integrations, and verify that both the two-column layout and subsequent-page loading work in the Tumblr theme.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, jquery
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100