Usando los "offset" se pueden hacer muchas cosas... 2 posibles las comentare ahora:
CENTRAR UNA CAPAEn
este tutorial expliqué como poner una capa centrada.
Ahora usando offset centraremos una capa la cual no sabemos las dimensiones.
Imaginemos que tenemos un codigo PHP que mostrara un div con una alerta, como no sabemos lo que ocupa el texto, no nos arriesgamos a poner unas medidas fijas ya que quedara o grande o pequeño, asi que colocamos el div, algo asi:
// Cuidado con la ID
echo '<div id="midiv" style="position:absolute;">'.$textoalerta.'</div>';
Para kien no sepa PHP (raro en un foro de PHP) $textoalerta es el texto, (que es mas grande logicamente) y la etiketa div lo k debe interesar ahora.
Para que el div se centre, ejecutaremos una funcion al cargar la pagina, añadiendo onload al body asi:
<body onload="centrardiv();">
ahora crearemos la funcion (obviamente va en el HEAD, en una etiketa script):
function centrardiv() {
var div = document.getElementById('midiv'); <!--Obtenemos el objeto del div-->
div.style.marginTop = '-' + (div.offsetTop/2) + 'px'; <!-- Ponemos el margin del top, con el offset entre 2, la mitad; el "-" delante y "px" detras
div.style.marginLeft = '-' + (div.offsetLeft/2) + 'px'; <!-- Igual con left -->
}
De esta manera hemos centrado el div perfectamente y sin lios de cabeza calculando anchos de texto
SABER DIMENSIONES DE PÁGINASaber las dimensiones de una página ha sido siempre un engorro, usando los offset, se obtiene de una manera facil las dimensiones de la misma:
Primero creamos una variable para el ancho y alto de la pagina, fuera de cualkier funcion (pero dentro de la etiketa SCRIPT)
var ancho_ventana, alto_ventana;
Añadimos al body un onload:
<body onload="dimensiones();">
ponemos un div de 1x1, con visibility:hidden para k no se vea, con posicion absolute, right y bottom a 0, para k kede en la eskina inferior derecha
<div id="dimensiones" style="position:absolute;right:0px;bottom:0px;width:1px;height:1px;visibility:hidden;"></div>
ATENCION: Si ponemos el codigo al principio del body, obtendremos las dimensiones SIN scroll, si lo ponemos al final, tras todo codigo, lo obtendremos CON scroll, podeis poner las 2 con 2 id y funciones distintas, por supuesto
Ahora la funcion
function dimensiones() {
var div = document.getElementById('dimensiones'); <!-- el div -->
ancho_ventana = div.offsetLeft+1; <!-- cogemos la distancia a la izkierda y sumamos 1, asi obtenemos el ancho -->
alto_ventana = div.offsetTop+1; <!-- igual con el alto -->
}
Hemos obtenido las medidas en 2 variables rapidamente!!!
Espero que os haya gustado, pronto pondre mas "tutos"
