Dica para solução (PHP + jQuery + Ajax)

Boa noite galera,

to fazendo um sistema de chat...

fiz a parte de entrada, que o usuario coloca as informações vai pra uma pagina que espera o atendente entrar, dps que o atendente entra vai pro chat...

consegui fazer tudo atualizar com ajax + php + mysql...

o problema é que faço a execução para verificar novas mensagens de 5 em 5 segundos, e nessa função tenho uma função para fazer o scroll do chat ficar sempre no fundo, pq as mensagens são inseridas no fim...

tudo funcionando perfeito! o problema está quando o usuario rola a pagina pra cima, pra olhar mensagens antigas, o usuário está olhando mais em cima do chat de repente o chat desce, por causa da função que atualiza e manda o scroll pro fim...

mesmo não tendo mensagens novas ele vai pro fim..

alguem tem uma solução ou dica?

segue código:

function inicia_chat(){ var form = $('#dados_atendimento'); form.submit(function(){ return false; }); form.ajaxSubmit({ url:"crud.php", data: {acao: "iniciar_chat"}, success: function(resposta){ if(resposta == 0){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("aviso"); $("#mensagens_dados_atendimento").text("Preencha todos os campos corretamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 1){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("erro"); $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 2){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("sucesso"); $("#mensagens_dados_atendimento").text("Iniciando atendimento..."); $(".mensagens_dados_atendimento").fadeIn("fast"); window.setTimeout(function(){ form.fadeOut("fast"); $("#barra_verde p").html("Estamos contactando um atendente, por favor aguarde..."); $("#carregando_chat").fadeIn("fast"); window.setInterval(function(){ $.ajax({ type: "POST", url: "crud.php", data: { acao: 'verifica_atendente' }, success: function ( resposta ){ if(resposta == 'erro'){ form.fadeIn("fast"); $("#barra_verde p").html("Preencha seus dados para iniciar o atendimento."); $("#carregando_chat").fadeOut("fast"); $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("erro"); $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 0){ }else if(resposta != 'erro' && resposta != 0){ var result = resposta.split("&"); var nomeAtendente = result[0]; var dataInicio = result[1]; var horaInicio = result[2]; $("#barra_verde p").html("Você está online atualmente com <b>"+nomeAtendente+"</b>."); $("#atendimento_iniciado p").html("Atendimento iniciado em <b>"+dataInicio+"</b> às <b>"+horaInicio+"</b>."); $("#carregando_chat").fadeOut("fast"); $("#chat_online").fadeIn(500); } } }); verifica_style_chat(); }, 1000); }, 2000); } } }); } function verifica_style_chat(){ var chat = $("#chat_online").attr("style"); if(chat == 'display:none'){ }else if(chat == ''){ atualiza_chat(); } } function atualiza_chat(){ window.setInterval(function(){ $.ajax({ type: "POST", url: "crud.php", data: { acao: 'atualiza_chat' }, success: function ( resposta ){ $("#chat").html(resposta); var chatScroll = $('#chat_scroll').height(); $('#chat_scroll').scrollTop(chatScroll); } }); }, 5000); }; </script>Boa noite galera,

to fazendo um sistema de chat...

fiz a parte de entrada, que o usuario coloca as informações vai pra uma pagina que espera o atendente entrar, dps que o atendente entra vai pro chat...

consegui fazer tudo atualizar com ajax + php + mysql...

o problema é que faço a execução para verificar novas mensagens de 5 em 5 segundos, e nessa função tenho uma função para fazer o scroll do chat ficar sempre no fundo, pq as mensagens são inseridas no fim...

tudo funcionando perfeito! o problema está quando o usuario rola a pagina pra cima, pra olhar mensagens antigas, o usuário está olhando mais em cima do chat de repente o chat desce, por causa da função que atualiza e manda o scroll pro fim...

mesmo não tendo mensagens novas ele vai pro fim..

alguem tem uma solução ou dica?

segue código:

function inicia_chat(){ var form = $('#dados_atendimento'); form.submit(function(){ return false; }); form.ajaxSubmit({ url:"crud.php", data: {acao: "iniciar_chat"}, success: function(resposta){ if(resposta == 0){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("aviso"); $("#mensagens_dados_atendimento").text("Preencha todos os campos corretamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 1){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("erro"); $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 2){ $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("sucesso"); $("#mensagens_dados_atendimento").text("Iniciando atendimento..."); $(".mensagens_dados_atendimento").fadeIn("fast"); window.setTimeout(function(){ form.fadeOut("fast"); $("#barra_verde p").html("Estamos contactando um atendente, por favor aguarde..."); $("#carregando_chat").fadeIn("fast"); window.setInterval(function(){ $.ajax({ type: "POST", url: "crud.php", data: { acao: 'verifica_atendente' }, success: function ( resposta ){ if(resposta == 'erro'){ form.fadeIn("fast"); $("#barra_verde p").html("Preencha seus dados para iniciar o atendimento."); $("#carregando_chat").fadeOut("fast"); $("#mensagens_dados_atendimento").attr("class",""); $("#mensagens_dados_atendimento").addClass("erro"); $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!"); $(".mensagens_dados_atendimento").fadeIn("fast"); }else if(resposta == 0){ }else if(resposta != 'erro' && resposta != 0){ var result = resposta.split("&"); var nomeAtendente = result[0]; var dataInicio = result[1]; var horaInicio = result[2]; $("#barra_verde p").html("Você está online atualmente com <b>"+nomeAtendente+"</b>."); $("#atendimento_iniciado p").html("Atendimento iniciado em <b>"+dataInicio+"</b> às <b>"+horaInicio+"</b>."); $("#carregando_chat").fadeOut("fast"); $("#chat_online").fadeIn(500); } } }); verifica_style_chat(); }, 1000); }, 2000); } } }); } function verifica_style_chat(){ var chat = $("#chat_online").attr("style"); if(chat == 'display:none'){ }else if(chat == ''){ atualiza_chat(); } } function atualiza_chat(){ window.setInterval(function(){ $.ajax({ type: "POST", url: "crud.php", data: { acao: 'atualiza_chat' }, success: function ( resposta ){ $("#chat").html(resposta); var chatScroll = $('#chat_scroll').height(); $('#chat_scroll').scrollTop(chatScroll); } }); }, 5000); }; </script>Boa noite galera,

to fazendo um sistema de chat...

fiz a parte de entrada, que o usuario coloca as informações vai pra uma pagina que espera o atendente entrar, dps que o atendente entra vai pro chat...

consegui fazer tudo atualizar com ajax + php + mysql...

o problema é que faço a execução para verificar novas mensagens de 5 em 5 segundos, e nessa função tenho uma função para fazer o scroll do chat ficar sempre no fundo, pq as mensagens são inseridas no fim...

tudo funcionando perfeito! o problema está quando o usuario rola a pagina pra cima, pra olhar mensagens antigas, o usuário está olhando mais em cima do chat de repente o chat desce, por causa da função que atualiza e manda o scroll pro fim...

mesmo não tendo mensagens novas ele vai pro fim..

alguem tem uma solução ou dica?

segue código:

function inicia_chat(){

 var form = $('#dados_atendimento');

 form.submit(function(){
 return false;
 });

 form.ajaxSubmit({
 url:"crud.php",
 data: {acao: "iniciar_chat"},
 success: function(resposta){
 if(resposta == 0){
 $("#mensagens_dados_atendimento").attr("class","");
 $("#mensagens_dados_atendimento").addClass("aviso");
 $("#mensagens_dados_atendimento").text("Preencha todos os campos corretamente!");
 $(".mensagens_dados_atendimento").fadeIn("fast");
 }else if(resposta == 1){
 $("#mensagens_dados_atendimento").attr("class","");
 $("#mensagens_dados_atendimento").addClass("erro");
 $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!");
 $(".mensagens_dados_atendimento").fadeIn("fast");
 }else if(resposta == 2){
 $("#mensagens_dados_atendimento").attr("class","");
 $("#mensagens_dados_atendimento").addClass("sucesso");
 $("#mensagens_dados_atendimento").text("Iniciando atendimento...");
 $(".mensagens_dados_atendimento").fadeIn("fast");
 window.setTimeout(function(){
 form.fadeOut("fast");
 $("#barra_verde p").html("Estamos contactando um atendente, por favor aguarde...");
 $("#carregando_chat").fadeIn("fast");

 window.setInterval(function(){
 $.ajax({
 type: "POST",
 url: "crud.php",
 data: { acao: 'verifica_atendente' },
 success: function ( resposta ){
 if(resposta == 'erro'){
 form.fadeIn("fast");
 $("#barra_verde p").html("Preencha seus dados para iniciar o atendimento.");
 $("#carregando_chat").fadeOut("fast");
 $("#mensagens_dados_atendimento").attr("class","");
 $("#mensagens_dados_atendimento").addClass("erro");
 $("#mensagens_dados_atendimento").text("Erro ao iniciar atendimento, tente novamente!");
 $(".mensagens_dados_atendimento").fadeIn("fast");
 }else if(resposta == 0){
 }else if(resposta != 'erro' && resposta != 0){
 var result = resposta.split("&");
 var nomeAtendente = result[0];
 var dataInicio = result[1];
 var horaInicio = result[2];

 $("#barra_verde p").html("Você está online atualmente com <b>"+nomeAtendente+"</b>.");
 $("#atendimento_iniciado p").html("Atendimento iniciado em <b>"+dataInicio+"</b> às <b>"+horaInicio+"</b>.");
 $("#carregando_chat").fadeOut("fast");
 $("#chat_online").fadeIn(500);
 }
 }
 });
 verifica_style_chat();
 }, 1000);

 }, 2000);
 }
 }
 });
 }

 function verifica_style_chat(){
 var chat = $("#chat_online").attr("style");
 if(chat == 'display:none'){
 }else if(chat == ''){
 atualiza_chat();
 }
 }

 function atualiza_chat(){
 window.setInterval(function(){
 $.ajax({
 type: "POST",
 url: "crud.php",
 data: { acao: 'atualiza_chat' },
 success: function ( resposta ){
 $("#chat").html(resposta);
 var chatScroll = $('#chat_scroll').height();
 $('#chat_scroll').scrollTop(chatScroll);
 }
 });
 }, 5000);
 };
 </script>