
por el autor de la pregunta
Lee sobre scrollTop y scrollHeight en JQuery, con eso tendrás una idea de qué debes hacer.
- 2017-01-19 17:38:33
-
Me gusta(0)
Por: Victor Rosario | Publicado el: 2017-01-18 23:09:10 | Pregunta abierta |
Estoy apunto de acabar un chat con PHP y Ajax, se que no es la mejor forma de hacer un chat... pero no quisiera dejar esto a medias...
El siguiente script es lo fundamenal...
<script language="javascript" type="text/javascript">
var httpObject = null;
var link = "";
var timerID = 0;
var nickName = "<?php echo $nickname; ?>";
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}
function setOutput(){
if(httpObject.readyState == 4){
var response = httpObject.responseText;
var objDiv = document.getElementById("result");
objDiv.innerHTML += response;
objDiv.scrollTop = objDiv.scrollHeight;
var inpObj = document.getElementById("msg");
inpObj.value = "";
inpObj.focus();
}
}
function setAll(){
if(httpObject.readyState == 4){
var response = httpObject.responseText;
var objDiv = document.getElementById("result");
objDiv.innerHTML = response;
objDiv.scrollTop = objDiv.scrollHeight;
}
}
function doWork(){
httpObject = getHTTPObject();
if (httpObject != null) {
link = "message.php?nick="+nickName+"&msg="+document.getElementById('msg').value;
httpObject.open("GET", link , true);
httpObject.onreadystatechange = setOutput;
httpObject.send(null);
}
}
function doReload(){
httpObject = getHTTPObject();
var randomnumber=Math.floor(Math.random()*10000);
if (httpObject != null) {
link = "message.php?all=1&rnd="+randomnumber;
httpObject.open("GET", link , true);
httpObject.onreadystatechange = setAll;
httpObject.send(null);
}
}
function UpdateTimer() {
doReload();
timerID = setTimeout("UpdateTimer()", 5000);
}
function keypressed(e){
if(e.keyCode=='13'){
doWork();
}
}
</script>
Y en el onload del body llamo a la función UpdateTimer(); los mensajes se envian correctamente, el unico problema es que el Scroll siempre se mantiene en la parte inferior, al intentar ver mensajes anteriores dentro de un lapso de 2-3 segundos, el scrool vuelve a la parte inferior, quisiera que me ayudaran para que al intentar ver los mensajes anteriores el scrool no se vuelva a la parte inferior, he estado probando e intentar solucionarlo cambiando en la función setAll() y setOutput() : objDiv.scrollTop = objDiv.scrollTop;
function setOutput(){
if(httpObject.readyState == 4){
var response = httpObject.responseText;
var objDiv = document.getElementById("result");
objDiv.innerHTML += response;
objDiv.scrollTop = objDiv.scrollTop;
var inpObj = document.getElementById("msg");
inpObj.value = "";
inpObj.focus();
}
}
function setAll(){
if(httpObject.readyState == 4){
var response = httpObject.responseText;
var objDiv = document.getElementById("result");
objDiv.innerHTML = response;
objDiv.scrollTop = objDiv.scrollTop;
}
}
Al ejecutar con esos cambios, puedo ver todos los mensajes sin que el scroll me oblique a estar solo en una parte, pero el problema es que al cargar la pagina el scrool esta en la parte superior y seria molestoso estar bajando para ver el ultimo mensaje...
Quizas sea algo facil pero no encuentro como solucionarlo...
Gracias
Lee sobre scrollTop y scrollHeight en JQuery, con eso tendrás una idea de qué debes hacer.
Hola Victor, lo que puedes hacer es usar el evento Scroll con Jquery y cada que mueves el Scroll donde es que se lanza el evento capturar la posición actual de la barra de desplazamiento y cuando se lanza el update de la petición ajax primero obtener la posición en una variable global de la posición del scroll para luego de finalizar la carga ajax en el .done hacer que el scroll tome la posición donde se encontraba dicho control.
Otra forma sería que en la petición ajax, en vez de refrescar todos los mensajes; sólo agregues con la función .append los mensajes no leídos.
Aunque te menciono que ajax para un chat?... eso no es nada adecuado, pero si lo mantienes, te sugiero el segundo caso que te mencioné que sería más efectivo creo yo.
Saludos.
Gracias por responder, ya logre hacer que el scrool se mantenga en la parte inferior y que pueda ver los mensajes anteriores sin ningún problema(es una funcion la solución), pero hay un pequeño detalle, y es que si un usuario esta al final del scrool y otro usuario manda un mensaje, claro el mensaje llega pero el usuario que estaba al final del scrool tendria que bajar un poco para ver el ultimo mensaje...
Como podria ejecutar mi función cada vez que reciba una respuesta del servidor?, ya estoy cerca...
Algo parecido a lo que te respondí arriba, cuando se ejecuta el done de la función ajax, lanzar el evento necesario para que se lance el scroll para el final "Esto lo puedes hacer con el mismo jquery o javascript nativo si así lo prefieres" y dicho evento que se lance sólo si el scrill está abajo, caso contrario que no haga nada para que el usuario pueda seguir leyendo los mensajes si sube en la lista de dichos mensajes.
La verificación de la posición de scroll también lo puedes hacer con Javascript mediante JQuery.
Saludos.
Ya en código mas o menos como seria? Gracias por responder y disculpa si te quito tiempo con mis preguntas...