como mostrar el texto de abjo de un div

waldragon · #1 (**permalink**) 15/12/2011, 14:08

Buenas, estoy haciendo un chat y puse todo lo que escriben los usuarios dentro de un div con estos estilos:
#vercont {width:90%;height:250px;border:#696969 1px solid;overflow:scroll;padding:5px;}

pero cuando se llena de contenido, lo ultimo que se escribio se va para abajo y queda oculto, como hago para que se vea lo de abajo y se oculte lo de arriba (lo mas viejo) espero que puedan ayudarme, gracias.

kseso? · #2 (**permalink**) 15/12/2011, 15:55

Es el comportamiento lógico. El navegador va colocando el contenido según lo encuentra en el html.

Así que creo que no es una cuestión de css. Más bien de programación del chat, invertir el cómo y dónde aparece el nuevo contenido.
Y esa suele ser la operativa usual (de los pocos chat integrados que conozco) que recuerdo haber visto.

Aunque siempre puede crear una caja con el scroll (y tamaño definido) y la que tiene el contenido posicionarla de forma absoluta dentro de ella en la posición que desee.

waldragon · #3 (**permalink**) 15/12/2011, 16:10

Claro, yo puedo hacer que lo nuevo salga arriba, modificando el orden en el select, pero lo normal en los chats es que lo ultimo se vea abajo, por eso quiero hacerlo asi, y como el div en donde esta el contenido le di el estilo overflow:scroll para que no se desarme el div y se muestren las barras de desplazamiento, me preguntaba si se puede agregar algo mas para se muestre la barra de desplazamiento abajo del todo.

IsaBelM · #4 (**permalink**) 15/12/2011, 17:28

se me ocurre hacerlo con javascript. el método scrollIntoView() te permite desplazarte a cualquier elemento que tenga id. de tal modo que a cada nueva entrada tendrás que asignarle una id, algo como

Cita:

<span id="entrada'+numerodeintrada+'">'+ valor_entrada +'</span><br />'

. donde "numerodeintrada" es un autoincrementable. todo esto se realiza aplicando lo mencionado en post que abristes en el foro de javascript

waldragon · #5 (**permalink**) 16/12/2011, 00:36

Genial, se me ocurrio poner esto al final de todos los registros: <p id="aaa"></p>
entonces cuando hago click en el boton va directamente hacia abajo, funciona bien, pero estoy probando para que vaya automaticamente cuando el usuario ingrese el nuevo registro, que dicho sea de paso, logre lo del post anterior, eso de ingresar el registro haciendo enter, por eso creo que podria poner algo de esto en aquello para que haga lo que quiero lograr:

Esto es lo de este post:

Código PHP:

Ver original<script>
//ini para mostrar el contenido desde abajo
 function showIt(elID)
    {
      var el = document.getElementById(elID);
      el.scrollIntoView(true);
    }
</script>
 
<body>
 
registro uno
registro dos
registro tres
mas registros
<p id="aaa"></p>
 
<input type="button" value="Ver Ultimo Registro" 
   onclick="showIt('aaa');">
</body>

Y esto es lo del post anterior:

Código PHP:

Ver originalfunction tecla(event){
//VALIDO LA TECLA PRESIONADA
if(event.keyCode == 13){
}
}
//y en el form
<input name="cont" rows="5" cols="70" id="mensaje" onkeydown="javascript:tecla(event);">

Las dos cosas funcionan bien, pero habria alguna forma de hacer que al presionar enter me muestre la parte de abajo de los registros?

ejemplo explicativo y con pocas chances de funcionar:

function tecla(event){
//VALIDO LA TECLA PRESIONADA
if(event.keyCode == 13){
onclick="showIt('aaa');"//como seria la sintaxis?
}
}
Gracias por tus aportes...

IsaBelM · #6 (**permalink**) 16/12/2011, 08:50

a ver ... algo rápido

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<script type="text/javascript">
function fnc(c_entrada, val_entrada, bloque_conversacion, evt){

if (evt == undefined) {
document.getElementById(bloque_conversacion).inner HTML += val_entrada +'<br />';
document.getElementById('scr').scrollIntoView(true );
document.getElementById(c_entrada).value = '';

} else {

tecla=(evt) ? evt.keyCode : evt.charCode;
if(tecla==13) {
document.getElementById(bloque_conversacion).inner HTML += val_entrada +'<br />';
document.getElementById('scr').scrollIntoView(true );
document.getElementById(c_entrada).value = '';
}
}
}

function scroll() {
document.getElementById('nueva_entrada').addEventL istener('keyup', function(event) {
fnc(this.id, this.value, 'dialogo', event);
},
false);

document.getElementById('insertar').addEventListen er('click', function() {
fnc('nueva_entrada', document.getElementById('nueva_entrada').value, 'dialogo');
},
false);

}

window.onload = scroll;
</script>
</head>
<body>

<div id="scroll" style="height: 5em; width: 30em; overflow: scroll;border: 1px solid blue;">
<div id="dialogo" style="overflow: none;">

</div>
<span id="scr"></span>
</div>

<form>
<textarea id="nueva_entrada" rows="5" cols="20"></textarea>

<input type="button" value="Insertar" id="insertar" >
</form>

</body>
</html>

si tienes alguna otra duda, posteala en el foro de javascript dejando una referencia a este tema

waldragon · #7 (**permalink**) 19/12/2011, 23:11

Ok, abro otro tema en javascript, para que me ayuden a desplazar la barra del scroll hacia abajo, gracias...

Esta es la direccion del nuevo tema:

http://www.forosdelweb.com/f13/envia...-abajo-965325/