This piece of code is creating a infinite scroll effect on my site and it works perfectly but only in the latest version of Chrome. Safari, FF & IE do not initialise the ajax call and instead use the fall back which is a Load more button.
Although it isn't working, I've created a jsFiddle that represents the markup I'm using in my Shopify collection page to hopefully give you a better idea of my setup: http://jsfiddle.net/qpka6pyv/1/ Am I doing something wrong?
FYI I'm using the doTimeout plugin to create the delay (not entirely necessary) and I'm attaching and loading more items within the scrollable div called '.st-content' not the html or body. So when you scroll to the bottom of '.st-content' load the next X amount of products. Currently this only works in Chrome.
Here's the jQuery:
function ScrollExecute() {
if($(document).height() - 350 < ($(document).scrollTop() + $(window).height())) {
scrollNode = $('.scrollnode #more').last();
scrollURL = $('.scrollnode #more p a').last().attr("href");
if(scrollNode.length > 0 && scrollNode.css('display') != 'none') {
$.ajax({
type: 'GET',
url: scrollURL,
beforeSend: function() {
scrollNode.clone().empty().insertAfter(scrollNode).append('<img src=\"{{ "loading.gif" | asset_url }}\" />');
scrollNode.hide();
},
success: function(data) {
// remove loading feedback
scrollNode.next().remove();
var filteredData = $(data).find(".scrollnode");
filteredData.insertBefore( $("#product-list-foot") );
},
dataType: "html"
});
}
}
}
$(document).ready(function () {
$('.st-content').scroll(function(){
$.doTimeout( 'scroll', 100, ScrollExecute);
});
});
As a reference I got the code from this blog article: http://www.davecap.com/post/9675189741/infinite-scroll-for-shopify-collections