 |
Andrés Fernández |
 |
26/7/2008 |
 |
1505 |
 |
0 |
 |
|
 |
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
Vamos a ver cómo obtener determinadas dimensiones de nuestra página para usarlos luego en algunos ejercicios que escribiremos cuando el tiempo y las ganas nos lo permitan.
Primero, vamos a definir "viewport". Viewport es la porción visible de nuestra página. Porqué decimos porción visible? Pues porque es muy probable que haya otra porción que haya quedado oculta y que sólo sea visible usando las barras de scroll. De manera que la superficie total de nuestra página será equivalente a la suma de la superficie del viewport más la superficie de la zona oculta por el scroll. Hasta aquí todo bien, el problema es que la obtención de estos datos se hace de manera diferente en distintos navegadores.
Veamos una función que considera estas diferencias y nos devolverá los datos que necesitamos:
<script>
function getWindowData(){
var widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal;
if (typeof window.innerWidth != 'undefined'){
widthViewport= window.innerWidth-17;
heightViewport= window.innerHeight-17;
}else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth !='undefined' && document.documentElement.clientWidth != 0){
widthViewport=document.documentElement.clientWidth;
heightViewport=document.documentElement.clientHeight;
}else{
widthViewport= document.getElementsByTagName('body')[0].clientWidth;
heightViewport=document.getElementsByTagName('body')[0].clientHeight;
}
xScroll=self.pageXOffset || (document.documentElement.scrollLeft+document.body.scrollLeft);
yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);
widthTotal=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,widthViewport);
heightTotal=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,heightViewport);
return [widthViewport,heightViewport,xScroll,yScroll,widthTotal,heightTotal];
}
</script>
|
Como vemos, la función retorna un array con los siguientes elementos:
widthViewport: el ancho del viewport.
heightViewport: el alto del viewport.
xScroll: la medida del desplazamiento horizontal del scroll.
yScroll: la medida del desplazamiento vertical del scroll.
widthTotal: el ancho total de la página (porción visible más porción oculta por el scroll).
heightTotal: el alto total de la página (porción visible más porción oculta por el scroll).
Y pára qué puede servirnos esto? Seguramente habrás visto esas páginas que colocan una capa semitransparente sobre la página para simular un diálogo modal o para mostrar imágenes... Bueno, los datos que recogemos de esta manera son fundamentales para lograr esos efectos... Igualmente, paciencia, en otro artículo ya veremos cómo usar esta función y sacarle provecho.
|
|
volver |
|
|
|
|
