javascript - trying to call an alert at window bottom for pagination -

javascript - trying to call an alert at window bottom for pagination -

i trying phone call alert @ bottom of screen, don't why calling when scroll @ top.

$(window).scroll(function(){ if($(document).height()==$(window).scrolltop()+$(window).height()){ alert($(document).height()); //1926 @ top alert($(window).scrolltop()+$(window).height()); //1926 @ top } });

my page contains images taking time load, alert phone call on top.

i working on chrome , mozilla. jquery using also, sure bug due this:

http://www.webski.com.au/blog/web-design/blocksit-js-jquery-plugin-for-dynamic-grid-layout-like-pinterest/23-oct-2013/0051/

actually want pagination on jquery.

this illustration of how it.

http://jsfiddle.net/qpnamqfd/1/

jq:

$(document).ready(function() { //calls function creates bloksit $(window).load( function() { initbloksit(); }); //window resize var currentwidth = 1100; $(window).resize(function() { var winwidth = $(window).width(); var conwidth; if(winwidth < 660) { conwidth = 440; col = 2 } else if(winwidth < 880) { conwidth = 660; col = 3 } else if(winwidth < 1100) { conwidth = 880; col = 4; } else { conwidth = 1100; col = 5; } if(conwidth != currentwidth) { currentwidth = conwidth; $('#container').width(conwidth); $('#container').blocksit({ numofcol: col, offsetx: 8, offsety: 8 }); } }); var pagenum=1;// current page //if bottom of page //upload new photo page $(window).scroll(function(){ var end=($(window).scrolltop() == ($(document).height() - $(window).height())); if(end==true) { pagenum++; getpage(pagenum); } }) //create bloksit function initbloksit() { //blocksit define $('#container').blocksit({ numofcol: 5, offsetx: 8, offsety: 8 }); } function getpage(pagenum) { //ajax phone call in order receive new page image //return json array //{img:'xxx','title':'xxx','desc':'xxx','meta':'xxx','img':'xxx'} $.post('getpage.php' ,{ 'page':pagenum, } ,function(data, textstatus, jqxhr){ $.each(data,function(i,item){ //create new image holder var html = '<div class="grid">'; html += '<div class="imgholder">'; html += '<img src="'+item.img+'" />'; html += '</div>'; html += '<strong>'+item.title+'</strong>'; html += '<p>'+item.desc+'</p>'; html += '<div class="meta">'+item.meta+'</div>'; html += '</div>'; //add image holder container $('#container').append(html); }) //after adding holders recreate blocksit initbloksit() } ,'json' ) } });

php:

getpage.php should homecoming this

[{"title":"title 0/1","desc":"lorem ipsum 0/1","meta":"by meta 0/1","img":"http://placehold.it/175&text=0/1"}, {"title":"title 1/1","desc":"lorem ipsum 1/1","meta":"by meta 1/1","img":"http://placehold.it/175&text=1/1"} ,{"title":"title 2/1","desc":"lorem ipsum 2/1","meta":"by meta 2/1","img":"http://placehold.it/175&text=2/1"}, {"title":"title 3/1","desc":"lorem ipsum 3/1","meta":"by meta 3/1","img":"http://placehold.it/175&text=3/1"},]

javascript jquery scroll browser