[Ovillo] Textarea o DIV con scroll invertído
Hola gente de Ovillo. Acudo a ustedes con una consulta: Necesito hacer una ventana de Chat o mensajes instantáneos para lo cual necesito alguna forma de mostrar los últimos mensajes en alguna caja (asi sea TEXTAREA o DIV) pero que SCROLL sea haga de abajo hacia arriba (los mensajes antiguos aparecen primeros, luego los más recientes). Como si fuese una ventana de MSN, SKYPE, IRC. Alguien sabe alguna manera de lograr esto? Debería ser con algún truco en JS pero no he logrado dar con la solución. Muchisimas gracias! ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Textarea o DIV con scroll invertído
El 18 de noviembre de 2009 15:23, Pablo Nuñez
pnu...@pandemiadigital.comescribió:
necesito alguna forma de mostrar los últimos mensajes en alguna caja (asi
sea TEXTAREA o DIV) pero que SCROLL sea haga de abajo hacia arriba (los
mensajes antiguos aparecen primeros, luego los más recientes).
con una lista ordenada de mensajes:
ol id=chat
limensaje 1/li
limensaje 2/li
limensaje 3/li
limensaje 4/li
/ol
y mediante css, limitando el alto y ancho, y controlando el overflow:
ul#chat{
max-height: 250px;
width: 180px;
overflow-x: auto;
overflow-y: auto;
margin:1em 0;
}
consigues lo que creo que buscas.
saludos
--
___
Sebas[tián] García-Valenciano Secaduras
sebast...@garcia-valenciano.net
www.garcia-valenciano.net
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Textarea o DIV con scroll invertído
2009/11/18 Pablo Nuñez pnu...@pandemiadigital.com: Hola gente de Ovillo. Acudo a ustedes con una consulta: Necesito hacer una ventana de Chat o mensajes instantáneos para lo cual necesito alguna forma de mostrar los últimos mensajes en alguna caja (asi sea TEXTAREA o DIV) pero que SCROLL sea haga de abajo hacia arriba (los mensajes antiguos aparecen primeros, luego los más recientes). Como si fuese una ventana de MSN, SKYPE, IRC. Alguien sabe alguna manera de lograr esto? Debería ser con algún truco en JS pero no he logrado dar con la solución. seguramente puedes hacer algo tan sencillo como tener un div, e ir añadiendo a el lineas div p nuevas. a cada linea nueva le das un id nuevo, por ejemplo linea_chat_332, linea_chat_333 , y ademas eliminas las que son mas viejas, linea_chat_321 linea_chat_320 para que todo encaja en un solo hueco hay varias maneras, quizas la mas sencilla es hacer un uso creativo de float:right o de position: relative div id=cajadechat /div input type=text name=dice si con estas ideas no te sale, puedes directamente examinar como lo hace otro chat html, como el de mibbit. http://www.mibbit.com/ -- -- ℱin del ℳensaje. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Textarea o DIV con scroll invertído
div class=wrap ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Textarea o DIV con scroll invertído
div class=wrap div class=messageaaa/div div class=messageaaa/div div class=messageaaa/div div class=messageaaa/div div class=messageaaa/div div class=messageaaa/div div class=message id=lastBB/div Imaginate que Wrap te deja ver solo dos Message; y tienes el escroll activado. En tu URL tiene que aparecer la almuadilla con el id del ultimo; el navegador ya sabe que tiene que mostrarlo dominio.com/index.php#ultimo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Textarea o DIV con scroll invertído
otra forma es esto div style=height: 100px;border:1px solid red;overflow:hidden id=padredetodaslasbobadas div class=comentariohola mundo1/div div class=comentariohola mundo1.2/div div class=comentariohola mundo1.3/div div class=comentariohola mundo1/div div class=comentariohola mundo1/div div class=comentariohola mundo1/div div class=comentariohola mundo3/div div class=comentariohola mundo4/div div class=comentariohola mundo5/div Escribe tu bobada: input id='focuseame' / /div script document.getElementById(focuseame).focus(); /script basicamente, devuelves el foco al input box cada vez que se escribe algo nuevo, lo nuevo que se escriba lo añades justo antes de focuseame. al tener el focus, todo lo que se salga de la caja no se ve, solo lo ultimo dicho, aqui tiene 100 pixeles de ancho, pero probablemente lo quieres ajustar por javascript a un poco menos de la altura de la pantalla. Y posiblemente quieres eliminar los comentarios antiguos, eso lo puedes hacer como comente antes, siguiendo un ciclo numerico con los id's. -- -- ℱin del ℳensaje. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Textarea o DIV con scroll invertído
Muy bien Jimmy, Tei, Sebastian.
Me ha servido mucho, combinando todo (css/JS) pude hacer un pequeño div
quedaría
div style=height: 100px;border:1px solid;overflow:hidden
id=chat
p class=commentLorem ipsum/p
p class=commentLorem ipsum/p
p class=commentLorem ipsum/p
p class=commentLorem ipsum/p
div class=datainput
form method=post action=
input type=text id=datainput /
input type=submit /
/form
/div
/div
.
.
.
script type=text/javascript
document.getElementById('datainput').focus(); /script
/body
Y me ha funcionado de maravillas.
Muchisimas gracias,
El 18 de noviembre de 2009 14:29, Tei oscar.vi...@gmail.com escribió:
otra forma es esto
div style=height: 100px;border:1px solid red;overflow:hidden
id=padredetodaslasbobadas
div class=comentariohola mundo1/div
div class=comentariohola mundo1.2/div
div class=comentariohola mundo1.3/div
div class=comentariohola mundo1/div
div class=comentariohola mundo1/div
div class=comentariohola mundo1/div
div class=comentariohola mundo3/div
div class=comentariohola mundo4/div
div class=comentariohola mundo5/div
Escribe tu bobada: input id='focuseame' /
/div
script
document.getElementById(focuseame).focus();
/script
basicamente, devuelves el foco al input box cada vez que se escribe
algo nuevo, lo nuevo que se escriba lo añades justo antes de
focuseame.
al tener el focus, todo lo que se salga de la caja no se ve, solo lo
ultimo dicho, aqui tiene 100 pixeles de ancho, pero probablemente lo
quieres ajustar por javascript a un poco menos de la altura de la
pantalla. Y posiblemente quieres eliminar los comentarios antiguos,
eso lo puedes hacer como comente antes, siguiendo un ciclo numerico
con los id's.
--
--
ℱin del ℳensaje.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
