Problems with content on demand (infinite scroll)
I'm trying to make the content increase confirm the user descends the scrollbar, but my code stopped here..
<script>
$(document).ready(function() {
var limit = 5;
var offset = 0;
var altura = 1000;
$.post( "artes4.php", { limit: limit, offset: offset }, function( data2 ) {
$( "#artes4" ).html( data2 );
});
});
$(document).ready(function() {
$(document).scroll(function() {
if ($(this).scrollTop() + $(this).height() >= altura) {
var limit = 5;
var offset = 0;
var altura = 1000;
var limit = limit + 15;
var offset = offset + 15;
var altura = altura + 1000;
$.post( "artes4.php", { limit: limit, offset: offset }, function( data ) {
$( "#artes4" ).append( data );
});
} // fim do if
}); // fim scroll
});
</script>
PHP
$limit=$_POST['limit'];
$offset=$_POST['offset'];
$query = mysql_query("SELECT * FROM `artes4` ORDER BY `imagem` ASC LIMIT $limit OFFSET $offset") or die(mysql_error());
while ($row = mysql_fetch_array($query))
It shows the first results only that when I descend it does not appear anymore...
The line with problem is this:
if ($(this).scrollTop() + $(this).height() >= altura) {
PHP AND MYSQL ARE WORKING PERFECTLY...it lists the first 5 results...
2 answers
I made an example by calculating the distance of the div loader from the screen. When the loader enters the screen, the content is loaded. In the example I simulate a page with height of 2000px to illustrate the input and output of the div loader and the calculated values. Can see here at jsfiddle.
This template server for you to use the Div loader as a reference. It is also possible to anticipate the space with $('#loader').offset().top - 50, so the event will run 50px before the loader enters the screen. When the loader enters, the content will already be loaded, without the user having to reach the end to load more.
Created another jsfiddle with a simple example, but closer to a infinite scroll, but only as an illustration of how to calculate the input of an element that serves to trigger the event. Adapt to your need.
content page 1
content page 2
content page 3
...
loading next page 
JS base
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var elementOffset = $('#loader').offset().top;
var distance = (elementOffset - scrollTop);
if( distance < $(window).height() ){
// elemento 'loader' entrou na tela, hora de carregar mais uma página
$.post( 'artes4.php' , { ... }, function( data2 ){
// adiciona o conteudo na div content mantendo as páginas anteriores
$( "#content" ).append( data2 );
});
}
});
It's not a good idea to keep limit = 5 e offset = 0 as parameters for SQL.
- missing to validate these 2 information
- you can change and paginate with more records than the set.
I made an update on jsfiddle and includes page numbering as attribute class - you can use otherwise, change the attribute, hidden field... The first listing you assign 1 <div id="loader" class="1">, which corresponds to Page 1 of any listing. Later when you do the loader via ajax you assign +1 and have your loader with the reference to Page 2, and so on.
js incrementing pagination as attribute HTML
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var elementOffset = $('#loader').offset().top;
var distance = (elementOffset - scrollTop);
var i = Number( $('#loader').attr('class') ) + 1; // atribui +1 ao loader
if( distance < $(window).height() ){
$('#content').append('<p>Página' + i + '</p>');
$('#loader').attr( 'class' , i )
// elemento 'loader' entrou na tela, hora de carregar mais uma página
// `i` é a representação da página requisitada
$.post( 'artes4.php' , { pagina: i }, function( data2 ){
// adiciona o conteudo na div content mantendo as páginas anteriores
$( "#content" ).append( data2 );
});
}
});
After @ Papa Charlie's answer I had an idea needed to work on my system:
<script>
var i = 0;
var b = 1;
var itens = 10;
$(window).scroll(function() {
if( $(window).scrollTop() >= $(window).height() - screen.height )
{
i++;
b++;
if( i <= itens )
{
$.post( "artes4.php", { pagina: b, total: total }, function( data ) {
$( ".artes4" ).append( data );
});
}
}
});
</script>
Only gives the append when it reaches the end of the scroll...