ajustar tamaño de las ventanas

kennyhp · #1 (**permalink**) 31/05/2007, 12:51

Hola, me gustaría crear un sistema de ayuda en mi web, y quiero conseguir lo siguiente:

Que cuando le des al icono de ayuda que pondre en algunos lugares, la ventana principal se redimensione, pasando a ocupar el 70% de la pantalla, y que en la parte derecha se abra una nueva ventana que será la de ayuda, que ocupara el 30% restante de la pantalla, lo he visto alguna vez, pero no recuerdo donde..., lo suyo sería que si cierro la ventna de ayuda la principal vuelva a ocupar un 100% de la pantalla.

¿alquien sabe como puedo hacerlo?

Gracias!

TurKa · #2 (**permalink**) 01/06/2007, 14:35

Prueba con el siguiente código:

Código HTML:

<script language="javascript">
function AbrirAyuda(pagina) {
	ancho_vtn_ppal = ((screen.width*70)/100)-4;
	ancho_vtn_ayuda = (screen.width*30)/100;
	posicion_izquierda_vtn_ayuda = (ancho_vtn_ppal);
	alto_vtn = screen.height-30;
	vtn_ayuda = window.open(pagina,"Ayuda","top=0,left="+posicion_izquierda_vtn_ayuda+",width="+ancho_vtn_ayuda+",height="+alto_vtn);
	window.resizeTo(ancho_vtn_ppal,alto_vtn);
	window.moveTo(0,0);
	vtn_ayuda.focus();
}
</script>

Y luego llamas a la función desde el evento onClick y debes pasarle como parámetro la URL del archivo de ayuda:

Código HTML:

<a href="#" onClick="AbrirAyuda('ayuda.htm'); return false;">Ayuda</a>

Suerte!

kennyhp · #3 (**permalink**) 02/06/2007, 09:20

Ohhh! perfecto! gracias!

Solo me falta que cuando cierre la ventana de ayuda la otra vuelva a su tamaño original y ya será la bomba!

Gracias de nuevo.

rogoelpra · #4 (**permalink**) 02/06/2007, 10:23

Como podria Lograr que al Cerra la Pagina de Ayuda la Otra Vuelva a su tamaño original... es decir con que evento puedo reconocer que sa ha cerrado la ventana de Ayuda?...

... GRACIAS.

derkenuke · #5 (**permalink**) 03/06/2007, 08:17

El evento será onunload, solo tienes que redimensionar la ventana opener desde el popup.

Pero ten cuidado, en navegadores con pestañas (la mayoría) las nuevas ventanas con window.open normalmente serán nuevas pestañas, eliminando el efecto que quieres dar, y molestando al usuario al redimensionar cada vez la ventana. Sería más lógico hacerlo internamente, don DIVs.

Un saludo.

derkenuke · #6 (**permalink**) 03/06/2007, 08:32

Bueno, acabo de hacer un ejemplo de lo que hablaba...

Código PHP:

  <body>
<div id="cuerpo" style="float:left; border: solid 1px black; background-color:#47e;">
    <div id="lipsum">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam et ante quis magna accumsan euismod. Praesent suscipit volutpat libero. In pretium nunc eu elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed a odio in lorem faucibus aliquam. Curabitur consequat ultrices pede. Aliquam dolor nisl, hendrerit ut, vehicula in, fermentum quis, ante. <a href="#" onClick="AbrirAyuda(); return false;">Ayuda</a>. Praesent commodo placerat quam. Sed luctus aliquet ligula. Nam vitae mi. Vestibulum lacinia velit et lectus. Cras eu felis a ligula tempus egestas. Vivamus fringilla dolor quis quam pretium placerat. Phasellus lectus mauris, faucibus eu, posuere ac, facilisis quis, augue. Mauris non felis aliquam nisl faucibus porta. Ut sollicitudin vulputate est. Nulla rhoncus malesuada magna.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta congue mauris. Mauris lorem diam, pulvinar sed, venenatis nec, consequat pulvinar, elit. Praesent ligula. Suspendisse elementum. Aenean elementum pulvinar neque. Praesent ut tortor. Cras auctor blandit neque. Aliquam malesuada cursus nisi. Curabitur justo neque, adipiscing quis, lobortis at, laoreet vitae, quam. In commodo ornare nulla. Integer eget nisl. Praesent consectetuer. Vestibulum iaculis, turpis eu lacinia dapibus, augue leo aliquet ipsum, eget egestas quam quam id nibh. Nunc eget sapien vel velit porta semper. Curabitur accumsan eros sit amet felis lobortis feugiat.</p>
        <p>Nunc accumsan, libero in iaculis luctus, justo dui eleifend arcu, at porta erat risus vel erat. Sed sodales dignissim libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas suscipit, nunc nec pretium auctor, nisl libero auctor felis, nec aliquam libero enim ac justo. Nullam ante lectus, euismod non, semper id, gravida vitae, felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent aliquet ultrices leo. Vivamus gravida, diam accumsan pretium rhoncus, pede ante gravida felis, vitae tempus metus elit eu est. Nullam a orci. Donec et massa id libero lobortis adipiscing. Sed pulvinar fringilla sapien. Aenean libero libero, scelerisque eu, gravida quis, bibendum quis, justo.</p>
    </div>
    <img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" />
</div>

<div id="ayuda" style="float:right; display:none; width:28%; border: solid 1px black; background-color:#F99; ">
    <p>Esta es la ayuda que has solicitado.</p>
    <p><a href="#" onClick="CerrarAyuda(); return false;">Cerrar</a></p>
</div>

<script>

function AbrirAyuda() {
    document.getElementById("cuerpo").style.width="70%";
    document.getElementById("ayuda").style.display="block";
}

function CerrarAyuda() {
    document.getElementById("ayuda").style.display="none";
    document.getElementById("cuerpo").style.width="100%";
}

</script>

</body>

A mi así me parece más cómodo, más rápido, y más accesible (además de los bloqueadores de popups y esas historias).

Un saludo.

kennyhp · #7 (**permalink**) 03/06/2007, 11:47

Hola derkenuke, tu primera forma que me has comentado, ya que se me abre con una nueva ventana incluso en firefox, que usa pestañas, la cosa es que no se como hacer lo del onunload y la ventana opener, de javascript estoy verde, lo basico, me pondria a inverstigar, pero esto lo quiero implementar en el proyecto de fin de curso que he de entregar el martes y la verdad es que voy muy retrasado y no tengo tiempo ni para dormir... imagina para invertigar! ;) , si me pusieses un ejemplo de código me harias un gran gran gran favor.
Gracias.

Shiryu_Libra · #8 (**permalink**) 03/06/2007, 13:17

agrega esto a tu ventana de ayuda... y listo

Código PHP:

  <script>
function normal()
{
window.opener.moveTo(0,0);
window.opener.resizeTo(screen.availWidth,screen.availHeight);
}
</script>
</head>

esto en el unload del body

Código PHP:

  <body onunload="normal()">

suerte

derkenuke · #9 (**permalink**) 03/06/2007, 14:20

Cita:

Iniciado por kennyhp

se me abre con una nueva ventana incluso en firefox, que usa pestañas

Eso depende de cómo tengas configurado el navegador, cada uno lo tiene a su gusto. Creeme que he probado el código y es muy molesto.

kennyhp · #10 (**permalink**) 04/06/2007, 04:43

derkenuke... yo tengo configurado para que se me habra en pestañas, pero el código que me pasaron arriba, abre una nueva ventana, es mas, hace justo lo que quiero, abre la ventana de ayuda y redimensiona la normal. Luego pruebo el código para volver el tamaño y os comento.

kennyhp · #11 (**permalink**) 04/06/2007, 04:50

PERFECTO!!!! muchas gracias a todos!!! no os imaginais lo bien que me ha venido esto!!!

Saludos! espero poder ayudaros algun dia con php ;)

derkenuke · #12 (**permalink**) 04/06/2007, 06:25

Cita:

Iniciado por kennyhp

derkenuke... yo tengo configurado para que se me habra en pestañas, pero el código que me pasaron arriba, abre una nueva ventana, es mas, hace justo lo que quiero, abre la ventana de ayuda y redimensiona la normal. Luego pruebo el código para volver el tamaño y os comento.

Hola de nuevo kennyhp.

Estamos hablando de firefox, tiene mucha personalización ese navegador (De Opera, Safari, IE7 ya no me acuerdo). Yo tengo extensiones para controlar las pestañas como a mi me gusta. Osea, lo que vengo a decir es que hay métodos que por lo agresivos que resultan pueden ser poco accesibles. Imagínate el caso del que tiene resolución 600x480 (ya, ya sé que es minoría, pero también hay que tener en cuenta a ellos y a los de 800x600).

También deberíamos llevar al extremo el ejemplo, abriendo 4 ventanas y posicionando en cuartos la pantalla, sería horrible. Tampoco se conoce el número de barras de herramientas ni el tamaño final de la ventana, que puede ser tremendamente pequeño (o puedo estar navegando a pantalla completa).

Yo creo que ninguna página me debería redimensionar el navegador, de hecho hay opciones para denegarlo. ¿Qué ocurre si estoy viendo una película o un clip mientras navego? Tu página me la taparía. Y a esto hay mil efectos no deseados.

Por todo esto te digo que el método que yo escogería sería el de DIVs, que todo ocurra dentro de la ventana del navegador, dentro de la pantalla misma.

Sólo eso, la decisión última siempre es tuya

rogoelpra · #13 (**permalink**) 04/06/2007, 09:49

Muy Bueno el Ejemplo derkenuke...

... por todo lo que dices; cómodo, más rápido, y más accesible y sin preocuparnos de las Restricciones de Popups... Te Felicito...

rogoelpra · #14 (**permalink**) 04/06/2007, 10:54

Que tal... Como seria para que la Ayuda inicialmente este Visible y mas bien si el usuario desea la "Desaparezca"...

.... Gracias.

Shiryu_Libra · #15 (**permalink**) 04/06/2007, 11:04

en el DIV de ayuda

Cita:

<div id="ayuda" style="float:right; display:none; width:28%; border: solid 1px black; background-color:#F99; ">
<p>Esta es la ayuda que has solicitado.</p>
<p><a href="#" onClick="CerrarAyuda(); return false;">Cerrar</a></p>
</div>

quitale en el style:display:none;

Cita:

<div id="ayuda" style="float:right; width:28%; border: solid 1px black; background-color:#F99; ">
<p>Esta es la ayuda que has solicitado.</p>
<p><a href="#" onClick="CerrarAyuda(); return false;">Cerrar</a></p>
</div>

para que este visible
suerte

rogoelpra · #16 (**permalink**) 04/06/2007, 13:50

Gracias Shiryu_Libra, pero no funciona como se quiere... Si esta Visible pero la Capa principal inicia con el 100% lo que hace que la capa de ayuda /que arranca visible) incialmente lo haga debajo de la Principal... Como podria solucionarlo?...

... Gracias.

rogoelpra · #17 (**permalink**) 04/06/2007, 13:56

Tambien tengo la Siguiete inquietud: Si quiero que cuando se este mostrando la capa de Ayuda el vinculo que la Abre se haga invisible como podria lograrlo?... es decir que el vinculo:

Cita:

<a href="#" onClick="AbrirAyuda(); return false;">Ayuda</a>

No se vea si esta desplegada la capa de Ayuda...
Puede esto lograrse?...
Gracias.

derkenuke · #18 (**permalink**) 04/06/2007, 15:29

Hola rogoelpra.

Lo primero gracias por los alagos.

Para hacer lo que tu dices podríamos llamar a AbrirAyuda() en el evento onload de la página. Aunque en este caso sería mejor volver a formar el HTML desde cero.

Para hacer invisible el vínculo, lo lograríamos cambiando el style.visibility="hidden" del elemento <A> en cuestión, también en la función AbrirAyuda().

Y lo de cerrarla ya te lo han comentado...

Un saludo.

rogoelpra · #19 (**permalink**) 12/06/2007, 09:01

Gracias derkenuke... muy buen concejo...