Foros del Web » Programando para Internet » Javascript »

Enviar la barra del scroll hacia abajo

Estas en el tema de Enviar la barra del scroll hacia abajo en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/12/2011, 23:24
Avatar de waldragon  
Fecha de Ingreso: mayo-2010
Mensajes: 735
Antigüedad: 12 años, 10 meses
Puntos: 55
Pregunta Enviar la barra del scroll hacia abajo

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
  1. <div align="center">
  2. <div id="vercont">
  3. <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-->
  4. </div>
  5. </div>

este es el script que muestra la conversacion, por si es necesario para encontrar la solucion:
Código Javascript:
Ver original
  1. function refreshDivs(divid,secs,url)
  2. {
  3.  
  4. // define our vars
  5. var divid,secs,url,fetch_unix_timestamp;
  6.  
  7. // Chequeamos que las variables no esten vacias..
  8. if(divid == ""){ alert('Error: escribe el id del div que quieres refrescar'); return;}
  9. else if(!document.getElementById(divid)){ alert('Error: el Div ID selectionado no esta definido: '+divid); return;}
  10. else if(secs == ""){ alert('Error: indica la cantidad de segundos que quieres que el div se refresque'); return;}
  11. else if(url == ""){ alert('Error: la URL del documento que quieres cargar en el div no puede estar vacia.'); return;}
  12.  
  13. // The XMLHttpRequest object
  14.  
  15. var xmlHttp;
  16. try{
  17. xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
  18. }
  19. catch (e){
  20. try{
  21. xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
  22. }
  23. catch (e){
  24. try{
  25. xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  26. }
  27. catch (e){
  28. alert("Tu explorador no soporta AJAX.");
  29. return false;
  30. }
  31. }
  32. }
  33.  
  34. // Timestamp para evitar que se cachee el array GET
  35.  
  36. fetch_unix_timestamp = function()
  37. {
  38. return parseInt(new Date().getTime().toString().substring(0, 10))
  39. }
  40.  
  41. var timestamp = fetch_unix_timestamp();
  42. var nocacheurl = url+"?t="+timestamp;
  43.  
  44. // the ajax call
  45. xmlHttp.onreadystatechange=function(){
  46. if(xmlHttp.readyState==4){
  47. document.getElementById(divid).innerHTML=xmlHttp.responseText;
  48. setTimeout(function(){refreshDivs(divid,secs,url);},secs*1000);
  49. }
  50. }
  51. xmlHttp.open("GET",nocacheurl,true);
  52. xmlHttp.send(null);
  53. }
  54.  
  55. // LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar.
  56. window.onload = function startrefresh(){
  57. refreshDivs('div1',1,'div1.php');
  58. }

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...
  #2 (permalink)  
Antiguo 19/12/2011, 23:46
Avatar de waldragon  
Fecha de Ingreso: mayo-2010
Mensajes: 735
Antigüedad: 12 años, 10 meses
Puntos: 55
Respuesta: Enviar la barra del scroll hacia abajo

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 original
  1. setInterval(function(){
  2. document.getElementById('vercont').scrollTop=5000;},200);
  3. //vercont es el nombre del div
  #3 (permalink)  
Antiguo 20/12/2011, 06:21
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 14 años, 9 meses
Puntos: 1011
Respuesta: Enviar la barra del scroll hacia abajo

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 );
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #4 (permalink)  
Antiguo 24/12/2011, 15:08
Avatar de waldragon  
Fecha de Ingreso: mayo-2010
Mensajes: 735
Antigüedad: 12 años, 10 meses
Puntos: 55
Respuesta: Enviar la barra del scroll hacia abajo

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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <title>Page title</title>
  4. document.getElementById('scr').scrollIntoView(true );
  5. </head>
  6. <div align="center">
  7. <div id="vercont" style="overflow: scroll;">
  8. <div id="div1" style="overflow: none;">
  9. <p>Datos</p>
  10. <p>Datos</p>
  11. <p>Datos</p>
  12. <p>Datos</p>
  13. <p>Datos</p>
  14. <p>Datos</p>
  15. <p>Datos</p>
  16. <p>Datos</p>
  17. <p>Datos</p>
  18. <p>Datos</p>
  19. <p>Datos</p>
  20. <p>Datos</p>
  21. <p>Datos</p>
  22. <p>Datos</p>
  23. <p>Datos</p>
  24. <p>Datos</p>
  25. <p>Datos</p>
  26. <p>Datos</p>
  27. <p>Datos</p>
  28. <p>Datos</p>
  29. <p>Datos</p>
  30. <p>Datos</p>
  31. <p>Datos</p>
  32. <p>Datos</p>
  33. <p>Datos</p>
  34. <p>Datos</p>
  35. <p>Datos</p>
  36. <p>Datos</p>
  37. <p>Datos</p>
  38. <p>Datos</p>
  39. <p>Datos</p>
  40. <p>Datos</p>
  41. </div>
  42. <span id="scr"></span>
  43. </div>
  44. </div>
  45. </body>
  46. </html>
  #5 (permalink)  
Antiguo 26/12/2011, 08:40
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 14 años, 9 meses
Puntos: 1011
Respuesta: Enviar la barra del scroll hacia abajo

hay una gran diferencia entre lo que tu haces y lo que hay que hacer
http://www.forosdelweb.com/f53/como-...9/#post4070057
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #6 (permalink)  
Antiguo 02/01/2012, 16:16
 
Fecha de Ingreso: octubre-2010
Mensajes: 189
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Enviar la barra del scroll hacia abajo

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.
  #7 (permalink)  
Antiguo 03/01/2012, 00:35
Avatar de waldragon  
Fecha de Ingreso: mayo-2010
Mensajes: 735
Antigüedad: 12 años, 10 meses
Puntos: 55
Respuesta: Enviar la barra del scroll hacia abajo

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.
  #8 (permalink)  
Antiguo 03/01/2012, 04:57
 
Fecha de Ingreso: octubre-2010
Mensajes: 189
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Enviar la barra del scroll hacia abajo

Cita:
Iniciado por waldragon Ver Mensaje
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.
  #9 (permalink)  
Antiguo 04/01/2012, 06:34
 
Fecha de Ingreso: octubre-2010
Mensajes: 189
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Enviar la barra del scroll hacia abajo

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

Última edición por breaststroke; 04/01/2012 a las 13:48 Razón: punto positivo
  #10 (permalink)  
Antiguo 04/01/2012, 23:13
Avatar de waldragon  
Fecha de Ingreso: mayo-2010
Mensajes: 735
Antigüedad: 12 años, 10 meses
Puntos: 55
Respuesta: Enviar la barra del scroll hacia abajo

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.
  #11 (permalink)  
Antiguo 05/01/2012, 20:07
 
Fecha de Ingreso: octubre-2010
Mensajes: 189
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Enviar la barra del scroll hacia abajo

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 [email protected] le podría valer (ya que el hilo se ocupa de eso;p):

En ajax:
Código Javascript:
Ver original
  1. id_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.

Etiquetas: abajo, ajax, barra, funcion, hacia, html, js, php, scroll
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:53.