Scroll infinito

mzaidan · Julho 2, 2015

Prezados, onde eu arrumo algum tutorial (BOM) sobre scroll infinito?

O que eu preciso é carregar notícias na pagina.

Carregar umas 20 por vez. E quando chegar no final (scroll) carregar mais 5 e continuar de 5 em 5.

O código que achei foi esse:

<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>
   ...
   <div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif" /></center></div>
</div>

Mas não consegui fazer ele funcionar.

Talvez seja melhor criar do zero, mas ai eu preciso de uma luz.

Desde já agradeço.

Alisson Zampietro · Julho 2, 2015

Neste tutorial ele explica de uma maneira bem simples como fazer, daí é só pegar seu ajax e inserir dentro da função carregar, tratar o resultado da consulta e exibir através do .append.

mzaidan · Julho 2, 2015

Cara, copiei exatamente o codigo ai e não deu.

Pq será??

mzaidan · Julho 2, 2015

Peguei esse codigo:

https://github.com/igorcosta/blog-exemplos/blob/master/scroll-infinito/scroll_infinito.html

Mas, e agora? Como faço para carregar a minha pagina?

DanielAndrade · Julho 3, 2015

acho que o segredo ta loadmore.php... como ta esse teu arquivo.... num vai dado nenhum ra ele?

wolfphw · Julho 3, 2015

index.php

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://css.cdn.tl/normalize.css">
<meta charset="utf-8">
<title>Scroll Infinito</title>
<style type="text/css">
body, ul,li,img,h4,p{
    margin:auto;
    font-family:'Droid Sans';
}
ul {
	;
	list-style:none;
}
li {
    color:#111;
    height: 100px;
    border-bottom:1px solid #fff;
    padding:10px;
}
li h4 {
    font-weight:400;
    font-size:20px;
    padding:0;
}
li img {
    padding-right:10px;
    float:left;
    display:block;
    vertical-align:text-top;
}
li div {
    display:inline;
}
li p {
    font-weight:300;
    font-size:12px;
}
#conteudo {
    width:100%;
    background:rgba(0,0,0,0.1);
    overflow:auto;
}
</style>


<script type="text/javascript" charset="utf-8" async defer>
var contador = 1;
$(document).ready(function () {
    
	carregar();
	
    $(this).on('scroll', function () {
        if ($(window).scrollTop() + $(window).height() >= $(this).height()) {
            
			// aqui vc faz a busca no arquivo desejado para lhe trazer lista
			$.ajax({
				url: "loadmore.php",
				method: "POST",
				data: { id: contador, nome: "Nome na lista " + contador + " de teste" },
				success: function(html)	{
					if(html) {
						$("#lista").append(html);
						contador = contador + 6;
					} else {
						$('#lista').append('<li><center>No more posts to show.</center></li>');
					}
				}
			});
			
        }
    });
});

function carregar() {
    for (var i = 0; i < 10; i++) {
        $("#lista").append('<li><img src="http://placehold.it/100x100"/><div><h4>' + contador + ' Item</h4><p>Descrição do item '+contador+'</p></div></li>');
        contador++;
    }
}
</script>
</head>

<body>
	<div id="conteudo">
    <ul id="lista"></ul>
</div
</body>
</html>

loadmore.php

<?php
	$id = $_POST["id"];
	$nome = $_POST["nome"];
	
	for ($i=$id;$i<=($id+5);$i++) {
		// o que vc mandar imprimir na tela, vai ser o que vai aparecer na scroll
		echo "<li><img src='http://placehold.it/100x100'/><div><h4>".$i." Itemmmm</h4><p>".$nome."</p></div></li>";
	}
?>

Só vc adequar a sua necessidade

mzaidan · Julho 3, 2015

Não entendi.

Por que tem duas exibições:

Index.php:

function carregar() {
    for (var i = 0; i < 10; i++) {
        $("#lista").append('<li><img src="http://placehold.it/100x100"/><div><h4>' + contador + ' Item</h4><p>Descrição do item '+contador+'</p></div></li>');
        contador++;
    }
}

e loadmore.php:

for ($i=$id;$i<=($id+5);$i++) {
		// o que você mandar imprimir na tela, vai ser o que vai aparecer na scroll
		echo "<li><img src='http://placehold.it/100x100'/><div><h4>".$i." Itemmmm</h4><p>".$nome."</p></div></li>";
	}

Se eu precisar fazer uma consulta em um banco e retornar os dados, onde eu faria a consulta e onde eu exibiria/

Por exemplo, a minha atual pagina, sem scroll infinito, está assim:

<?

ob_start();

$ler = $_COOKIE['user'];

include("conexao.php");



$query=mysql_query("SELECT * from perguntas order by id desc ");



?>

<html>

<head>

<style>

a:link {

    text-decoration: none;

}



a:visited {

    text-decoration: none;

    color: #1E90FF;

}



a:hover {

   color: #A0522D; 

   text-decoration: underline;

}



a:active {

    text-decoration: none;

    color: #1E90FF;

}

</style>

</head>

<table border='0' align='center' width='80%' cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">

<tr><td>    <b>Fórum</b></td></tr>

<tr>

<td>

<table border='0' align='center' width='99%' cellspacing="0" cellpadding="0">

<?

  while ($result = mysql_fetch_array($query)){

    $subject = $result['assunto'];

    $id = $result['id'];

    $texto = $result['texto'];

    $id_user = $result['id_user'];

    $sql_quem_postou = mysql_query("Select * from members where memberID='$id_user'");

    $row = mysql_fetch_array($sql_quem_postou);

    $queme = $row['username'];

?>

<tr bgcolor="#ffffff" style="cursor:default" onMouseOver="javascript:this.style.backgroundColor='#DCDCDC'" onMouseOut="javascript:this.style.backgroundColor='#ffffff'"> 

<td width=3><img src='imagens/imgforum.png'></td><td><a href='show.php?id=<? echo $id."'>"; ?><? echo $subject; ?></a>

<br><font size=2>Postado por: <? echo $queme; ?> </font></td></tr>

<?



}

?>



</td>

</tr>

<tr><td> </td></tr>

</table>

</table>

</html>

Como que eu mostraria os dados que estão sendo exibidos na minha pagina, só que usando esse scroll infinito??

mzaidan · Julho 3, 2015

Olha, andei tentando e to "empacado" nisso:

index.php:

<?
ob_start();

$ler = $_COOKIE['user'];

include("../conexao.php");

?>
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://css.cdn.tl/normalize.css">
<meta charset="utf-8">
<title>English Group</title>
<style>

a:link {

    text-decoration: none;

}



a:visited {

    text-decoration: none;

    color: #1E90FF;

}



a:hover {

   color: #A0522D; 

   text-decoration: underline;

}



a:active {

    text-decoration: none;

    color: #1E90FF;

}

</style>
<style type="text/css">
body, ul,li,img,h4,p{
    margin:auto;
    font-family:'Droid Sans';
}
ul {
	;
	list-style:none;
}
li {
    color:#111;
    height: 100px;
    border-bottom:1px solid #fff;
    padding:10px;
}
li h4 {
    font-weight:400;
    font-size:20px;
    padding:0;
}
li img {
    padding-right:10px;
    float:left;
    display:block;
    vertical-align:text-top;
}
li div {
    display:inline;
}
li p {
    font-weight:300;
    font-size:12px;
}
#conteudo {
    width:100%;
    background:rgba(0,0,0,0.1);
    overflow:auto;
}
</style>


<script type="text/javascript" charset="utf-8" async defer>
var contador = 1;
$(document).ready(function () {
    
	carregar();
	
    $(this).on('scroll', function () {
        if ($(window).scrollTop() + $(window).height() >= $(this).height()) {
            
			// aqui você faz a busca no arquivo desejado para lhe trazer lista
			$.ajax({
				url: "loadmore.php",
				method: "POST",
				data: { id: contador, nome: "Nome na lista " + contador + " de teste" },
				success: function(html)	{
					if(html) {
						$("#lista").append(html);
						contador = contador + 6;
					} else {
						$('#lista').append('<li><center>No more posts to show.</center></li>');
					}
				}
			});
			
        }
    });
});

function carregar() {
    for (var i = 0; i < 10; i++) {
        $("#lista").append('<li><img src="http://placehold.it/100x100"/><div><h4>' + contador + ' Item</h4><p>Descrição do item '+contador+'</p></div></li>');
        contador++;
    }
}
</script>
</head>

<body>
	<div id="conteudo">
    <ul id="lista"></ul>
</div
</body>
</html>

loadmore.php:

<?
ob_start();

$ler = $_COOKIE['user'];

include("../conexao.php");
?>
<table border='0' align='center' width='80%' cellspacing="0" cellpadding="0" bgcolor="#f5f5f5">

<tr>

<td>

<table border='0' align='center' width='99%' cellspacing="0" cellpadding="0">
<?php
	$init 	= 3;
	
	$query=mysql_query("SELECT * from perguntas order by id desc LIMIT $init");

	while ($result = mysql_fetch_array($query)){
	  $subject = $result['assunto'];
          $id = $result['id'];
          $texto = $result['texto'];
          $id_user = $result['id_user'];
          $sql_quem_postou = mysql_query("Select * from members where memberID='$id_user'");
          $row = mysql_fetch_array($sql_quem_postou);
          $queme = $row['username'];
          
		// o que você mandar imprimir na tela, vai ser o que vai aparecer na scroll
		//echo "<li><img src='http://placehold.it/100x100'/><div><h4>".$i." Itemmmm</h4><p>".$nome."</p></div></li>";
?>

<tr bgcolor="#ffffff" style="cursor:default" onMouseOver="javascript:this.style.backgroundColor='#DCDCDC'" onMouseOut="javascript:this.style.backgroundColor='#ffffff'"> 

<td width=3><img src='../imagens/imgforum.png'></td><td><a href='show.php?id=<? echo $id."'>"; ?><? echo $subject; ?></a>

<br><font size=2>Postado por: <? echo $queme; ?> </font></td></tr>

<?

}

?>
</td>

</tr>

<tr><td> </td></tr>

</table>

</table>

</html>

Ele mostra o sql certinho.

Meu problema consiste no seguinte:

No index.php, tenho o seguinte:

function carregar() {
    for (var i = 0; i < 10; i++) {
        $("#lista").append('<li><img src="http://placehold.it/100x100"/><div><h4>' + contador + ' Item</h4><p>Descrição do item '+contador+'</p></div></li>');
        contador++;
    }
}

Isso sendo um javascript.

Como eu faço uma consulta php/mysql ai?

E, segundo, quando o scroll chega ao final fica repetindo sempre. Como que faz para parar quando chegar ao final?

Grato.

wolfphw · Julho 3, 2015

Esse ai vc desconsidera... ele nesse exemplo está só para encher o exemplo...

Vc vai fazer normalmente com a consulta SQL que vc já faz normalmente no local onde vc quer

wolfphw · Julho 3, 2015

Outra coisa... não utiliza a TAG <? sem o php... <?php

Arquivado

Scroll infinito

Recommended Posts

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alisson Zampietro 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

DanielAndrade 28

Compartilhar este post

Link para o post

Compartilhar em outros sites

wolfphw 60

Compartilhar este post

Link para o post

Compartilhar em outros sites

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

mzaidan 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

wolfphw 60

Compartilhar este post

Link para o post

Compartilhar em outros sites

wolfphw 60

Compartilhar este post

Link para o post

Compartilhar em outros sites

comando like (Mysql) no php

mostrar quanto tempo foi postado um conteudo

lendo RSS com PHP mostrando a imagem de preview

Fóruns

Tempo Real

Informação importante