Enviar la barra del scroll hacia abajo

waldragon · #1 (**permalink**) 19/12/2011, 23:24

Buenas, estoy haciendo un chat, y muestro los comentarios de los usuarios en un div que tiene 350px de alto, cuando se llena ese alto por el texto ingresado, todo lo nuevo o lo que "sobra" se va ocultando y muestra la barra de scroll, hasta ahi todo bien, pero como envio la barra siempre hacia abajo, para que se vea por defecto el texto que esta en esa posicion? aqui les muestro como esta el div que muestra el contenido:

Código PHP:

Ver original<div align="center">
<div id="vercont">
<div id="div1"></div><!--en este div se muestra lo que escriben los dos usuarios que estan charlando, para eso utilizo un js que muestra en su interior, el contenido de otro archivo, el cual descarga la conversacion de estos usuarios, y el mismo script hace que el contenido se actualice cada tres segundos-->
</div>
</div>

este es el script que muestra la conversacion, por si es necesario para encontrar la solucion:

Código Javascript:

Ver originalfunction refreshDivs(divid,secs,url)
{
 
// define our vars
var divid,secs,url,fetch_unix_timestamp;
 
// Chequeamos que las variables no esten vacias..
if(divid == ""){ alert('Error: escribe el id del div que quieres refrescar'); return;}
else if(!document.getElementById(divid)){ alert('Error: el Div ID selectionado no esta definido: '+divid); return;}
else if(secs == ""){ alert('Error: indica la cantidad de segundos que quieres que el div se refresque'); return;}
else if(url == ""){ alert('Error: la URL del documento que quieres cargar en el div no puede estar vacia.'); return;}
 
// The XMLHttpRequest object
 
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Tu explorador no soporta AJAX.");
return false;
}
}
}
 
// Timestamp para evitar que se cachee el array GET
 
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
 
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
 
// the ajax call
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout(function(){refreshDivs(divid,secs,url);},secs*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}
 
// LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar.
window.onload = function startrefresh(){
refreshDivs('div1',1,'div1.php');
}

espero que puedan ayudarme, es lo ultimo que me falta para terminar mi chat, luego un poco de estilo, y listo, lo presento en la seccion correspondiente, GRACIAS...

waldragon · #2 (**permalink**) 19/12/2011, 23:46

Aca encontre algo que sirve, pero a medias, envia la barra del scroll hacia abajo como queria, pero si uno quiere mover la barra hacia arriba con el mouse, para leer lo que escribio antes, se va rapidamente hacia abajo en cuanto se actualiza, ----hy alguna forma de cancelar una funcion, mientras se presiona la barra del div indicado, gracias...

esto es lo que agregue para mandar la barra hacia abajo...

Código Javascript:

Ver originalsetInterval(function(){
document.getElementById('vercont').scrollTop=5000;},200);
//vercont es el nombre del div

IsaBelM · #3 (**permalink**) 20/12/2011, 06:21

pues mira que yo pensaba que lo habías entendido

Cita:

<div align="center">
<div id="vercont" style="overflow: scroll;">
<div id="div1" style="overflow: none;"></div>
<span id="scr"></span>
</div>
</div>

document.getElementById('scr').scrollIntoView(true );

waldragon · #4 (**permalink**) 24/12/2011, 15:08

La verdad que no lo entendi, probe asi en una pagina nueva y no funciono, no se como va la parte de document.getElementById('scr').scrollIntoView(true );, busque por todos lados y no entiendo como se pone esa parte, gracias por tu ayuda, es lo unico que me falta para terminarlo.

Hice esto para probar:

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>
<head>
<title>Page title</title>
<script>
document.getElementById('scr').scrollIntoView(true );
</script>
</head>
<body>
<div align="center">
<div id="vercont" style="overflow: scroll;">
<div id="div1" style="overflow: none;">
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
<p>Datos</p>
</div>
<span id="scr"></span>
</div>
</div>
</body>
</html>

IsaBelM · #5 (**permalink**) 26/12/2011, 08:40

hay una gran diferencia entre lo que tu haces y lo que hay que hacer
http://www.forosdelweb.com/f53/como-...9/#post4070057

breaststroke · #6 (**permalink**) 02/01/2012, 16:16

Muy buenas.

Perdón si no debo comentar aquí, porque querría hacer una pregunta a waldragon acerca del código que ha escrito, aunque no tiene que ver con la barra scroll (aunque tb me interesa este tema).

Básicamente si me puedes, waldragon, decir si el código Javascript que has puesto está completo y es tal cual.
Porque hay dos cosas que me generan alguna duda.
La primera es que en en el código php tienes un div con id=vercont, pero no haces referencia a él en el código javascript. Supongo que no es necesario porque hay otro div en su interior que sí está relacionado con el código javascript.
Luego, en javascript, cuando defines las variable divid , ¿es tal cual, en lugar de div1, por ejemplo?
Y me imagino que la página div1.php es la página donde está el código php con los divs.

Bueno, muchas gracias de antemano, de verdad. Espero que te funcionara lo del scroll. Yo tb tendré que ponerme a ello.
Por cierto, supongo que no te importará que pruebe tu código. Si no no hay problema!

Un saludo.

waldragon · #7 (**permalink**) 03/01/2012, 00:35

Segun las reglas del foro, lo adecuado es crear un nuevo tema para preguntar algo, pero como es una pregunta sobre el codigo que puse aqui, creo que nadie va a decir nada...

1-Efectivamente, el div vercont no tiene nada que ver con el codigo js, lo use solo para darle el ancho, alto y bordes adecuados al mostrar la conversacion.

2-El codigo funciona bien tal como esta, pero creo que estas algo confundido, el codigo que puse aca arriba va en por ejemplo index.php en donde tambien va el div <div1></div> y en el archivo llamado div1.php va el codigo php que descarga el contenido de la base de datos, entonces cada 1 segundo (segun lo puesto en el codigo, pero puedes cambiarlo) mostrara en el div <div1></div> lo que este en el archivo div1.php sin refrescar la pagina ni titilar ni nada incomodo a la vista del usuario.

Lo del scroll me funciono perfecto, cuando te haga falta me avisas.

breaststroke · #8 (**permalink**) 03/01/2012, 04:57

Cita:

Iniciado por waldragon

Segun las reglas del foro, lo adecuado es crear un nuevo tema para preguntar algo, pero como es una pregunta sobre el codigo que puse aqui, creo que nadie va a decir nada...

1-Efectivamente, el div vercont no tiene nada que ver con el codigo js, lo use solo para darle el ancho, alto y bordes adecuados al mostrar la conversacion.

2-El codigo funciona bien tal como esta, pero creo que estas algo confundido, el codigo que puse aca arriba va en por ejemplo index.php en donde tambien va el div <div1></div> y en el archivo llamado div1.php va el codigo php que descarga el contenido de la base de datos, entonces cada 1 segundo (segun lo puesto en el codigo, pero puedes cambiarlo) mostrara en el div <div1></div> lo que este en el archivo div1.php sin refrescar la pagina ni titilar ni nada incomodo a la vista del usuario.

Lo del scroll me funciono perfecto, cuando te haga falta me avisas.

Pues nada, muchas gracias.
Pensaba que no estabas usando My Sql (u otra base de datos). La verdad es que estoy poco familiarizado con Javascript y con Ajax nada y no entiendo demasiado bien estas funciones (todavía;p), pero me parece que se parece bastante a lo que yo había creado.
Pues uno de los motivos por los que quería cambiar era lo que comentas de que titila al incluir nuevo comentario y el color y alguna cosilla más. Incluso lo del scroll (que fue lo que me hizo dar con este hilo).

Bueno, me pongo con ello, haber si lo entiendo bien e incluso puedo mantener algo de lo que ya tenía.

Muchas gracias de nuevo.

breaststroke · #9 (**permalink**) 04/01/2012, 06:34

Hola de nuevo.
La verdad es que no termino de pillarlo.
Entiendo la parte del div id=div1, pero supongo que los mensajes entran por un textárea. ¿De id=divid (sino no sé qué significa el divid)?Además supongo que este textárea está asociado a un evento onClick (cuando un usuario envía un mensaje).
Luego está la parte de la base de datos, pero bueno, supongo que lo podría deducir.

Bueno, no molesto más, supongo que estarás en otra cosa waldragon.

Gracias.

p.d. Por cierto, he dado un negativo a un mensaje anterior, pero sin querer, ya que quería pulsar en el positivo;P

waldragon · #10 (**permalink**) 04/01/2012, 23:13

Es que este codigo es para mostrar y la conversacion del chat, pero para ingresar esos comentarios en la base de datos tienes que usar otro codigo, que usas ahora para ingresar los datos? lo ideal es ingresarlos con ajax, de esa forma podras hacerlo sin refrescar la pagina.

-Aqui en fdw hay un chat subido por el usuario pato12 del que puedes aprender mucho, miralo aqui:
http://www.forosdelweb.com/f127/apor...online-651920/

No te hagas problema por el punto negativo, tengo varios mensajes en donde puedes dar positivo jejeje, suerte.

breaststroke · #11 (**permalink**) 05/01/2012, 20:07

Hola de nuevo,

Bueno, pues como estoy metido en este tema he dado con el script para hacer lo del scroll, que a más de un@ le podría valer (ya que el hilo se ocupa de eso;p):

En ajax:

Código Javascript:

Ver originalid_div_mensajes.scrollTop = id_div_mensajes.scrollHeight;

Así de sencillo. id_div_mensajes es el id del div donde se muestran los mensajes.

Lo que me encantaría saber es el script que hace que los mensajes permanezcan en el div sin "parpadear" o "titilar" al ejecutar ningún evento.(??)
Gracias por el enlace waldragon. Ya lo había visto, por cierto. Estoy mirando un poco por todos lados. Voy a tener que empollarme Ajax.
Un saludo.