Jump to content
Sign in to follow this  
mzaidan

Scroll infinito

Recommended Posts

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.

  • +1 1

Share this post


Link to post
Share on other sites

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.

  • +1 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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??

  • Confuso 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.