Load more results after scroll to end of list
HTML
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div class="scrollpane.">
<ul id="results" />
</div>
<div align="center" style="display:none;">
<button id="load_more_button"><img src="http://www.hamabeads.com/library/ajaxloader.gif" class="animation_image" style="float:left;"> Load More</button> <!-- load button -->
</div>
<div class="moreData">
<a id="more-button" href="#">
<div class="loading-box">
<div class="stw-sprite-3 sprite-more-messages"></div>
<h3>Load more logins</h3>
</div>
</a>
</div>
CSS
.blogBox {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
JavaScript
var track_page=1;
function loadResults() {
$(".animation_image").show();
var result = "";
for (var i = 0; i < 3; i++) {
result += "<li>Result " + i + "</li>";
}
$.ajax({
url: "/echo/html/",
type: "post",
data: {
html: result,
delay: 2
},
beforeSend: function(xhr) {
$("#results").after($("<li class='loading'>Loading...</li>").fadeIn('slow')).data("loading", true);
},
success: function(data) {
var $results = $("#results");
$(".loading").fadeOut('fast', function() {
$(this).remove();
});
var $data = $(data);
$data.hide();
$results.append($data);
$data.fadeIn();
$results.removeData("loading");
$(".animation_image").hide();
track_page +=1;
}
});
};
$(function() {
loadResults();
$(".scrollpane").scroll(function() {
var $this = $(this);
var $results = $("#results");
if (!$results.data("loading")) {
if ($this.scrollTop() + $this.height() == $results.height()) {
loadResults();
}
}
});
});
$("#more-button").click(function (e) { //user clicks on button
track_page++; //page number increment everytime user clicks load button
loadResults(); //load content
});