Saaaalve galerinha! Bem, estou desenvolvendo um chat com PHP + JS + MySQL... A parte do chat está okay já [:smiley:] Mas o que está pegando agora é a parte do AutoScroll.... Tipo... Quando a pessoa receber uma mens…

[RESOLVIDO] AutoScroll jQuery

Saaaalve galerinha!

Bem, estou desenvolvendo um chat com PHP + JS + MySQL...

A parte do chat está okay já :D

Mas o que está pegando agora é a parte do AutoScroll....
Tipo... Quando a pessoa receber uma mensagem, se o scroll já estiver no máximo pra baixo ele exibe a nova mensagem recebida e rola até o final....
Mas se o scroll antes de receber a mensagem não estiver no máximo ele exibir uma div com um link para que seja rolado até o final...
Porém... Assim que abre a página, a idéia é que ele abra as mensagens anteriores e role até o final (inicialmente estava fazendo isso), mas agora não está mais....

Segue o código:

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Esta e a tela de envio...</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="js/js_envio.js"></script>
        <script>
            var ultimo_id = 0;
            
            function chamarJSON(){
                setTimeout( "chamarJSON();",1000 );
                $.getJSON('Rotinas/Eventos_Cad_Msgs.php?evt=pegar&id_msg='+ultimo_id, function(retorno) {
                    var html = $('#chat').html();
                    
                    var fim = false;
                    fim = chat.scrollHeight - $('#chat').height() == chat.scrollTop;
                    
                    for(var i = 0; i < retorno.length; i++){
                        ultimo_id = retorno[i].id_msg;
                        if(retorno[i].tipo_msg == 1){
                            html += "<b>"+retorno[i].nome_cliente+"</b> diz: "+retorno[i].conteudo_msg+"<br/>";
                        } else {
                            html += "<b>"+retorno[i].nome_atendente+"</b> diz: "+retorno[i].conteudo_msg+"<br/>";
                        }
                    }
                    
                    if(retorno.length > 0){
                        if(fim){
                            Rolar();
                        } else {
                            //$('#div_rolar').fadeIn(500);
                        }
                    }
                    
                    $('#chat').html(html);
                })
            }
            
            function Rolar(){
                $('#chat').animate({scrollTop: chat.scrollHeight + $('#chat').height()}, 500);
                //$('#div_rolar').fadeOut(500);
            }
            
            $(document).ready(function(){
                chamarJSON();
                $('#chat').scroll(function () {
                    $('#div_rolar').animate({top : chat.scrollTop}, 0);
                })
                
                Rolar();
            })
        </script>
    </head>
    <body>
        <div id="chat" style="border: 1px solid; width: 500px; height: 300px; overflow: auto;">
            <div id="div_rolar" style="width: 500px; position: relative; left: 0; top: 0; background-color: aqua;">
                <a href="javascript:Rolar()" style="display: block;"><center>Rolar para a ultima mensagem...</center></a>
            </div>
        </div>
        <input id="msg"/>
        <input type="button" value="Enviar" onclick="EnviarMsg(msg.value)"/>
    </body>
</html>

Obs a parte de envio está show já ;)

Grato pela atenção!
Qualquer ajuda é bem vinda!

1 Resposta

landantas 8 de fev. de 2013

Pronto galera… Num sei se foi um POG… Mas deu certo

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Esta e a tela de envio...</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script src="js/js_envio.js"></script>
        <script>
            var ultimo_id = 0;
            
            function chamarJSON(){
                setTimeout( "chamarJSON();",1000 );
                $.getJSON('Rotinas/Eventos_Cad_Msgs.php?evt=pegar&id_msg='+ultimo_id, function(retorno) {
                    var html = $('#chat').html();
                    
                    var fim = false;
                    fim = chat.scrollHeight - $('#chat').height() == chat.scrollTop;
                    
                    for(var i = 0; i < retorno.length; i++){
                        ultimo_id = retorno[i].id_msg;
                        if(retorno[i].tipo_msg == 1){
                            html += "<b>"+retorno[i].nome_cliente+"</b> diz: "+retorno[i].conteudo_msg+"<br/>";
                        } else {
                            html += "<b>"+retorno[i].nome_atendente+"</b> diz: "+retorno[i].conteudo_msg+"<br/>";
                        }
                    }
                    
                    $('#chat').html(html);
                    
                    if(retorno.length > 0){
                        if(fim){
                            Rolar();
                        } else {
                            $('#div_rolar').fadeIn(500);
                        }
                    }
                })
            }
            
            function Rolar(){
                $('#chat').animate({scrollTop: chat.scrollHeight + $('#chat').height()}, 500);
                $('#div_rolar').fadeOut(500);
            }
            
            $(document).ready(function(){
                chamarJSON();
                $('#div_rolar').fadeOut(0);
                $('#chat').scroll(function () {
                    $('#div_rolar').animate({top : chat.scrollTop}, 0);
                })
            })
        </script>
    </head>
    <body>
        <div id="chat" style="border: 1px solid; width: 500px; height: 300px; overflow: auto;">
            <div id="div_rolar" style="width: 100%; position: relative; left: 0; top: 0; background-color: aqua;">
                <a href="javascript:Rolar()" style="display: block;"><center>Rolar para a ultima mensagem...</center></a>
            </div>
        </div>
        <input id="msg"/>
        <input type="button" value="Enviar" onclick="EnviarMsg(msg.value)"/>
    </body>
</html>

Grato pela atenção aee pessoas!

1 Resposta

Topicos relacionados