On-demand content problems (Infinite scroll)

Question

I am trying to make the content increase check the user descends the scroll bar, 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 discover it no longer looks...

the line with problem is this:

if ($(this).scrollTop() + $(this).height() >= altura) {

PHP AND MYSQL IS WORKING PERFECTLY...it lists the first 5 results...

Answer 1

I made an example calculating the distance of the div Loader in relation to the screen. When the Loader enter the screen, the content will be loaded. In the example I simulate a page with height of 2000px to illustrate the input and output of the div Loader and calculated values. You can see here at jsfiddle.

This server template for you to use the div loader as reference. It is also possible to anticipate the space with $('#loader').offset().top - 50, so the event will run 50px before the Clicker hits the screen. When you enter the Upload, the content will already be loaded, without the user having to reach the end to load more.

I 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 for you to keep limit = 5 e offset = 0 as parameters for SQL.

1. This 2 information has not been validated
2. Paging can be changed and made with more records than defined.

I did an update on jsfiddle and includes page numbering as class attribute - you can use otherwise, change 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 Upload via ajax you assign +1 and have your Upload with the reference to page 2, and so on.

_{JS incrementing pagination as HTML attribute}

$(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 );
        });
    }
});

Answer 2

After the reply of @Papa Charlie I had a necessary idea 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 comes to the end of the roll...

Jsfiddle