Cambiar atributo de un form con DOM

jmagago84 · #1 (**permalink**) 26/07/2008, 12:34

Hola!
Tengo un formulario que en principio esta no visible, pero que al pulsar la palabra Login se vuelva visible en la misma página. Quiero hacerlo a través de DOM con una función, pero en principio no sé como cambiar el atributo style="display:none" del form desde la función.
Este es el código:

<title>Index</title>
<script type="text/javascript" src="scripts/funciones.js"></script>
</head>

<body>
<a href="" onclick="return visibleFormLogin()">Login</a>
<div id="div_form_login" style="display:none">
<form id="login-form" method="post" >
<div id="div_email">
<label id="label_email" for="email">Email:</label>
<input id="email" name="email" type="text" />
</div>
<div id="div_password">
<label id="label_password" for="password">Password:</label>
<input id="password" name="password" type="password" />
</div>
<div id="submit">
<input id="entrar" name="entrar" value="Entrar" type="submit" />
</div>
</form>
</div>
</body>

Y por ahora lo que llevo de la función....

function visibleFormLogin(){
var loginForm = document.getElementById("login-form");
...........
}

Básicamente es que no se cómo cambiar el atributo de visibilidad, bueno, y si encima se vuelve visible poco a poco mejor que mejor.
¿Alguna idea??

Gracias!!

jmagago84 · #2 (**permalink**) 26/07/2008, 13:29

Bueno, lo he estado intentando, y lo más que consigo es que se muestro un instante el form pero vuelve a desaparecer.
Este es el código:

Cita:

Y esta la función:

Cita:

function visibleFormLogin(){
var form = document.getElementById("login-form");
form.setAttribute('style', 'visibility: visible;');
//o también.....
//form.style.visibility = 'visible';
}

Que debo cambiar para que el cambio del atributo visibility sea permanente???

Gracias!!!

xbx · #3 (**permalink**) 26/07/2008, 14:19

Amigo jmagago84,

En tu funcion debes cambiar el valor de visibility del div (el cual se encuentra en hidden) y no del form.

Tambien en tu link <a> es necesario que devuelvas false (return false;) para que no se realice la accion del link.

asi queda tu codigo:

Cita:

<html>
<head>
<script>

</script>

<script type="text/javascript" src="scripts/funciones.js"></script>

</head>

<body>

<a href="" onclick="visibleFormLogin();return false;">Login</a>

<div id="div_form_login" style="visibility:hidden">
<form id="login-form" action="" method="post" >
<div id="div_email">
<label id="label_email" for="email">Email:</label>
<input id="email" name="email" type="text" />
</div>
<div id="div_password">
<label id="label_password" for="password">Password:</label>
<input id="password" name="password" type="password" />
</div>
<div id="submit">
<input id="entrar" name="entrar" value="Entrar" type="submit" />
</div>
</form>
</div>

</body>

</html>

Espero que te sirva. Saludos

PD: Tambien quieres que se oculte al volver a clickear?

jmagago84 · #4 (**permalink**) 26/07/2008, 19:13

Muchas Gracias!!!

, voy a probar el código. La verdad que también quisiera que se ocultara el form volviendo a pinchar el enlace.

Lo voy a intentar y ya te digo.

Byee!!!

xbx · #5 (**permalink**) 26/07/2008, 19:34

Hola jmagago84,

Ok, y para que aparezca y tambien oculte el script queda asi:

Código PHP:

  <script type="text/javascript">
<!--
function visibleFormLogin(){
var div_form_login = document.getElementById("div_form_login");
div_form_login.style.visibility = div_form_login.style.visibility=="visible"?"hidden" : "visible";
}
//-->
</script>

Recuerda que es posible obtener y modificar el style de un elemento DOM de la siguiente forma:
Por ejemplo, la propiedad visibility:

Cita:

elemento.style.visibility

W3Schools

Saludos

jmagago84 · #6 (**permalink**) 26/07/2008, 20:22

Buff, y yo llevo aqui un rato intentándolo y no me sale, mira como lo estaba intentando:

Cita:

Lo estaba intentado hacer de una forma más extensa, crees que se podría hacer con el if????, es que creo que fallo a la hora del if ()

Gracias!!!

jmagago84 · #7 (**permalink**) 26/07/2008, 20:33

Cita:

Lo he hecho asi, aunque claro está que tu forma es mucho más profesional y la que voy a utilizar y no ésta.

No me iba porque lo hacia con getAttribute y ya me liaba.

Bueno, sabes por casualidad de algún efecto o propiedad para que el form aparezca y desaparezca gradualmente??? y no instantaneamente??

De verdad que muchas gracias!

xbx · #8 (**permalink**) 26/07/2008, 21:52

De nada!

Asi?

Código PHP:

  <html>
<head>
<script>
//<!--
var intervalId=null;
var alpha = 0;
var sentido = 1;
var incremento = 5;
var velocidad = 10;
document.div_form_login = document.getElementById("div_form_login"); 

function visibleFormLogin(){

    if(intervalId == null)
        intervalId = setInterval("change_alpha()",velocidad);

}

function change_alpha()
{
     
     alpha += (incremento * sentido);
    
    if(navigator.userAgent.match("MSIE"))
        div_form_login.filters.alpha.opacity = alpha;
    else
        div_form_login.style.opacity = (alpha/100).toString();


     if(alpha>=100 || alpha<=0)
        {
        sentido = sentido==1?-1:1;
        clearInterval(intervalId);
        intervalId=null;
        
        }
}
//-->
</script>
<style>
#div_form_login
{
 filter: alpha(opacity=50);
 background-color: red;
}
</style>

<script type="text/javascript" src="scripts/funciones.js"></script>

</head>

<body>

<a href="javascript:void(visibleFormLogin());">Login</a>

<div id="div_form_login" style="opacity: 0.0">
<form id="login-form" action="" method="post" >
<div id="div_email">
<label id="label_email" for="email">Email:</label>
<input id="email" name="email" type="text" />
</div>
<div id="div_password">
<label id="label_password" for="password">Password:</label>
<input id="password" name="password" type="password" />
</div>
<div id="submit">
<input id="entrar" name="entrar" value="Entrar" type="submit" />
</div>
</form>
</div>


</body>


</html>

Dime si te sirve

--edit--
Estoy tratando de hacer que funcione en IE (En firefox todo ok)

jmagago84 · #9 (**permalink**) 26/07/2008, 23:12

OK!, lo he provado y va perfe!!, aunque se me escapa de mi entendimiento, jeje

pero me viene de lujo

Deberias darme unas clases particulares a ver si aprendo algo.

Un abrazo!

xbx · #10 (**permalink**) 26/07/2008, 23:42

Puedes preguntarme lo que quieras del código

estaré encatado de ayudarte.

Un abrazo

jmagago84 · #11 (**permalink**) 26/07/2008, 23:59

Mira xbx, en digg.com está el efecto que quiero conseguir, en el link login, échale un vistazo, después de tanto buscar he encontrado unas páginas hablando sobre ello. Te las pongo:

http://66.102.9.104/translate_c?hl=e...T7LmVICpR0dm0Q

Esta es traducida por google.

http://www.harrymaugans.com/2007/03/...cript-and-css/

http://www.harrymaugans.com/2007/03/...cript-and-css/

Y estas son otras en ingles.

A ver que te parecen y me cuentas

Byee

xbx · #12 (**permalink**) 27/07/2008, 00:19

Finalmente logré hacer que fucione en IE.
Para mi amigo IE es necesario que el div tenga definido el width. De lo contrario no funciona.

Aqui te dejo el código

Código PHP:

  <html>
<head>
<script>
//<!--
var intervalId=null;
var alpha = 0;
var sentido = 1;
var incremento = 5;
var velocidad = 10;
document.div_form_login = document.getElementById("div_form_login"); 

function visibleFormLogin(){

    if(intervalId == null)
        intervalId = setInterval("change_alpha()",velocidad);

}

function change_alpha()
{
     
     alpha += (incremento * sentido);
    
    if(navigator.userAgent.match("MSIE"))
        div_form_login.filters.alpha.opacity = alpha;
    else
        div_form_login.style.opacity = (alpha/100).toString();


     if(alpha>=100 || alpha<=0)
        {
        sentido = sentido==1?-1:1;
        clearInterval(intervalId);
        intervalId=null;
        
        }
}
//-->
</script>
<style>
#div_form_login
{ 
 width: 100px;

 filter: alpha(opacity=0);
 background-color: red;
}
</style>

<script type="text/javascript" src="scripts/funciones.js"></script>

</head>

<body>

<a href="javascript:void(visibleFormLogin());">Login</a>


    <div id="div_form_login" style="opacity: 0.0">
        <form id="login-form" action="" method="post" >
        <div id="div_email">
        <label id="label_email" for="email">Email:</label>
        <input id="email" name="email" type="text" />
        </div>
        <div id="div_password">
        <label id="label_password" for="password">Password:</label>
        <input id="password" name="password" type="password" />
        </div>
        <div id="submit">
        <input id="entrar" name="entrar" value="Entrar" type="submit" />
        </div>
        </form>
    </div>

</div>


</body>


</html>

Ahorita miro eso de digg

xbx · #13 (**permalink**) 27/07/2008, 00:33

Cita:

Mira xbx, en digg.com está el efecto que quiero conseguir, en el link login, échale un vistazo, después de tanto buscar he encontrado unas páginas hablando sobre ello. Te las pongo:

http://66.102.9.104/translate_c?hl=e...T7LmVICpR0dm0Q

Esta es traducida por google.

http://www.harrymaugans.com/2007/03/...cript-and-css/

http://www.harrymaugans.com/2007/03/...cript-and-css/

Y estas son otras en ingles.

A ver que te parecen y me cuentas

Veo... Es parecido a lo que hicimos recién.
Tu quieres que un div aparezca y el otro desaparezca?