Imprimir Página - Ayuda con esta evento onload

Título: Ayuda con esta evento onload
Publicado por: diego1221 en 20 Julio 2015, 18:08 pm

Tengo este codigo

Código

<script>
function desaparecer() 
{ 
        document.getElementById('mi_capa').style.display = 'none'; 
}  
</script>

Código

<body onload="setTimeout('desaparecer()', 1000)">
 
<div class='mi_capa' id='mi_capa' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visible; width:100%; height:100%; background: #F4F8F9;'>
<div style='width:600px; height:400px; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#000000; font-size:20px; line-height:20px; text-align:center;'>
 
<form action="validar-password.php" method="post">
Escribe una clave:
<input type=password name="clave">
<input type="submit" value="Enviar">
</form>	
</div></div>

lo que quiero es que cuando pulse el botón, se ejecute la acion del body onload sin nesecidad de que sea con el tiempo, es decier que cuando pulse el boton, el body me carge, llevo muchi tiempo intentando por no he podido por que en el form hay una action y no se que ponerle para que el body onload se ejecute.

Gracias por su ayuda

Mod: Obligatorio el uso de etiquetas GeSHi.

Título: Re: Ayuda con esta evento onload
Publicado por: ivancea96 en 20 Julio 2015, 19:42 pm

Al boton ponle un onclick que llame a otra función.

No entendí bien. ¿Quieres que al pulsar el boton, se elimine el timeout? Para eliminar timeout, basta poner clearTimeout(id). Ese ID es el que retorna setTimeout(). Así que la idea es que body onclick llame a una función que hagas. Poner el setTimeout directamente no me parece una buena práctica.

Título: Re: Ayuda con esta evento onload
Publicado por: #!drvy en 21 Julio 2015, 15:18 pm

Aunque tampoco entiendo que es lo que quieres hacer, creo que lo que intentas es ocultar el formulario cuando este se enviá. Si es asi, solo te hace falta esperar un evento de envío sobre el formulario.

Código

<body>
 
<div class='mi_capa' id='mi_capa' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visible; width:100%; height:100%; background: #F4F8F9;'>
<div style='width:600px; height:400px; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#000000; font-size:20px; line-height:20px; text-align:center;'>
    <form id='formulario' action="validar-password.php" method="post">
        Escribe una clave:
        <input type=password name="clave">
        <input type="submit" value="Enviar">
    </form>
</div></div>
 
<script type='text/javascript'>
 
document.getElementById('formulario').addEventListener('submit', function(event){
    document.getElementById('mi_capa').style.display = 'none';
});
 
</script>
 
</body>

Si quieres que tome algo de tiempo, cambia el JS así:

Código

<script type='text/javascript'>
 
document.getElementById('formulario').addEventListener('submit', function(event){
    event.preventDefault();
 
    document.getElementById('mi_capa').style.display = 'none';
 
    setTimeout(function(){
        document.getElementById('formulario').submit();
    }, 1000);
});
 
</script>

Saludos

Título: Re: Ayuda con esta evento onload
Publicado por: Usuario Invitado en 21 Julio 2015, 16:43 pm

Si quieres que desaparezca con un efecto, solo agrega una clase CSS:

Código

.form-hidden {
    opacity: 0;
    height: 0;
    visibility: hidden;
}

Dado que display no es animable, le hacemos un height: 0 y actúa como un display: none. El formulario, debe tener la propiedad transition.

Demo JSFiddle (http://jsfiddle.net/161vbh4k/1/)

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: diego1221 en 20 Julio 2015, 18:08 pm