Limite de atualizações igual twitter

AllNet · July 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 · July 29, 2011

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

AllNet · July 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 · July 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.

Sign In

Limite de atualizações igual twitter

Question

AllNet

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

vini_loock

Link to comment

Share on other sites

AllNet

Link to comment

Share on other sites

AllNet

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity