how to dea with jquery ajax and scrolling page code example
Example 1: ajax call to load a page on scrolling
$(document).ready(function(){
$(window).scroll(function(){
var position = $(window).scrollTop();
var bottom = $(document).height() - $(window).height();
if( position == bottom ){
var row = Number($('#row').val());
var allcount = Number($('#all').val());
var rowperpage = 3;
row = row + rowperpage;
if(row <= allcount){
$('#row').val(row);
$.ajax({
url: 'fetch_details.php',
type: 'post',
data: {row:row},
success: function(response){
$(".post:last").after(response).show().fadeIn("slow");
}
});
}
}
});
});
Example 2: ajax call to load a page on scrolling
.container{
width: 55%;
margin: 0 auto;
border: 0px solid black;
padding: 10px 0px;
}
.post{
width: 97%;
min-height: 200px;
padding: 5px;
border: 1px solid gray;
margin-bottom: 15px;
}
.post h1{
letter-spacing: 1px;
font-weight: normal;
font-family: sans-serif;
}
.post p{
letter-spacing: 1px;
text-overflow: ellipsis;
line-height: 25px;
}
.more{
color: blue;
text-decoration: none;
letter-spacing: 1px;
font-size: 16px;
}