Foros del Web » Programando para Internet » Jquery »

[APORTE] Simple funcion de centrar elementos

Estas en el tema de [APORTE] Simple funcion de centrar elementos en el foro de Jquery en Foros del Web. Buenas gente, espero esten bien. Bueno, he creado dos funciones para poder centrar elementos. Una centra un elemento al centro de la pantalla y la ...
  #1 (permalink)  
Antiguo 19/12/2016, 05:04
 
Fecha de Ingreso: agosto-2015
Ubicación: Rosario - Argentina
Mensajes: 418
Antigüedad: 4 años, 1 mes
Puntos: 11
[APORTE] Simple funcion de centrar elementos

Buenas gente, espero esten bien.

Bueno, he creado dos funciones para poder centrar elementos.

Una centra un elemento al centro de la pantalla y la otra, centra el elemento al centro de otro elemento deseado.

CentrarVentana() lleva 2 parametros, primero el objeto y luego el tipo de position

CentrarEnVentana() lleva 5 parametros, primero el objeto principal, segundo el objeto que estara dentro del objeto principal, tercero la Position, cuarto top, bottom o center y por ultimo right, left o center

De esta manera, centrando un contenedor dentro de otro, podremos decirle si queremos que este centrado, arriba y a la izquierda etc... eso sera a gusto.

Aqui esta:
Código Javascript:
Ver original
  1. CentrarVentana($("#miobjeto1"), 'fixed');
  2. CentrarEnVentana($("#miobjeto1"), $("#miobjeto2"), 'fixed', 'center', 'center');
  3.  
  4. function CentrarVentana(objeto, option){
  5.     //-----> Ancho y Alto del objeto.
  6.     var AnchoObjeto = objeto.width();
  7.     var AltoObjeto = objeto.height();
  8.  
  9.     //----> Ancho y Alto del navegador.
  10.     var AnchoNavegador = $(window).width();
  11.     var AltoNavegador = $(window).height();
  12.  
  13.     //----> Posicion X-Y del objeto.
  14.     var PosicionX = (AnchoNavegador / 2) - (AnchoObjeto / 2);
  15.     var PosicionY = (AltoNavegador / 2) - (AltoObjeto / 2);
  16.    
  17.     //----> Propiedades CSS del objeto.
  18.     if(option == "fixed" || option == "absolute" || option == "relative"){
  19.         objeto.css({"position":""+option+"", "left":PosicionX+"px", "top":PosicionY+"px"});
  20.     }else{
  21.         objeto.css({"position":""+option+"", "margin-left":PosicionX+"px", "margin-top":PosicionY+"px"});
  22.     }
  23. }
  24.  
  25. function CentrarEnVentana(objeto1,objeto2,option,y,x){
  26.     //-----> Ancho y Alto del objeto2.
  27.     var AnchoObjeto = objeto2.width();
  28.     var AltoObjeto = objeto2.height();
  29.  
  30.     //----> Ancho y Alto del objeto1.
  31.     var AnchoContenedor = objeto1.width();
  32.     var AltoContenedor = objeto1.height();
  33.  
  34.     //----> Posicion X-Y del objeto2.
  35.     var PosicionX = (AnchoContenedor / 2) - (AnchoObjeto / 2);
  36.     var PosicionY = (AltoContenedor / 2) - (AltoObjeto / 2);
  37.  
  38.     //----> Mandar dentro del objeto1.
  39.     var PosX = objeto1.position();
  40.     PosX = PosX.left;
  41.     PosicionX = PosX + PosicionX;
  42.  
  43.     var PosY = objeto1.position();
  44.     PosY = PosY.top;
  45.     PosicionY = PosY + PosicionY;
  46.  
  47.     //----> Propiedades CSS del objeto2.
  48.     if(option == "fixed" || option == "absolute" || option == "relative"){
  49.  
  50.         if(y == 'top'){
  51.             objeto2.css({"top":PosY+"px"});
  52.         }else if(y == 'bottom'){
  53.             objeto2.css({"top":(PosY + AltoContenedor) - (AltoObjeto)+"px"});
  54.         }else{
  55.             objeto2.css({"top":PosicionY+"px"});
  56.         }
  57.  
  58.         if(x == 'left'){
  59.             objeto2.css({"left":PosX+"px"});
  60.         }else if(x == 'right'){
  61.             objeto2.css({"left":(PosX + AnchoContenedor) - (AnchoObjeto)+"px"});
  62.         }else{
  63.             objeto2.css({"left":PosicionX+"px"});
  64.         }
  65.         objeto2.css({"position":""+option+""});
  66.     }else{
  67.         if(y == 'top'){
  68.             objeto2.css({"margin-top":PosY+"px"});
  69.         }else if(y == 'bottom'){
  70.             objeto2.css({"margin-top":(PosY + AltoContenedor) - (AltoObjeto)+"px"});
  71.         }else{
  72.             objeto2.css({"margin-top":PosicionY+"px"});
  73.         }
  74.  
  75.         if(x == 'left'){
  76.             objeto2.css({"margin-left":PosX+"px"});
  77.         }else if(x == 'right'){
  78.             objeto2.css({"margin-left":(PosX + AnchoContenedor) - (AnchoObjeto)+"px"});
  79.         }else{
  80.             objeto2.css({"margin-left":PosicionX+"px"});
  81.         }
  82.         objeto2.css({"position":""+option+""});
  83.     }
  84. }

Es solo un pequeño e insignificante aporte para no tener que programar a cada rato cuando queremos centrar un elemento en pantalla u otro dentro de otro.

Espero que a alguien le sirva, saludos!

Última edición por TrinityCore; 19/12/2016 a las 06:23

Etiquetas: elementos, funcion, simple
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 23:42.