Foros del Web » Programando para Internet » Javascript »

div flotante y centrado SIEMPRE

Estas en el tema de div flotante y centrado SIEMPRE en el foro de Javascript en Foros del Web. Hola a todos, quiero poder poner un div al centro de la pantalla, sin importar donde esté mi scroll vertical u horizontal. seguramente necesitaré saber ...
  #1 (permalink)  
Antiguo 16/01/2009, 12:05
Avatar de mamon  
Fecha de Ingreso: enero-2002
Ubicación: Lima
Mensajes: 1.302
Antigüedad: 22 años, 4 meses
Puntos: 3
div flotante y centrado SIEMPRE

Hola a todos, quiero poder poner un div al centro de la pantalla, sin importar donde esté mi scroll vertical u horizontal. seguramente necesitaré saber los tamaños del div, de la pantalla, la posición del scroll, etc. Pero eso creo que no es lo más difícil, aunque con IE me está volviendo loco ese tema, lo más complicado es hacer que siempre esté al centro aun después de mostrarlo y mover el scroll verdad?.

Alguien tiene algún ejemplo? (no quiero una librería de javascript porque solo quiero eso).

Gracias de antemano
__________________
Yo si sé lo que es trabajar duro, porque lo he visto.
  #2 (permalink)  
Antiguo 16/01/2009, 17:37
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 16 años, 2 meses
Puntos: 53
Respuesta: div flotante y centrado SIEMPRE

Uhmmm explicate bien, lo que creo saber es que deseas un div centrado encima de todo (El para que hacer eso no es mi problema, aunque no imagino para que lo quieres.) esto es temna de CSS, noto que demasiada gente confunde el CSS con el javascript.

Con CSS podrìas resolverlo de la sgte manera.


Supongamos que tienes un div contenedor, entonces el div centrado tendrá que ir encima de este, ¿Còmo? con z-index. el contenedor, deberá tener un z-index más bajo que el div centrado. entonces podría ser:

Código:
#contenedor{
z-index:10;
}

#centrado{
z-index:100;
}

luego quieres centrar el div entonces solo debes usar la propiedad position, en tu caso debe ser fixed, pensemos que tu div tiene 400 pixeles de ancho, y 400 de alto, entonces serìa asi:

Código:
#centrado{
position:fixed;
margin-left:50%;
margin-top:50%;
width:400px;
height:400px;
margin-left:-200px; //aqui centra
margin-top:-200px; //aqui centra
}
Latimosamente, esto no se dá en todos los navegadores, ya que el ie no acepta la propiedad fixed en el internet explorer 6. Para eso debemos usar expresiones en el CSS, cosa que me repugna pues no valida el código (Hasta cuando soportaremos a IE?) yo por mi parte paso de ello y no arreglaría el problema y los que usan ie6 que se jodan, pero bueno.



Puedes usar este archivo js para arreglar eso:

http://www.doxdesk.com/software/js/fixed.html
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #3 (permalink)  
Antiguo 17/01/2009, 18:34
Avatar de mamon  
Fecha de Ingreso: enero-2002
Ubicación: Lima
Mensajes: 1.302
Antigüedad: 22 años, 4 meses
Puntos: 3
Respuesta: div flotante y centrado SIEMPRE

Si sé cómo centrarlo con CSS, pero lo que pasa es que hay un link en la parte abajo de la página, cuando le des click que se muestre, el div, y esté centrado, ya hay un scroll y el éste puede ser más grande, más chico, lo que sea... x eso necesito, con el javascript, saber el tamaño de la pantalla, dodne está el scroll, etc etc etc... y además que aunque mueva el scroll el div se siga mostrando centrado.
__________________
Yo si sé lo que es trabajar duro, porque lo he visto.
  #4 (permalink)  
Antiguo 18/01/2009, 16:12
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 16 años, 2 meses
Puntos: 53
Respuesta: div flotante y centrado SIEMPRE

Depende de para que necesites el que esté centrado, si es para que no se salga de foco y DEBAN ver lo que estás mostrando, entonces mediante javascript simplemente cuando centres el div, ordenale de paso que el tamaño del body sea de 100% ancho y 100% alto y que tenga un overflow:hidden; y ya está no habrá scroll que pueda moverse.

Solución rápida -.- si no es lo que esperabas me avisas para complementarla más. xD.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #5 (permalink)  
Antiguo 19/01/2009, 11:44
Avatar de mamon  
Fecha de Ingreso: enero-2002
Ubicación: Lima
Mensajes: 1.302
Antigüedad: 22 años, 4 meses
Puntos: 3
Respuesta: div flotante y centrado SIEMPRE

no, lo que espero es que se centre y siempre esté centrado aunque mueva el scroll. Cómo puedo hacer eso?

Gracias.
__________________
Yo si sé lo que es trabajar duro, porque lo he visto.
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.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 02:11.