javascript - detectar - ¿Cómo implementar una página web que se escala cuando se cambia el tamaño de la ventana del navegador?
detectar cambio de tamaño de ventana javascript (11)
¡Gracias por todas las sugerencias! Parece que las cosas feas que tuve que hacer eran necesarias. Los siguientes trabajos (en mi máquina, de todos modos) en IE y FireFox. Puedo hacer un artículo sobre esto para CodeProject.com más tarde ;-)
Este javascript va en la sección <head>:
<script type="text/javascript">
var tmout = null;
var mustReload = false;
function Resizing()
{
if (tmout != null)
{
clearTimeout(tmout);
}
tmout = setTimeout(RefreshAll,300);
}
function Reload()
{
document.location.href = document.location.href;
}
//IE fires the window''s onresize event when the client area
//expands or contracts, which causes an infinite loop.
//the way around this is a hidden div set to 100% of
//height and width, with a guard around the resize event
//handler to see if the _window_ size really changed
var windowHeight;
var windowWidth;
window.onresize = null;
window.onresize = function()
{
var backdropDiv = document.getElementById("divBackdrop");
if (windowHeight != backdropDiv.offsetHeight ||
windowWidth != backdropDiv.offsetWidth)
{
//if screen is shrinking, must reload to get correct sizes
if (windowHeight != backdropDiv.offsetHeight ||
windowWidth != backdropDiv.offsetWidth)
{
mustReload = true;
}
else
{
mustReload = mustReload || false;
}
windowHeight = backdropDiv.offsetHeight;
windowWidth = backdropDiv.offsetWidth;
Resizing();
}
}
</script>
el <cuerpo> comienza así:
<body onload="RefreshAll();">
<div id="divBackdrop"
style="width:100%; clear:both; height: 100%; margin: 0;
padding: 0; position:absolute; top:0px; left:0px;
visibility:hidden; z-index:0;">
</div>
los DIV flotan a la izquierda para el diseño. Tuve que configurar la altura y el ancho a porcentajes apenas inferiores a la cantidad total (por ej., 99.99%, 59.99%, 39.99%) para evitar que los flotadores se envolvieran, probablemente debido a los bordes de los DIV.
Finalmente, después de la sección de contenido, otro bloque de JavaScript para administrar la actualización:
var isWorking = false;
var currentEntity = <%=currentEntityId %>;
//try to detect a bad back-button usage;
//if the current entity id does not match the querystring
//parameter entityid=###
if (location.search != null && location.search.indexOf("&entityid=") > 0)
{
var urlId = location.search.substring(
location.search.indexOf("&entityid=")+10);
if (urlId.indexOf("&") > 0)
{
urlId = urlId.substring(0,urlId.indexOf("&"));
}
if (currentEntity != urlId)
{
mustReload = true;
}
}
//a friendly please wait... hidden div
var pleaseWaitDiv = document.getElementById("divPleaseWait");
//an example content div being refreshed via AJAX PRO
var contentDiv = document.getElementById("contentDiv");
//synchronous refresh of content
function RefreshAll()
{
if (isWorking) { return; } //no infinite recursion please!
isWorking = true;
pleaseWaitDiv.style.visibility = "visible";
if (mustReload)
{
Reload();
}
else
{
contentDiv.innerHTML = NAMESPACE.REFRESH_METHOD(
(currentEntity, contentDiv.offsetWidth,
contentDiv.offsetHeight).value;
}
pleaseWaitDiv.style.visibility = "hidden";
isWorking = false;
if (tmout != null)
{
clearTimeout(tmout);
}
}
var tmout2 = null;
var refreshInterval = 60000;
//periodic synchronous refresh of all content
function Refreshing()
{
RefreshAll();
if (tmout2 != null)
{
clearTimeout(tmout2);
tmout2 = setTimeout(Refreshing,refreshInterval);
}
}
//start periodic refresh of content
tmout2 = setTimeout(Refreshing,refreshInterval);
//clean up
window.onunload = function()
{
isWorking = true;
if (tmout != null)
{
clearTimeout(tmout);
tmout = null;
}
if (tmout2 != null)
{
clearTimeout(tmout2);
tmout2 = null;
}
feo, pero funciona, que supongo que es lo que realmente importa ;-)
¿Cómo implementar una página web que se escala cuando se cambia el tamaño de la ventana del navegador?
Puedo diseñar los elementos de la página utilizando una tabla o secciones flotantes de CSS, pero quiero que la pantalla cambie de escala cuando se cambie el tamaño de la ventana del navegador
Tengo una solución de trabajo que usa AJAX PRO y DIVs con overflow: auto y un gancho de onwindowresize, pero es engorroso. ¿Hay una mejor manera?
gracias a todos por las respuestas hasta ahora, intento probarlos todos (o al menos la mayoría de ellos) y luego elegir la mejor solución como respuesta a este hilo
usar CSS y porcentajes parece funcionar mejor, que es lo que hice en la solución original; Usando una visibilidad: div oculto establecido al 100% por 100% da una forma de medir el área del cliente de la ventana [difícil en IE de lo contrario], y una función onWindowresize javascript permite que los métodos AJAXPRO entren cuando la ventana se redimensiona para redibujar el contenido de celda de disposición en la nueva resolución
EDIT: mis disculpas por no ser completamente claro; Necesitaba un "diseño líquido" en el que los elementos principales ("paneles") escalaran a medida que se redimensionaba la ventana del navegador. Descubrí que tenía que usar una llamada AJAX para volver a mostrar el contenido del ''panel'' después de cambiar el tamaño, y mantener el desbordamiento: auto encendido para evitar el desplazamiento
¡Utiliza porcentajes! Supongamos que tiene un "panel principal" en el que se encuentra todo el contenido de su página. Desea que esté centrado en la ventana, siempre, y el 80% del ancho de la ventana.
Simplemente haz esto:
#centerpane {margin: auto; ancho: 80%; }
Tada!
<body onresize = "resizeWindow ()" onload = "resizeWindow ()"> PAGE </ body>
/**** Page Rescaling Function ****/
function resizeWindow()
{
var windowHeight = getWindowHeight();
var windowWidth = getWindowWidth();
document.getElementById("content").style.height = (windowHeight - 4) + "px";
}
function getWindowHeight()
{
var windowHeight=0;
if (typeof(window.innerHeight)==''number'')
{
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight)
{
windowHeight = document.documentElement.clientHeight;
}
else
{
if (document.body && document.body.clientHeight)
{
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
La solución en la que estoy trabajando actualmente necesita algunos cambios en cuanto al ancho; de lo contrario, la altura funciona bien hasta el momento ^^
-Ozaki
A menos que tenga algún requisito específico aquí, no estoy seguro de por qué se necesita JS aquí. Los diseños tabulares son la manera fácil (y arcaica) de hacer diseños fluidos en html, pero los diseños div con css también permiten diseños fluidos, consulte http://www.glish.com/css/2.asp.
Después de probar una solución en el libro, me quedé atrapado con incompatibilidades en Firefox o IE. Así que hice algunas modificaciones y se me ocurrió este CSS. Como puede ver, los márgenes son la mitad del tamaño deseado y negativos.
<head><title>Centered</title>
<style type="text/css">
body {
background-position: center center;
border: thin solid #000000;
height: 300px;
width: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -150px;
margin-right: auto;
margin-bottom: auto;
margin-left: -300px;
}
</style></head>
Espero que ayude
La mejor manera que he visto para hacerlo es usar las herramientas CSS de YUI y luego usar porcentajes para todo. Las Grillas YUI permiten varios diseños de ancho fijo o fluido con tamaños de columna especificados como fracciones del espacio disponible. Hay un generador de grillas YUI para ayudar a establecer las cosas. YUI Fonts te brinda buenos controles de tamaño de fuente. Hay algunas buenas hojas de trucos disponibles que le muestran cómo diseñar cosas útiles, como qué porcentaje especificar para un tamaño de fuente de tantos píxeles.
Esto le permite escalar el posicionamiento, pero la escala de todo el sitio, incluidos los tamaños de fuente, cuando el tamaño de la ventana del navegador es un poco más complicado. Estoy pensando que vas a tener que escribir algún tipo de complemento de navegador para esto, lo que significa que tu solución no será portátil. Si se encuentra en una intranet, esto no es tan malo, ya que puede controlar el navegador de cada cliente, pero si desea un sitio que esté disponible en Internet, es posible que deba reconsiderar su interfaz de usuario.
Otra cosa a tener en cuenta es que JavaScript no se actualizará continuamente mientras se cambia el tamaño de la ventana, por lo que habrá un retraso / interrupción notable. Con un diseño fluido de CSS, los elementos de la pantalla se actualizarán casi instantáneamente para una transición sin problemas.
Realmente depende de la página web que está implementando. Como regla general, querrás 100% CSS. Al dimensionar los elementos que contendrán texto, recuerde gravitar hacia tamaños orientados al texto, como em, ex y no px.
Los flotadores son peligrosos si eres nuevo en CSS. No soy nuevo y todavía me desconciertan. Evítalos cuando sea posible. Normalmente, solo necesita modificar la propiedad de visualización del div o elemento en el que está trabajando de todos modos.
Si hace todo esto y recorre la web donde tiene dificultades adicionales, no solo tendrá páginas que cambian de tamaño cuando el navegador lo haga, sino también páginas que se pueden ampliar y reducir cambiando el tamaño del texto. Básicamente, hazlo bien y el diseño es irrompible. Lo he visto hacer en diseños complejos pero es mucho trabajo, tanto esfuerzo como programar la página web en ciertas instancias.
No estoy seguro para quién estás haciendo este sitio (diversión, ganancias, ambos), pero te recomendaría que pienses mucho sobre cómo equilibrar la pureza de CSS con algunos trucos aquí y allá para ayudar a aumentar tu eficiencia. . ¿Tiene su sitio web una necesidad comercial para ser 100% accesible? ¿No? Entonces atorníllalo. Haga lo que tenga que hacer para ganar dinero primero, luego enloquezca con su pasión y haga cualquier cosa adicional para la que tenga tiempo.
Suena como si quisieras ver un diseño fluido de CSS. Para obtener recursos sobre esto, solo el diseño de CSS fluido de Google debe darle un montón de cosas para verificar. También eche un vistazo a esta pregunta anterior para algunos buenos consejos.
en lugar de usar en css digamos "ancho: 200px", use cosas como "ancho: 50%"
Esto hace que use el 50% de lo que sea que esté, así que en el caso de:
<body>
<div style="width:50%">
<!--some stuff-->
</div>
</body>
El div ahora siempre ocupará la mitad de la ventana horizontal.
usar ems jontangerine.com y simplebits.com son dos ejemplos increíbles. Lectura adicional - Los Increíbles diseños Em & Elastic con CSS de Jon Tan