Hey i test a loadmore script which i found online. But its not loading the Content when you done scrolling down. It is loading it when you complete scrolled up xD !
What is wrong ?
Here my Code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(window).scroll(function()
{
if($(window).scrollTop() == $(document).height() - $(window).height())
{
$('div#loadmoreajaxloader').show();
$.ajax({
url: "loadmore.php",
success: function(html)
{
if(html)
{
$("#postswrapper").append(html);
$('div#loadmoreajaxloader').hide();
}else
{
$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
}
}
});
}
});
</script>
<div id="postswrapper">
<div class="item">content</div>
Hey<br>
Hey<br>
Hey<br>
Hey<br>
Hey<br>
Hey<br>
---- MORE ADDED HERE BUT CUTTED OUT CAUSE WOULD BE VERY LONG! ----
Hey<br>
<div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif" /></center></div>
</div>
Loadmore.php contains only a echo and then example div with contents ..
Console is also empty.
Thanks to everyone :)
EDIT
Here is a working JSFIDDLE i copied that but still same Problem... Thanks to codegaze for this Fiddle.
EDIT 2 Here my Code which is working in JSFIDDLE!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("This is the end");
}
});
});
</script>
<div id="postswrapper">
<div class="item">content</div>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
<br>Hey
--- CUTTED OUT SOME MORE---
<br>Hey
<br>Hey
<br>Hey
<br>---- MORE ADDED HERE BUT CUTTED OUT CAUSE WOULD BE VERY LONG! ---- Hey
<br>
<div id="loadmoreajaxloader" style="display:none;">
<center>
<img src="ajax-loader.gif" />
</center>
</div>
I also downloaded the Source from the Example which i found online... and its working ... the only different i can see on the first View is that its includes Jquery 1.4.4 ????
GITHUB EXAMPLE SOURCE