jquery-scrollpaging
Version:
Easy jQuery plugin for scroll pagination(infinite scroll)
223 lines (209 loc) • 11.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example 2 || jQuery - scroll Paging :: Developed by MAMEDUL ISLAM</title>
</head>
<body>
<h1>Example 2</h1>
<a href='https://github.com/mamedul/jquery-scrollpaging/wiki'>Documentations</a>
<br>
<a href='https://mamedul.github.io/dev-projects/jquery-scrollpaging/'>Project Homepage</a>
<br>
<a href='https://mamedul.github.io'>Developer</a>
<br>
<br>
<span class="scp-status"></span>
<br>
<hr>
<br>
<div id="scroller" style="width: 320px; height: 400px; max-width: 100%; overflow: auto;">
<div style="display: block; color: #111111; background-color: #9e852377 ; background-color:rgba(158,133,35,0.50); margin-bottom: 12px; box-shadow: 2px 2px 4px #333333;">
<div style="padding: 8px; margin-bottom: 12px;"> <strong>rgb(158,133,35)/#9e8523 </strong></div>
<div style="padding: 8px;">
<div style="display: block; min-height: 128px; padding: 8px; background-color: #9e8523 ;background-color:rgb(158,133,35);">
<span style="display: inline; background-color: #ffffff; background-color: #ffffff77; color: #333333;">
Main color(hex): #9e8523<br>
Main color(rgb): rgb(158,133,35)<br><br>
Light color(hex): #9e852377<br>
Light color(rgb): rgba(158,133,35,0.50)<br>
</span>
</div>
</div>
</div><div style="display: block; color: #111111; background-color: #6d3d0977 ; background-color:rgba(109,61,9,0.50); margin-bottom: 12px; box-shadow: 2px 2px 4px #333333;">
<div style="padding: 8px; margin-bottom: 12px;"> <strong>rgb(109,61,9)/#6d3d09 </strong></div>
<div style="padding: 8px;">
<div style="display: block; min-height: 128px; padding: 8px; background-color: #6d3d09 ;background-color:rgb(109,61,9);">
<span style="display: inline; background-color: #ffffff; background-color: #ffffff77; color: #333333;">
Main color(hex): #6d3d09<br>
Main color(rgb): rgb(109,61,9)<br><br>
Light color(hex): #6d3d0977<br>
Light color(rgb): rgba(109,61,9,0.50)<br>
</span>
</div>
</div>
</div><div style="display: block; color: #111111; background-color: #a2324577 ; background-color:rgba(162,50,69,0.50); margin-bottom: 12px; box-shadow: 2px 2px 4px #333333;">
<div style="padding: 8px; margin-bottom: 12px;"> <strong>rgb(162,50,69)/#a23245 </strong></div>
<div style="padding: 8px;">
<div style="display: block; min-height: 128px; padding: 8px; background-color: #a23245 ;background-color:rgb(162,50,69);">
<span style="display: inline; background-color: #ffffff; background-color: #ffffff77; color: #333333;">
Main color(hex): #a23245<br>
Main color(rgb): rgb(162,50,69)<br><br>
Light color(hex): #a2324577<br>
Light color(rgb): rgba(162,50,69,0.50)<br>
</span>
</div>
</div>
</div><div style="display: block; color: #111111; background-color: #13ef1e77 ; background-color:rgba(19,239,30,0.50); margin-bottom: 12px; box-shadow: 2px 2px 4px #333333;">
<div style="padding: 8px; margin-bottom: 12px;"> <strong>rgb(19,239,30)/#13ef1e </strong></div>
<div style="padding: 8px;">
<div style="display: block; min-height: 128px; padding: 8px; background-color: #13ef1e ;background-color:rgb(19,239,30);">
<span style="display: inline; background-color: #ffffff; background-color: #ffffff77; color: #333333;">
Main color(hex): #13ef1e<br>
Main color(rgb): rgb(19,239,30)<br><br>
Light color(hex): #13ef1e77<br>
Light color(rgb): rgba(19,239,30,0.50)<br>
</span>
</div>
</div>
</div><div style="display: block; color: #111111; background-color: #ff71cf77 ; background-color:rgba(255,113,207,0.50); margin-bottom: 12px; box-shadow: 2px 2px 4px #333333;">
<div style="padding: 8px; margin-bottom: 12px;"> <strong>rgb(255,113,207)/#ff71cf </strong></div>
<div style="padding: 8px;">
<div style="display: block; min-height: 128px; padding: 8px; background-color: #ff71cf ;background-color:rgb(255,113,207);">
<span style="display: inline; background-color: #ffffff; background-color: #ffffff77; color: #333333;">
Main color(hex): #ff71cf<br>
Main color(rgb): rgb(255,113,207)<br><br>
Light color(hex): #ff71cf77<br>
Light color(rgb): rgba(255,113,207,0.50)<br>
</span>
</div>
</div>
</div><div style="display: block; color: #111111; background-color: #7bac2f77 ; background-color:rgba(123,172,47,0.50); margin-bottom: 12px; box-shadow: 2px 2px 4px #333333;">
<div style="padding: 8px; margin-bottom: 12px;"> <strong>rgb(123,172,47)/#7bac2f </strong></div>
<div style="padding: 8px;">
<div style="display: block; min-height: 128px; padding: 8px; background-color: #7bac2f ;background-color:rgb(123,172,47);">
<span style="display: inline; background-color: #ffffff; background-color: #ffffff77; color: #333333;">
Main color(hex): #7bac2f<br>
Main color(rgb): rgb(123,172,47)<br><br>
Light color(hex): #7bac2f77<br>
Light color(rgb): rgba(123,172,47,0.50)<br>
</span>
</div>
</div>
</div><div style="display: block; color: #111111; background-color: #5fb3e177 ; background-color:rgba(95,179,225,0.50); margin-bottom: 12px; box-shadow: 2px 2px 4px #333333;">
<div style="padding: 8px; margin-bottom: 12px;"> <strong>rgb(95,179,225)/#5fb3e1 </strong></div>
<div style="padding: 8px;">
<div style="display: block; min-height: 128px; padding: 8px; background-color: #5fb3e1 ;background-color:rgb(95,179,225);">
<span style="display: inline; background-color: #ffffff; background-color: #ffffff77; color: #333333;">
Main color(hex): #5fb3e1<br>
Main color(rgb): rgb(95,179,225)<br><br>
Light color(hex): #5fb3e177<br>
Light color(rgb): rgba(95,179,225,0.50)<br>
</span>
</div>
</div>
</div><div style="display: block; color: #111111; background-color: #8169de77 ; background-color:rgba(129,105,222,0.50); margin-bottom: 12px; box-shadow: 2px 2px 4px #333333;">
<div style="padding: 8px; margin-bottom: 12px;"> <strong>rgb(129,105,222)/#8169de </strong></div>
<div style="padding: 8px;">
<div style="display: block; min-height: 128px; padding: 8px; background-color: #8169de ;background-color:rgb(129,105,222);">
<span style="display: inline; background-color: #ffffff; background-color: #ffffff77; color: #333333;">
Main color(hex): #8169de<br>
Main color(rgb): rgb(129,105,222)<br><br>
Light color(hex): #8169de77<br>
Light color(rgb): rgba(129,105,222,0.50)<br>
</span>
</div>
</div>
</div><div style="display: block; color: #111111; background-color: #a6f4df77 ; background-color:rgba(166,244,223,0.50); margin-bottom: 12px; box-shadow: 2px 2px 4px #333333;">
<div style="padding: 8px; margin-bottom: 12px;"> <strong>rgb(166,244,223)/#a6f4df </strong></div>
<div style="padding: 8px;">
<div style="display: block; min-height: 128px; padding: 8px; background-color: #a6f4df ;background-color:rgb(166,244,223);">
<span style="display: inline; background-color: #ffffff; background-color: #ffffff77; color: #333333;">
Main color(hex): #a6f4df<br>
Main color(rgb): rgb(166,244,223)<br><br>
Light color(hex): #a6f4df77<br>
Light color(rgb): rgba(166,244,223,0.50)<br>
</span>
</div>
</div>
</div><div style="display: block; color: #111111; background-color: #d701e777 ; background-color:rgba(215,1,231,0.50); margin-bottom: 12px; box-shadow: 2px 2px 4px #333333;">
<div style="padding: 8px; margin-bottom: 12px;"> <strong>rgb(215,1,231)/#d701e7 </strong></div>
<div style="padding: 8px;">
<div style="display: block; min-height: 128px; padding: 8px; background-color: #d701e7 ;background-color:rgb(215,1,231);">
<span style="display: inline; background-color: #ffffff; background-color: #ffffff77; color: #333333;">
Main color(hex): #d701e7<br>
Main color(rgb): rgb(215,1,231)<br><br>
Light color(hex): #d701e777<br>
Light color(rgb): rgba(215,1,231,0.50)<br>
</span>
</div>
</div>
</div><div style="display: block; color: #111111; background-color: #0fb16e77 ; background-color:rgba(15,177,110,0.50); margin-bottom: 12px; box-shadow: 2px 2px 4px #333333;">
<div style="padding: 8px; margin-bottom: 12px;"> <strong>rgb(15,177,110)/#0fb16e </strong></div>
<div style="padding: 8px;">
<div style="display: block; min-height: 128px; padding: 8px; background-color: #0fb16e ;background-color:rgb(15,177,110);">
<span style="display: inline; background-color: #ffffff; background-color: #ffffff77; color: #333333;">
Main color(hex): #0fb16e<br>
Main color(rgb): rgb(15,177,110)<br><br>
Light color(hex): #0fb16e77<br>
Light color(rgb): rgba(15,177,110,0.50)<br>
</span>
</div>
</div>
</div><div style="display: block; color: #111111; background-color: #f324f377 ; background-color:rgba(243,36,243,0.50); margin-bottom: 12px; box-shadow: 2px 2px 4px #333333;">
<div style="padding: 8px; margin-bottom: 12px;"> <strong>rgb(243,36,243)/#f324f3 </strong></div>
<div style="padding: 8px;">
<div style="display: block; min-height: 128px; padding: 8px; background-color: #f324f3 ;background-color:rgb(243,36,243);">
<span style="display: inline; background-color: #ffffff; background-color: #ffffff77; color: #333333;">
Main color(hex): #f324f3<br>
Main color(rgb): rgb(243,36,243)<br><br>
Light color(hex): #f324f377<br>
Light color(rgb): rgba(243,36,243,0.50)<br>
</span>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="../src/jquery-scrollpaging-v1.0.0.js"></script>
<script>
var scp = jQuery('#scroller').scrollPaging({
'target': 'this',
'amount' : 320,
'requestURL' : 'https://scrollpaging.mamedul.repl.co/?page=scrollPaging',
'showURL' : '?page=scrollPaging',
//'currentPage' : 1,
'onBefore' : function(evt, scrollDirection, isPositiveScroll, targetPage, isFuncRunnable, opts){
$('.scp-status').html('Loading..');
opts.developer = "MAMEDUL ISLAM";
opts.time = Date.now();
},
'onSuccess' : function(evt, myScrollDirection, isMyPositiveScroll, targetPage, url, data, textStatus, jqXHR, opts){
//console.log(evt);
//console.log(page);
//console.log(url);
//console.log(evt.type);
//console.log(data);
//console.log(status);
//console.log(xhr);
$('.scp-status').html('Success');
},
'onFail' : function(evt, myScrollDirection, isMyPositiveScroll, targetPage, url, xhr, textStatus, errorThrown, opts){
$('.scp-status').html('Fail');
},
'onComplete' : function(evt, scrollDirection, isMyPositiveScroll, targetPage, url, data, textStatus, jqXHR, opts){
setTimeout( function(){
$('.scp-status').html( $('.scp-status').html() + ' complete' );
},200);
}
});
scp.done( function(evt, scrollDirection, isMyPositiveScroll, targetPage, url, data, textStatus, jqXHR, opts){
console.log(evt, myScrollDirection);
} );
console.log(scp);
//console.log(done);
</script>
</body>
</html>