Foros del Web » Programando para Internet » Jquery »

Centrar y fijar DIV con javascript

Estas en el tema de Centrar y fijar DIV con javascript en el foro de Jquery en Foros del Web. Buenas noches Encontre este forma de fijar una DIV con javascript : http://www.harrycampaz.com/2014/02/c...ndo-damos.html Funciona correctamente pero cuando muevo el scroll la DIV se me ubica ...
  #1 (permalink)  
Antiguo 12/12/2015, 20:25
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 5 meses
Puntos: 9
Pregunta Centrar y fijar DIV con javascript

Buenas noches
Encontre este forma de fijar una DIV con javascript:
http://www.harrycampaz.com/2014/02/c...ndo-damos.html

Funciona correctamente pero cuando muevo el scroll la DIV se me ubica en la esquina superior izquierda.

Intenté con esto pero sigue igual:

Código Javascript:
Ver original
  1. $('#piezas').css('margin','0','auto','0','auto');

¿Cómo hago para que se centre la DIV cuando mueva el scroll?

Gracias por su ayuda
__________________
Diseñador Gráfico publicitario
  #2 (permalink)  
Antiguo 12/12/2015, 20:41
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 8 meses
Puntos: 977
Respuesta: Centrar y fijar DIV con javascript

Si quieres que el elemento quede centrado incluso cuando se mueve la barra de desplazamiento, tienes que trabajar con el evento scroll. Una forma efectiva de centrar elementos es la siguiente:
Código Javascript:
Ver original
  1. var elem = document.getElementById("id del elemento"), //El elemento
  2.     elemWidth = elem.offsetWidth, //Ancho del elemento
  3.     elemHeight = elem.offsetHeight, //Alto del elemento
  4.     winWidth = window.innerWidth, //Ancho de la ventana
  5.     winHeight = window.innerHeight, //Alto de la ventana
  6.     winX = window.scrollX, //Cantidad desplazada horizontalmente (scroll)
  7.     winY = window.scrollY; //Cantidad desplazada verticalmente (scroll)
  8.        
  9. elem.style.marginTop = (winHeight / 2 - elemHeight / 2) + winY + "px"; //Centrado vertical
  10. elem.style.marginLeft = (winWidth / 2 - elemWidth / 2) + winX + "px"; //Centrado horizontal

Y para que tenga efecto tanto al cargar el documento como al producirse el scroll, hay que tener este script en una función que se ejecute cuando se produzcan los eventos DOMContentLoaded (carga del DOM) y scroll:
Código Javascript:
Ver original
  1. function centrar(){
  2.     var elem = document.getElementById("id del elemento"), //El elemento
  3.         elemWidth = elem.offsetWidth, //Ancho del elemento
  4.         elemHeight = elem.offsetHeight, //Alto del elemento
  5.         winWidth = window.innerWidth, //Ancho de la ventana
  6.         winHeight = window.innerHeight, //Alto de la ventana
  7.         winX = window.scrollX, //Cantidad desplazada horizontalmente (scroll)
  8.         winY = window.scrollY; //Cantidad desplazada verticalmente (scroll)
  9.        
  10.     elem.style.marginTop = (winHeight / 2 - elemHeight / 2) + winY + "px"; //Centrado vertical
  11.     elem.style.marginLeft = (winWidth / 2 - elemWidth / 2) + winX + "px"; //Centrado horizontal
  12. }
  13.  
  14. document.addEventListener("DOMContentLoaded", centrar, false);
  15. window.addEventListener("scroll", centrar, false);

DEMO

Un saludo
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 13/12/2015, 09:58
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 5 meses
Puntos: 9
Respuesta: Centrar y fijar DIV con javascript

Hola Alexis88
Mira el código que utilizo pues lo que yo busco es que la DIV se quede fija y cuando baje el scroll quede centrada:

Código Javascript:
Ver original
  1. $(function(){ // document ready
  2.  
  3.     if (!!$('#piezas').offset()) { // make sure ".sticky" element exists
  4.     var stickyTop = $('#piezas').offset().top; // returns number
  5.     $(window).scroll(function(){ // scroll event
  6.     var windowTop = $(window).scrollTop(); // returns number
  7.  
  8.     if (stickyTop < windowTop){
  9.     $('#piezas').css({ position: 'fixed', top: 0 });
  10.     } else {
  11.     $('#piezas').css('position','static');
  12.    
  13.     }
  14.  
  15. });
  16.  
  17. }
  18.  
  19. });

Yo pongo esto pero cuando bajo el scroll no me queda centrado
Código Javascript:
Ver original
  1. $('#piezas').css('margin','0','auto','0','auto');

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #4 (permalink)  
Antiguo 13/12/2015, 15:57
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 8 meses
Puntos: 977
Respuesta: Centrar y fijar DIV con javascript

Quizá porque debe ser 0 auto, sin comas de por medio.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 13/12/2015, 19:45
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 5 meses
Puntos: 9
Respuesta: Centrar y fijar DIV con javascript

Hola Alexis88
No de ninguna de estas formas tampoco me lo centra al mover el scroll

Código Javascript:
Ver original
  1. $('#piezas').css('margin','0', 'auto');

Código Javascript:
Ver original
  1. $('#piezas').css('margin','0 auto');
__________________
Diseñador Gráfico publicitario
  #6 (permalink)  
Antiguo 13/12/2015, 23:30
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 8 meses
Puntos: 977
Respuesta: Centrar y fijar DIV con javascript

¿Podrías mostrarnos en qué parte tienes eso exactamente? Solo el bloque de código en cuestión, no lo que no tenga que ver.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #7 (permalink)  
Antiguo 14/12/2015, 05:27
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 5 meses
Puntos: 9
Respuesta: Centrar y fijar DIV con javascript

Hola Alexis88
El el código lo puse arriba en el tercer post.

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario
  #8 (permalink)  
Antiguo 14/12/2015, 09:53
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 8 meses
Puntos: 977
Respuesta: Centrar y fijar DIV con javascript

Me refiero al sector de tu código en el que has colocado esa línea.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #9 (permalink)  
Antiguo 16/12/2015, 05:54
Avatar de ceaped  
Fecha de Ingreso: febrero-2004
Mensajes: 2.185
Antigüedad: 20 años, 5 meses
Puntos: 9
Respuesta: Centrar y fijar DIV con javascript

Hola Alexis88

En esta etiqueta
Código HTML:
Ver original
  1. <div id="piezas">
  2. <div class="dragableBox" id="box1"><img src="images/pieza_13.png" alt="Título"></div>
  3. <div class="dragableBox" id="box2"><img src="images/pieza_18.png" alt="Título"></div>
  4. <div class="dragableBox" id="box3"><img src="images/pieza_10.png" alt="Título"></div>
  5. </div>

Gracias por tu ayuda
__________________
Diseñador Gráfico publicitario

Etiquetas: fijar, funcion, html, javascript
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 18:30.