Mostrando entradas con la etiqueta scroll en firefox. Mostrar todas las entradas
Mostrando entradas con la etiqueta scroll en firefox. Mostrar todas las entradas

miércoles, 10 de agosto de 2011

Centrar DIV en la pantalla (scroll)

Para centrar un DIV en pantalla podemos crearnos el siguiente class css:
.divCentrado
{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 600px; /*ANCHO DEL DIV DESEADO*/
      height: 400px; /* ALTO DEL DIV DESEADO*/
      margin-top: -200px; /* MITAD DE LA ALTURA*/
      margin-left: -300px; /* MITAD DE LA ANCHURA*/
}
En el caso en el que tuvieramos scroll en la pantalla y que el usuario puediera encontrarse verticalmente en cualquier posición, podemos tener en cuenta el scroll con la siguiente función (válido para multitud de exploradores):

function scrollTop(){

    if(window.pageYOffset){
        return window.pageYOffset;
     }
     else {
        return  Math.max(document.body.scrollTop,document.documentElement.scrollTop);
     }

}       

function centrarDIV(idDIV)
{
     var ypos = (screen.availHeight/4)
     idDIV.style.top = (scrollTop()+ypos) + 'px';
}