Comments (9)
Could you please elaborate on what is not working? It would also help if you could link to a live example or recreate your error on jsfiddle. Thanks.
from infinite-scroll.
Since 2.0 isn't actually out and I've gotten a lot of emails about how to do this, I'll go ahead and post the code for how to achieve this with the current 2.0 beta.
$(document).ready(function(){
// set up infinite scroll
$('#container').infinitescroll({
// insert your options here
});
// unbind infinite scroll from automatically
// fetching the next page
$('#container').infinitescroll('binding','unbind');
// when the a tag (id 'load-more') is clicked,
// fetch the next page
$('#load-more').click(function(e){
e.preventDefault();
$('#container').infinitescroll('retrieve');
// the plugin currently sets 'display:none' on your nav selector
// this is probably going to change, but for the moment, just do this.
$(this).css('display','block');
});
});
from infinite-scroll.
Using the setup code you've supplied, we're experiencing a race condition when hiding/showing the navigation link.
The hide happens in a callback that runs after the loading bar is animated into view. The show happens in the navigation link click handler after the retrieve is triggered (as shown in the above code).
The first time we click the "next" link, the click handler executes the retrieve method—which displays the loading bar, hides the navigation link (the post-loading-bar-animation callback), and triggers the loading of the content—then shows the navigation link. The second time, it executes the retrieve method, then shows the navigation link; only this time the post-loading-bar-animation callback runs after our click handler has finished. In other words, the hide comes after the show and our navigation link never reappears.
To make it work for now, we had to set loadingMsgRevealSpeed
to 0. It would seem that really fixing this would mean making this style of infinite scroll a first class feature (specified via an option on initialization). That would allow you to redisplay the navigation link in the AJAX response handler, which is where you'd really want to do that.
from infinite-scroll.
Thanks for the in-depth explanation, @elliterate. Can you please provide a link or replicate the issue so we can examine further? Thanks.
from infinite-scroll.
I whipped up a basic test app and put it here: https://github.com/elliterate/infinite_scroll_test. The README should describe how to duplicate the issue and our resolution.
To be clear, I don't actually know if this is the same issue that @macsupport was experiencing. I saw no activity on the issue thread, so I hijacked it.
from infinite-scroll.
Thanks for setting that up @elliterate. Is there anyway you could just have a static site that you could link to?
from infinite-scroll.
It seems to work for me now. Here is a test page:
http://macosxsupport.com/infinitescroll/demos/infinite-scroll2.html
I cloned Dave Desandro's Isotope infinite scroll demo and set it up with a link to trigger. ( at the bottom of the page, "load more")
from infinite-scroll.
Sorry, hit the wrong button. Didn't mean to close it!
from infinite-scroll.
With loadingStart
and loadingEnd
you can do whatever you want now, so this is resolved in my book!
@elliterate, I'll install the site over the weekend and make sure this resolves your issue as well, but I have a feeling that..a) it will, and b) that it's something unrelated to what this was started about.
from infinite-scroll.
Related Issues (20)
- Learning html
- How can I parse the next/prev links of loaded pages? HOT 1
- standby function with sticky footer HOT 1
- infinite-scroll with websockets
- tile HOT 1
- Items shown and total items under view more button HOT 3
- Fackbook hack
- Infinite scroll + JSON
- Cloudflare mirage data-cfsrc lazy load conflict
- my tumblr theme's images not loading after page 1 (Safari only) - Infinite scroll & load more issue HOT 3
- Feature - Combination with Pagination - Load and Scroll to specific Page
- Page Link Issue
- Card Columns Not Working
- Web App For Iqama status
- Infinite-scroll and Joomla
- View Transitions
- Infinite Scroll + Masonry works only sometimes, sometimes it bugs HOT 1
- prefill loads data endlessly when container has display:none HOT 2
- Deprecating the unload event HOT 2
- Rating of a topic and infinite scroll 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 infinite-scroll.