Limite de atualizações igual twitter

AllNet · Julho 29, 2011

Olá pessoal, não sei se estou nu lugar certo, porem vamos lá.

Gostaria de fazer uma pagina que faça uma consulta no banco de dados e mostre por exemplo os 10 ultimos registros, só que no final da pagina tenha um botao para mostar mais 10 registros e assim por diante, ou quando rolar a pagina ate o fim automaticamente ela mostre mais 10 registros. Quanto a consulta no banco eu já sei fazer, preciso apenas de ajuda para montar esse efeito. Como se chama esse efeito? Como Fazer?

Obrigado pela atenção.

vini_loock · Julho 29, 2011

http://www.webmaster.pt/botao-more-twitter...-php-10132.html

AllNet · Julho 30, 2011

http://www.webmaster.pt/botao-more-twitter...-php-10132.html

Bom dia,

vini_loock é isso mesmo que preciso, porem não estou conseguindo mostrar os registros na pagina.

Obrigado.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Twitter Style Load More Result Button</title>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.livequery.js"></script>
<style>
#body {

    text-align:justify;
    overflow:hidden;
    color:#333;
    padding:20px;
    height:60px;
    width:600px;

    text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;
    filter: dropshadow(color=#e5e5ee,offX=0,offY=1);
    font-family:"Courier New", Courier, monospace; font-size:12px;
}
#body img{ float:left;}

#body div{ float:left; width:470px;
    -moz-border-radius: 6px;
    margin-right:8px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    height:60px;
    margin-left:8px;
    padding:5px;
    background-color:#CBD9EF;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);border:solid #919b9d 4px;}

#bottomMoreButton{
    width:470px;
    -moz-border-radius: 6px;
    margin-right:8px;
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    height:23px;
    margin-left:8px;
    padding:5px;
    margin-top:10px;
    border: solid #666 1px;

    background-color:#D2D2D2;
    margin-bottom:40px;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#666666; font-size:14px;
    font-weight:bolder;
    }
#bottomMoreButton a{
     color:#333; text-decoration:none;
}
#bottomMoreButton:hover{ background-color:#E5E5E5; cursor:pointer;}
h1 { font: bold 30px/30px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
</style>
<script type="text/javascript">

$(document).ready(function(){

    //more records show

    $('#bottomMoreButton').livequery("click", function(e){

        var next =  $(this).find('a').attr('id').replace('more_','');
        $('#load').html('Loading...');

        $.post("posts.php?show_more_post="+next, {

        }, function(response){

            $('#bottomMoreButton').remove();
            $('#posting').append($(response).fadeIn('slow'));
            $('#load').html('More');

        });

    });

});

</script>
</head>

<body>

    <h1> Twitter Style More Button To Load Records</h1>
    <div align="center" id="posting">

            <div id="body" align="center">
            <div id="load"></div>
            </div>



        <div id="bottomMoreButton">

            <a id="more_5" class="more_records" href="java script: void(0)"><span id="load">More</span></a>
        </div>

    </div>



</body>
</html>

AllNet · Julho 30, 2011

Consegui resolver... os primeiros 5 registros eu fiz a consulta na pagina inicial, depois quando clica no botao a pagina posts.php vai consultando de 5 em 5.

esta certo isso? ao menos funcionou, hehe.

Brigadão vini_loock.

Entrar

Limite de atualizações igual twitter

Pergunta

AllNet

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

vini_loock

Link para o comentário

Compartilhar em outros sites

AllNet

Link para o comentário

Compartilhar em outros sites

AllNet

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades