Skip to content

Instantly share code, notes, and snippets.

@adammiribyan
Created January 20, 2011 20:25
Show Gist options
  • Save adammiribyan/788583 to your computer and use it in GitHub Desktop.
Save adammiribyan/788583 to your computer and use it in GitHub Desktop.
New entries auto-loading when the scroll bar is around the bottom.
#ajax_loader{
position: fixed;
//position: absolute;
bottom: 20px;
left: 50%;
width: 140px;
padding-top: 55px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
margin-left: -100px;
background: black url("/images/ajax-loader.gif") no-repeat 50% 10px;
opacity: .8;
display: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align: center;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}
$(document).ready(function(){
var windowHeight, hitTest = 20, loaderEl, loadingStatus = false, page = 1;
$(window).bind("resize", function(){
windowHeight = $(document).height() - $(window).height();
});
$(window).resize();
$(window).scroll(function(){
if(!loadingStatus){
if(windowHeight-hitTest < $(window).scrollTop()){
onPageScrolls();
loadingStatus = true;
}
}
});
function onPageScrolls(){
if($("#ajax_loader").length == 0){
loaderEl = $("BODY").append("<div id='ajax_loader'>Загружается следующая страница</div>").find("#ajax_loader");
}
loaderEl.fadeIn("slow");
$.ajax({
url: "/ajax_posts",
success: function(data){
data = $.parseJSON(data);
loaderEl.fadeOut("slow");
if(data.page != data.last_page){
loadingStatus = false;
}
$(".left").append(data.html);
$(window).resize();
}
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment