Variación del Pop-up ajustado de Tunait

Bravenap · #1 (**permalink**) 01/03/2003, 11:59

No, lo siento, no he creado ninguna variación del código que nos dejó Tunait en las FAQ's (ver ) sobre cómo ajustar una ventana al tamaño de la imagen, sino que lo que vengo es a preguntar (como de costumbre) para una orientación:

Pues bien, estaba pensando si se podría ajustar la ventana, en lugar de a una imagen, a un documento html en sí, con texto, tablas, ... Viene a cuento por el problema de ver el documento entero cuando el usuario cambia su tamaño de texto en el explorador. Se puede impedir, ya lo sé, dándole tamaño al texto con hojas de estilo, pero me gustaría no tener que usarlas, puede que alguien necesite algo más que una lupa para ver algunos textos.

Había pensado que a lo mejor se podría meter todo en una capa, es decir, entre etiquetas DIV con la propiedad overflow: visible y redimensionar al tamaño de la ventana a esa capa.

¿Es factible esto? ¿Merece la pena que intente desarrollarlo por este camino o hay otro más efectivo?

Muchas gracias.

tunait · #2 (**permalink**) 01/03/2003, 19:57

Hola Bravenap!

he jugado unos minutos y de momento sin resultados

Mañana seguiré estrujándome las neuronas (las dos) que a estas horas yá sólo me furula una y la ocupo para las funciones vitales, tales como respiración y contracciones del músculo cardíaco

De todas formas si alguien tiene alguna idea luminosa, la comunique, si es tan amable.

Bravenap · #3 (**permalink**) 02/03/2003, 06:43

Hola Tunait, qué suerte tienes, mi única neurona está ahora parcialmente tocada.... es que tengo un examen de botánica y

.... que le tengo que dar un poco a todo, ¡vamos!

De todas formas no te calientes mucho la cabeza, lo estoy resolviendo con las hojas de estilo de manera provisional y no corre mucha prisa. Sin embargo, me temo que no va a ser tan fácil ... si no lo has resuelto a la primera ....

.

Saludos.

PD: buscando el otro día por ahí me baje un programita alucinante con una biblioteca de códigos y he podido comprobar que nació aquí, en estos foros. Es el Scriptmaster v1.0 de Federico Cargnelutti y muchas otras personas que han colaborado. ¿Sabéis si hay actualizaciones?

tunait · #4 (**permalink**) 02/03/2003, 17:27

Holas de nuevo,

sabes que pasa, que el script de la popup ajustada a foto es capaz de averiguar las dimensiones de la imagen, por eso se puede reajustar sin problema (al menos en NS y en IE)

Pero el tema de averiguar el tamaño de capas o tablas... averigua el width y height que se le haya establecido, no al que se "estiren" en caso de necesidad.

Si a una capa le pido un ancho de 200 pero el contenido la amplía hasta 500, si le pides que te dé la propiedad del width de esa capa seguirá indicando 200

A ver si se me ocurre algún truco para averiguar posibles nuevas dimensiones a nivel de página.

Si a alguien se le ocurre alguna forma que sea tan amable de proponerla

Respecto a estudiar botánica me parece buena decisión

...y respecto a lo del Scriptmaster, efectivamente el proyecto creo recordar que nació aquí en los foros por parte de Tukzone y ha tenido el éxito que merece

Si quieres visitar su sitio está en http://www.webtutorial.com.ar/

Y para ir directamente al Scriptmaster puede ir a http://www.webtutorial.com.ar/scriptmaster/index.php

Un saludo

caricatos · #5 (**permalink**) 03/03/2003, 05:38

Hola Bravenap y Tunait:

Había puesto un post explicando lo que hice, y se me fué la conexión, así que voy a simplificar

:

Éste es el fichero de prueba para el pop-up:

<html>
<body>
<table border="1" cellspacing="40" cellpadding="40">
<tr>
<td >Tabla sin valor</td>
</tr>
</table>
</body>
</html>

... y éste el que genera el pop-up y redimensiona la ventana:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Crear popup con tabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT language=JavaScript>

</SCRIPT>
</head>
<body>
<form name=dimensiones>
ancho:<input type=text name=ancho value=""><br>
alto:<input type=text name=alto value=""><br><br>
Nuevo ancho:<input type=text name=nuevoAncho value=""><br>
nuevo alto:<input type=text name=nuevoAlto value="">
</form>
<input type=button onclick=abrir() value="Abrimos un pop-up">
</body>
</html>

Espero que sirva...

Saludos

tunait · #6 (**permalink**) 03/03/2003, 06:55

Oye qué bueno

furula de coña, no se me habría ocurrido usar el offsetWidth y el offsetHeight.

Para Netscape hay forma de que también lo entienda?

caricatos · #7 (**permalink**) 03/03/2003, 07:47

Hola Tunait:

Tienes toda la razón, no funciona ni en netscape ni en opera.
Supongo que conseguirlo sería toda una proeza (no sabes la cantidad de pruebas que hice, y nada...)

Bueno, supongo que estaremos a la espera que alguna mente prodigiosa nos ayude...

Un abrazo

Bravenap · #8 (**permalink**) 14/03/2003, 02:25

Por fin me decido a escribir porque creía que había encontrado una solución y resulta que caricatos ya lo había resuelto, de la misma manera, pero mejor desarrollada.

Pero no sé que ha podido ocurrir que no me han llegado los mensajes del foro.

Yo había pensado en incluir todo el documento en una tabla con la propiedad nowrap y a la derecha de esa capa incluir un DIV con posición absoluta de manera que al cargarse se comprobara offsetWidth y offsetHeight de esta capa y se redimensionara la ventana.

Algo parecido pero mucho más rebuscado ¿no?

Gracias caricatos y Tunait por vuestra ayuda.

Por cierto, para Netscape no funciona el script según decís pero, ¿cómo se mostraría entonces la ventana? Habría que incluir un script para que sí apareciesen las barras de desplazamiento, creo yo.

Ciao.

caricatos · #9 (**permalink**) 14/03/2003, 13:01

Hola otra vez:

¡Lo conseguí!...

En netscape, pero la versión que va en netscape no va en explorer, así que hice una mezcla diabólica, y funciona en los 2 (desde luego que en opera no tira, pero yo no tengo información para eso)...

La cuestión en netscape es envíar las dimensiones al opener, también en 2 veces, y la segunda comprobación es con window.innerWidth/Height...

Bueno, pongo el código...

Primero el documento que genera el pop-up:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Crear popup con tabla</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 
<SCRIPT language=Javascript>

<!--

var ventana;

function abrir()    {

    ventana = window.open("popuptabla.html", "win", "menubars=no,toolbars=no,width=0,height=0");

    ventana.document.body.style.margin = 0;

    ventana.document.body.style.padding = 0;

    if (document.all)    {

        var ancho = ventana.document.body.getElementsByTagName("table")[0].offsetWidth;

        var alto = ventana.document.body.getElementsByTagName("table")[0].offsetHeight;

        ventana.resizeTo(ancho, alto);

        var nuevoAncho = ventana.document.body.clientWidth;

        var nuevoAlto = ventana.document.body.clientHeight;

        ventana.resizeTo(ancho + (ancho-nuevoAncho), alto + (alto - nuevoAlto));

    }

}

 
function reabrir(ancho, alto)    {

    ventana.resizeTo(ancho, alto);

}

//-->

</SCRIPT>

</head>

<body>

<form name=dimensiones>

<input type=button onclick=abrir() value="Abrimos un pop-up"><br>

Mensaje del pop-up:<input type=text name=mensaje value="">

</form>

</body>

</html>

... y el pop-up...

Código PHP:

  <html>

<head>

<script>

var ancho, alto, nuevoAncho, nuevoAlto;

function ini()    {

    ancho = document.getElementById("tabla").offsetWidth;

    alto = document.getElementById("tabla").offsetHeight;

    opener.reabrir(ancho, alto);

 
    nuevoAncho = window.innerWidth;

    nuevoAlto = window.innerHeight;

 
    opener.reabrir(ancho + (ancho - nuevoAncho), alto + (alto - nuevoAlto));

}

</script>

</head>

<body style="margin:0" onload="if (!document.all) ini()">

<form style="width:0; height:0">

<table id=tabla border="1" cellspacing="40" cellpadding="40">

<tr> 

<td onclick="opener.document.dimensiones.mensaje.value = 'Tabla sin valor'">Tabla sin valor</td>

</tr>

</table>

</form>

</body>

</html>

Espero que te sirva...

Saludos

Bravenap · #10 (**permalink**) 14/03/2003, 16:08

Gracias, lo miraré este fin de semana.

A simple vista es largo pero tiene muy buena pinta.

Gracias de nuevo.

Bravenap · #11 (**permalink**) 15/03/2003, 06:58

Esto escribí al principio:
**********
Hola caricatos,

Lo he copiado todo tal cual para ir haciendo pruebas y me da un fallo en la línea 12 del código que abre el popup, esta es:

Código:

    ventana.document.body.style.margin = 0;

Se requiere un objeto ¿?
El caso es que sí se abre la ventana pero no se ajusta al tamaño de la tabla.
***********
Al tiempo que escribía este mensaje fui haciendo pruebas y me di cuenta de que en el pop up le faltaban las comillas al nombre de la tabla

Código:

<table id="tabla"  border="1" cellspacing="40" cellpadding="40">

Pensé que era una tontería pero al ponerlas.... FUNCIONA.

Por otro lado, pongas lo que pongas en el cuadro de texto, en el pop up siempre me aparece "Tabla sin valor", lógico

Código:

<td onclick="opener.document.dimensiones.mensaje.value = 'Tabla sin valor'">Tabla sin valor</td>

éste código sólo hace que se escriba "'Tabla sin valor" en el cuadro de texto, interesante, pero si alguien escribe algo previamente en el cuadro es cuando se produce el error que he comentado más arriba.

Bueno, de todas formas, el form es sólo una licencia tuya ¿no? tampoco es imprescindible para el tema de abrir el popup.

Muchas gracias.

Bravenap · #12 (**permalink**) 15/03/2003, 07:18

Ya estoy aquí otra vez, vamos a ver, pongo el código con las pequeñas variaciones que he hecho:

Código PHP:

  <head>

<title>Crear popup con tabla</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

 
<SCRIPT language=Javascript>

<!--

var ventana;

function abrir()    {

    ventana = window.open("popuptabla.html","win", "menubars=no,toolbars=no,width=0,height=0");

    ventana.document.body.style.margin = 0;

    ventana.document.body.style.padding = 0;

    if (document.all)    {

        var ancho = ventana.document.body.getElementsByTagName("table")[0].offsetWidth;

        var alto = ventana.document.body.getElementsByTagName("table")[0].offsetHeight;

        ventana.resizeTo(ancho, alto);

        var nuevoAncho = ventana.document.body.clientWidth;

        var nuevoAlto = ventana.document.body.clientHeight;

        ventana.resizeTo(ancho + (ancho-nuevoAncho), alto + (alto - nuevoAlto));

    }

}

 
function reabrir(ancho, alto)    {

    ventana.resizeTo(ancho, alto);

}

//-->

</SCRIPT>

</head>

<body>

<form name=dimensiones>

<input type=button onclick="abrir()" value="Abrimos un pop-up"><br>

</form>

</body>

</html>

y el del popup

Código PHP:

  <html>

<head>

<script>

var ancho, alto, nuevoAncho, nuevoAlto;

function ini()    {

    ancho = document.getElementById("tabla").offsetWidth;

    alto = document.getElementById("tabla").offsetHeight;

    opener.reabrir(ancho, alto);

 
    nuevoAncho = window.innerWidth;

    nuevoAlto = window.innerHeight;

 
    opener.reabrir(ancho + (ancho - nuevoAncho), alto + (alto - nuevoAlto));

}

</script>

</head>

<body style="margin:0" onload="if (!document.all) ini()">

<form style="width:0; height:0">

<table id="tabla" border="1" cellspacing="40" cellpadding="40">

<tr> 

<td>Tabla sin contenido</td>

</tr>

</table>

</form>

</body>

</html>

El caso es que según le de funciona o no, es decir, sin modificar nada abro la página, doy al botón y funciona. Cierro todo, lo repito exactamente igual (o eso creo) y no funciona. Sin cerrar el opener le doy en varias ocasiones al botón y a veces me ajusta la ventana a la tabla y otras no.

caricatos · #13 (**permalink**) 15/03/2003, 16:37

Requete-hola:

La verdad es que a mi me ha funcionado bien (no comprendo eso de poner comillas), pero puede depender del ordenador o del sistema, o de la configuración, así que tomo nota...

El poner el evento onclick, se puede decir que es "una licencia", aunque en realidad es que para contestar otra pregunta hice modificaciones en el fichero donde probé este tema, y simplemente ahí quedó...

... tengo una carpeta llena de ficheros html donde pruebo cosas

...

Saludos