jquery-scrollpaging
Version:
Easy jQuery plugin for scroll pagination(infinite scroll)
217 lines (205 loc) • 11.8 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 4 || jQuery - scroll Paging :: Developed by MAMEDUL ISLAM</title>
</head>
<body>
<h1>Example 4</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 class="scroll-dom" style="width: 320px; height: 400px; max-width: 100%; padding: 8px; outline: 2px solid #0fb16e; 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.min.js"></script>
<script>
jQuery('.scroll-dom').scrollPaging({
requestURL: 'https://scrollpaging.mamedul.repl.co/?page=scrollPaging', // Your request URL for pagination
direction: 'vertical', // Scroll direction
target: 'same', // Target to add retrieve pagination data
minPage: 1,
amount: 128,
affectURL: true,
affectTitle: true,
onBefore: function(evt, scrollDirection, isPositiveScroll, targetPage, isFuncRunnable, opts){
if( jQuery('.scroll-dom').find('.scroll-suggest').length == 0 ){
jQuery('.scroll-dom').append('<div class="scroll-suggest" style="padding: 32px; text-align: center;">Loading..</div>');
}
},
onBlank: function(evt, scrollDirection, isPositiveScroll, targetPage, url, opts){
jQuery('.scroll-dom').find('.scroll-suggest').html('No data found!');
},
onFail : function(evt, scrollDirection, isPositiveScroll, targetPage, url, xhr, textStatus, errorThrown, opts){
jQuery('.scroll-dom').find('.scroll-suggest').html('Fail to load');
},
onError: function(evt, scrollDirection, isPositiveScroll, targetPage, url, xhr, textStatus, errorThrown, opts){
jQuery('.scroll-dom').find('.scroll-suggest').html('Got error on load');
},
onComplete: function(evt, scrollDirection, isPositiveScroll, targetPage, url, data, textStatus, jqXHR, opts){
jQuery('.scroll-dom').find('.scroll-suggest').remove();
},
onMaxPageComplete: function(evt, scrollDirection, isPositiveScroll, targetPage, url, data, textStatus, jqXHR, opts){
if( jQuery('.scroll-dom').length == 0 ){
jQuery('.scroll-dom').append('<div class="scroll-suggest" style="padding: 32px; text-align: center;">Loading..</div>');
}
}
})
</script>
</body>
</html>