Foros del Web » Programando para Internet » Javascript »

Mostrar/Ocultar login

Estas en el tema de Mostrar/Ocultar login en el foro de Javascript en Foros del Web. Hola amigos!! Mi duda es la siguiente: quiero crear una subcabecera en mi web que sin pulsar en ella ni nada tenga el siguiente aspecto: ...
  #1 (permalink)  
Antiguo 19/01/2011, 11:11
 
Fecha de Ingreso: noviembre-2010
Mensajes: 28
Antigüedad: 9 años, 1 mes
Puntos: 0
Mostrar/Ocultar login

Hola amigos!! Mi duda es la siguiente: quiero crear una subcabecera en mi web que sin pulsar en ella ni nada tenga el siguiente aspecto:


Yo quiero que al pulsar en Entrar, aparezca esto:


Alguien me dice como podría hacer esto con JavaScript?

Muchas gracias de antemano!!
  #2 (permalink)  
Antiguo 19/01/2011, 11:23
 
Fecha de Ingreso: enero-2010
Mensajes: 69
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Mostrar/Ocultar login

Hola Thecrack,

a bote pronto, crearía un par de labels, sin contenido, en las posiciones en las que después aparecerían las cajas de texto.

En el botón 'Entrar', asocia una función al evento onClick que haga lo siguiente:

Código HTML:
document.getElementById('usuario').innerHtml = '<input type=text......>'
document.getElementById('password').innerHtml = '<input type=text......>'

Creo que no tendrías muchos problemas si lo haces así.

saludos
  #3 (permalink)  
Antiguo 19/01/2011, 11:24
 
Fecha de Ingreso: noviembre-2010
Mensajes: 28
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Mostrar/Ocultar login

Cita:
Iniciado por Borsetto Ver Mensaje
Hola Thecrack,

a bote pronto, crearía un par de labels, sin contenido, en las posiciones en las que después aparecerían las cajas de texto.

En el botón 'Entrar', asocia una función al evento onClick que haga lo siguiente:

Código HTML:
document.getElementById('usuario').innerHtml = '<input type=text......>'
document.getElementById('password').innerHtml = '<input type=text......>'

Creo que no tendrías muchos problemas si lo haces así.

saludos
Me lo puedes explicar con mas detalle por favor?
Muchas Gracias:D
  #4 (permalink)  
Antiguo 19/01/2011, 11:37
 
Fecha de Ingreso: enero-2010
Mensajes: 69
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Mostrar/Ocultar login

Ok ;)

En tu cabecera vas a tener un botón "Entrar" y dos cajas de texto, una para meter el usuario y otra para la password.

Suponiendo que metas los tres en una tabla, te quedaría así:

Código HTML:
<table>
<tr>
<td><input type=submit action='pagina_destino' value='Entrar' onClick=\"javascript:mostrarLogin();\"></td>
<td><label id='label_usuario'></label></td>
<td><label id='label_password'></label></td>
</tr>
</table> 
Y tu función mostrarLogin sería la siguiente:

Código HTML:
function mostrarLogin(){

   document.getElementById('label_usuario').innerHtml = "<input type=text id='usuario'>";
   document.getElementById('label_password').innerHtml = "<input type=text id='password'>";
   
}
De esta forma, al hacer click en el botón, se ejecuta la función mostrarLogin, que cambiará mediante el atributo innerHtml el contenido de las dos label, mostrando las cajas de texto de nombre de usuario y password.

Espero habértelo aclarado ;) Posiblemente haya otras fromas de hacerlo, quizá mejores, pero no creo que debas tener muchos problemas en hacerlo así.

saludos

Última edición por Borsetto; 19/01/2011 a las 11:39 Razón: Aclaración
  #5 (permalink)  
Antiguo 19/01/2011, 13:08
 
Fecha de Ingreso: diciembre-2009
Ubicación: Valparaíso
Mensajes: 118
Antigüedad: 10 años
Puntos: 3
Respuesta: Mostrar/Ocultar login

también podría meter el contenido a un div con style="display:none", y la función mostrarLogin le cambiaria el display none
  #6 (permalink)  
Antiguo 19/01/2011, 13:51
 
Fecha de Ingreso: noviembre-2010
Mensajes: 28
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Mostrar/Ocultar login

@Borsetto: He probado como me dices tu pero no me funciona no sé porque será.

@javiercitox: Me podrías explicar mejor eso, por favor?

Graciass
  #7 (permalink)  
Antiguo 19/01/2011, 17:09
 
Fecha de Ingreso: septiembre-2010
Mensajes: 525
Antigüedad: 9 años, 2 meses
Puntos: 59
Cita:
Iniciado por Thecrack007 Ver Mensaje
@javiercitox: Me podrías explicar mejor eso, por favor?
Haces un div en el cual metes los dos campos y con CSS le asignas visibility:hidden; (para que sea invisible):
Código HTML:
Ver original
  1. <div id="campos">
  2. <input type="text" ... >
  3. <input type="text" ... >
  4. </div>
Código CSS:
Ver original
  1. #campos {visibility:hidden;
  2.        ...
  3.        }

Haces la función JavaScript:
Código Javascript:
Ver original
  1. function muestraCampos(){
  2. document.getElementById('campos').style.visibility='visible';
  3. }

Y en el botón Entrar llamas la función:
Código HTML:
Ver original
  1. <input type="button" ... onclick="muestraCampos();">


__________________
01011111 01000001 01100100 01110010 01101001 01100001 01101110 01011111
  #8 (permalink)  
Antiguo 20/01/2011, 09:29
 
Fecha de Ingreso: enero-2010
Mensajes: 69
Antigüedad: 9 años, 10 meses
Puntos: 0
Respuesta: Mostrar/Ocultar login

Cita:
Iniciado por Thecrack007 Ver Mensaje
@Borsetto: He probado como me dices tu pero no me funciona no sé porque será.

@javiercitox: Me podrías explicar mejor eso, por favor?

Graciass
Mmmm... thecrack, si hubieras mirado un poquillo lo hubieras sacado. El error era haber puesto 'innerHtml' cuando es 'innerHTML'... ;) Bueno, no pasa nada, te pongo aquí un standalone muy simple que funciona perfectamente.

Código HTML:
<html><head>
<script>
function mostrarLogin(){
	document.getElementById('label_usuario').innerHTML = "<input type=text id='usuario' size=10>";
	document.getElementById('label_pw').innerHTML = "<input type=text id='password' size=10>";



}

</script>
</head>
<body>

<table style='background-color:green;'>
<tr>
<td><input type='button' value='Entrar' onClick="mostrarLogin();"></td>
<td width=100><label name='label_usuario' id='label_usuario'></label></td>
<td width=100><label name='label_pw' id='label_pw'></label></td>
</tr>
</table>
</body>
</html> 
Saludos

Etiquetas: login
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 08:23.