chat al mejor estilo facebook

dieguicho · #1 (**permalink**) 12/07/2009, 18:33

estimados.. estoy armando un chat como el de facebook
voy recien por la parte del maqueatado CSS

luego armare la parte ajax, pero eso es otra historia

les dejo el url para que lo vayan viendo

http://tinyurl.com/mw33lw

dos cosas no me estan saliendo

1. no puedo generar la barra al fondo, osea si queda al fondo pero no con position: absolute (cuando expando una ventana se me agranda la banda)

2. puse a modo de ejemplo dos ventanitas de chat inicialmente minimizadas, pero al expandir una... la de al lado se va para arriba, en vez de quedarse abajo

que les parece?

daPhyre · #2 (**permalink**) 12/07/2009, 19:50

Se ve bien. Primero, te recomiendo que uses más los formatos resumidos, que en chat tienes borde, estilo y color para cada borde por separado.

Ahora, creo que todo lo tienes dentro de la barra. Prueba ponerlos fuera o con posición absoluta, y quizá se corrija el error. suerte

dieguicho · #3 (**permalink**) 12/07/2009, 19:57

formato resumido es por ej

border: 0 1 0 1 ????

lo segundo.. tiene que estar dentor de la barra. sino serian cajitas volando..
ahi le agregue la funcionalidad que muestra /oculta el chat con cada usuario ;)

daPhyre · #4 (**permalink**) 12/07/2009, 20:13

Permíteme jugar un poco con tu código, debo admitir que me ha parecido interesante. Te lo devolveré pronto corregido si todo sale bien

dieguicho · #5 (**permalink**) 12/07/2009, 20:16

con todo gusto ;)

daPhyre · #6 (**permalink**) 12/07/2009, 20:51

Es un poco más complejo de lo que pensé... Creo que me llevará un largo rato. A ver si alguien más nos puede echar una mano mientras...

dieguicho · #7 (**permalink**) 12/07/2009, 20:58

tambien probé esto sin exito

.chat {
bottom:0;
position:fixed;
}

peor igual al abrir otra ventanita se alinea todo arriba

daPhyre · #8 (**permalink**) 12/07/2009, 21:04

Lo probé en content con mayor éxito, pero sin lo necesario. Es difícil encontrar una forma en que sea absoluta y relativa a la vez. Comienzo a suponer que podría ser con un margin negativo que lo mueven, pero si edito algo, lo demás se sale de su contenido. Estoy teniendo problemas para acoplarme al código, creo que lo tendré que dejar por esta noche :S

willyfc · #9 (**permalink**) 13/07/2009, 08:48

Lo que tendrías que hacer para que la barra no crezca junto la caja de los usuarios es declararla fuera de la barra. Mira un ejemplo:

Código html:

Ver original<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0; padding:0;}
html, body {width:100%; 
height:100%; 
overflow:hidden; 
}
.contenido{width:100%;height:100%;overflow: auto;}
.banda{width:100%; height:35px; position:absolute; bottom:0; background:#D7F4F3;}
.chat{ position:absolute; right:0%; bottom:0%; border-bottom:1px solid #999; border-left:1px solid #999; border-top:1px solid #999; height:100px; width:180px;background:#D7F4F3;}
.chat p{margin:7px 0; text-align:center;}
.chat a{ text-decoration:none; color:#333; display:block;}
.usuarios{display:block; width:90%; border-bottom:1px solid #999; margin:3px auto;}
</style>
</head>
 
<body>
<div class="contenido">
    <p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
<p>Aqui va todo el contenido</p>
</div>
<div class="banda"></div>
<div class="chat">
        <p><a href="#">usuarios conectados <strong>(2)</strong></a></p>
        <span class="usuarios">Maria</span>
        <span class="usuarios">Javier</span>
</div>
</body>
</html>
 
 
Espero te sirva.

dieguicho · #10 (**permalink**) 13/07/2009, 09:42

perfecto.. uno menos, la barra no contiene las cajitas sino que simplemente es para pintar un fondo, con position absolute ponemos las cajitas encima.

me falta poder alinear todos los divs bottom

dieguicho · #11 (**permalink**) 13/07/2009, 10:14

he publicado nuevamente el chat con los cambios en la misma url

http://tinyurl.com/mw33lw

sigue estado el problema de alinear los divs de las cajitas abajo, que no encuentro la vuelta por ningun lado

ya esta separada la banda del contenedor de las cajitas, pero lo puse a mitad de pantalla para que se note el error

dieguicho · #12 (**permalink**) 13/07/2009, 13:14

bueno.. lo he solucionado a medias poniendo a .chat {right:0}
ahora me surge un nuevo problema que es que todas las cajitas se me abren en right:0 osea se van pisando una sobre otra... vere como lo resuelvo.

sigo subiendo updates por si a alguien le interesa ;)

dieguicho · #13 (**permalink**) 26/07/2009, 19:30

bueno... ahi va progresando un poco este chat

estoy teniendo algunos problemitas con las clases, que no estoy entendiendo bien como funciona el tema, si alguien revisa un poco el codigo se lo voy a agradecer ya que probe 10.000 cosas y no le encuentro la vuelta

del listado de usuarios elijo uno y le doy click para abrir una ventanita (aun no se puede escribir ni nada, voy por la parte de las ventanitas recien)
y me la abre correctamente, pero para minimizarla hay que dar dos clicks a la barra, deberia de ser solo uno, me parece que no esta interpretando this.isMaximized
como que al primer click es undefined y lo setea y recien en el segundo se produce la accion como debe ser

perdon por lo extenso... aqui esta el link al chat http://tinyurl.com/chatcito

dieguicho · #14 (**permalink**) 27/07/2009, 07:09

ups... lo continuo en el foro javascript ...

radiotec · #15 (**permalink**) 11/04/2011, 12:46

Hola brother como estamos :D me parese bien pero no sirve el link para visualisarlo o descargarlo :S espero y me lo puedas pasar o subirlo para checarlo n.n gracias :)

radiotec · #16 (**permalink**) 11/04/2011, 13:05

que onda bro de casualidad tendras el codigo o a donde puedo ver el ejemplo de ese chat n.n saludos n.n