load on scroll code example
Example 1: jquery infinite scroll
$(window).scroll(function () {
if ($(document).height() - $(this).height() == $(this).scrollTop()) {
$.ajax({
type: "POST",
url: "index.aspx/GetData",
contentType: "application/json; charset=utf-8",
data: '',
dataType: "json",
success: function (msg) {
if (msg.d) {
$(".container").append(msg.d);
}
},
error: function (req, status, error) {
alert("Error try again");
}
});
}
});
Example 2: 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 3: 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;
}
Example 4: ajax call to load a page on scrolling
CREATE TABLE `posts` (
`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`title` varchar(100) NOT NULL,
`description` text NOT NULL,
`link` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;