Tecnología

Inicio

Cómo cambiar Coordenadas cuando una página Cambia el tamaño

October 10

Una de las propiedades más poderosas de código HTML bien escrito es que el contenido aparecerá en una forma legible en muchas ventanas del navegador de diferentes tamaños y pantallas. Sin embargo, puede encontrarse con situaciones de diseño web que requieren de adaptaciones más específicas a las dimensiones de la página HTML que lo único que puede hacer frente. En estas situaciones, utilice el código JavaScript para volver a calibrar las coordenadas y tamaños de los elementos en su página web, si la página se cambia el tamaño después de la carga.

Instrucciones

1 Inserte el siguiente código entre las etiquetas "cabeza" de su documento HTML:

<Script type = "text / javascript">

función de actualización () {

var pwidth = window.innerWidth;

var = pheight window.innerHeight;

var obj = document.getElementById ( "div1");

obj.style.width = pwidth / 3 + 'px';

obj.style.height = obj.style.width;

obj.style.left = pwidth - obj.offsetWidth + 'px';

obj.style.top = pheight - obj.offsetHeight + 'px';

}

window.onresize = refresco;

</ Script>

Este código cambiará el tamaño y la posición del elemento con el ID "div1" cuando se cambia el tamaño de la ventana del navegador, por lo que es cuadrado y colocarlo en la esquina inferior derecha de la ventana. Tenga en cuenta que muchas de estas tareas pueden ser más eficiente logrado con código CSS solo; este código es simplemente un ejemplo. El gestor de eventos "onresize" es el mecanismo que desencadena la función cuando el usuario cambia el tamaño de la ventana.

2 Agregue el código siguiente entre las etiquetas "cabeza", después de las etiquetas "escritura":

<Style type = "text / css">

div1 {

frontera: 2px negro de puntos;

position: absolute;

}

cuerpo{

sobrecarga oculta;

}

</ Style>

3 Añadir una llamada a "refrescar" cuando se carga la página añadiendo el atributo "onLoad" a la etiqueta "cuerpo":

<Body onLoad = "refresh ();">

Este se encargará de la colocación inicial de la div.

4 Agregue el código siguiente en el cuerpo del documento HTML:

<Div id = "div1"> </ div>

5 Guarde la página y lo carga en un navegador Web. Cambiar el tamaño de la página. El div cambia de tamaño y se trasladó basado en nuevas coordenadas de la página.