jquery-infinite-scroll-helper
Version:
A lightweight implementation of the infinite scroll mechanic. By providing two essential callbacks, loadMore and doneLoading, the jQuery Infinite Scroll Helper plugin makes it a breeze to add infinite scrolling functionality to your page.
188 lines (164 loc) • 4.63 kB
HTML
<html>
<head>
<title>jQuery Infinite Scroll Helper Example</title>
<script src="../lib/jquery-1.8.2.min.js"></script>
<script src="../jquery.infinite-scroll-helper.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
.content {
height: 1100px;
background-color: red;
}
#wrapper {
position: relative;
margin-left: 200px;
}
#wrapper .loader-wrap {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding-left: 200px;
box-sizing: border-box;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
perspective: 400px;
}
#ov-hidden {
position: fixed;
z-index: 10;
width: 200px;
height: 100%;
border: 1px solid white;
}
#ov-content-wrapper {
overflow-y: auto;
position: relative;
height: 100%;
}
#ov-hidden .load-more {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: none;
}
#ov-hidden.loading .load-more {
display: block;
}
#ov-hidden .content {
height: 800px;
background-color: salmon;
}
#wrapper .loader {
display: block;
padding: 20px 0;
width: 100%;
opacity: 0;
color: #999;
font: 35px Helvitica,Arial,sans-serif;
background-color: white;
text-align: center;
-webkit-box-shadow: 0px -1px 5px rgba(0,0,0,.4);
box-shadow: 0px -1px 5px rgba(0,0,0,.4);
-webkit-transition: all 450ms ease-out;
-moz-transition: all 450ms ease-out;
-ms-transition: all 450ms ease-out;
transition: all 450ms ease-out;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: translate3d( 0px, 0px, 0px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, 0px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, 0px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, 0px ) rotateX( 90deg );
}
#wrapper.loading .loader {
opacity: .9;
-webkit-transform: translate3d( 0px, 0px, 0px ) rotateX( 0deg );
-moz-transform: translate3d( 0px, 0px, 0px ) rotateX( 0deg );
-ms-transform: translate3d( 0px, 0px, 0px ) rotateX( 0deg );
transform: translate3d( 0px, 0px, 0px ) rotateX( 0deg );
}
</style>
<script>
var loadingCount = 0,
totalPages = 4;
var colors = ['red', 'blue', 'green', 'yellow', 'salmon', 'purple'];
$(function() {
(function() {
var pageCount;
// using jQuery plugin instantiation
$('#wrapper').infiniteScrollHelper({
loadMore: function(page, done) {
// ajax request would be kicked off here
pageCount = page;
$('.loader').text('Loading Page ' + page + '...');
// simulating loading of some content
setTimeout(
function() {
var colorIndex = (pageCount - 1) % colors.length;
$('#wrapper').append('<div class="content" style=" background-color: ' + colors[colorIndex] + ';">');
if (pageCount == totalPages) { // if we are at the last page, destroy the plugin instance
console.log('desroying');
$('#wrapper').infiniteScrollHelper('destroy');
}
done();
}
, 2000);
},
bottomBuffer: 80,
// using the triggerInitialLoad option
triggerInitialLoad: true
})
}());
(function() {
var pageCount;
// using standard constructor instantiation
var ish = new InfiniteScrollHelper($('#ov-content-wrapper')[0], {
loadMore: function(page, done) {
console.log('load more');
// ajax request would be kicked off here
pageCount = page;
$('.load-more').text('Loading Page ' + page + '...');
// simulating loading of some content
setTimeout(
function() {
var colorIndex = (pageCount - 1) % colors.length;
$('#ov-content-wrapper').append('<div class="content" style=" background-color: ' + colors[colorIndex] + ';">');
if (pageCount == totalPages) { // if we are at the last page, destroy the plugin instance
console.log('destroying');
ish.destroy();
}
done();
}
, 2000);
},
bottomBuffer: 80,
loadingClassTarget: '#ov-hidden'
});
}());
});
</script>
</head>
<body>
<div id="ov-hidden">
<div id="ov-content-wrapper">
<div class="content">
</div>
</div>
<div class="load-more">Loading...</div>
</div>
<div id="wrapper">
<div class="loader-wrap">
<div class="loader">Loading...</div>
</div>
</div>
</body>
</html>