Abrir pop-up con para login

neodani · #1 (**permalink**) 21/11/2009, 06:44

Buenas,

Estoy empezando con Ajax y veo muchas webs que tienen el tipo boton de login que al pulsar aparece una especie de pop-up (bonito) donde aparece un formulario de login
Ej. en la parte superior de http://digg.com/

Estoy haciendo un apartado similar en mi web, y me gustaría que al pulsar sobre un enlace me abriese un formulario de login (user y pass) y que al pulsar enviar comprobase que son correctos y cambiar el contenido de la página principal.

El ejemplo más parecido que he encontrado es el de la siguiente página
http://prototype-window.xilinus.com/samples.html
7. Open a login window (click here)

Digo pues lo copio y veo si funciona, pero no entiendo muy bien como llamarlo, ya que en el ejemplo dejan puesto el css y la función de ajax. He intuido que hacía falta dos librerias y estoy probando con esto así...
Pero tan siquiera me detecta el enlace :S:S:S no se si estoy copiando el codigo ajax donde toca... si me falta alguna librería más, o si no estoy llamando correctamente al ajax

Podéis echarme una mano?

Muchas gracias de antemano!

Código php:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> LOGIN AJAX</title>
<style>
.login_label, .login_input, .login_error  {
  padding:10px;
  color:#000;
  text-align:left;
  float:left; 
  width:100px;
  font-size:20px;
  color:#64355A;
}
 
.login_input {
  width:200px;
}
 
.login_error {
  width:250px;
  color:#F00;
}
 
.login_input input {
  width:100%;
}
#login {
  background:#123;
}
</style>
<script type="text/javascript" src="prototype.js"> </script> 
<script type="text/javascript" src="window.js"> </script> 
</head>
<script>
Dialog.confirm($('login').innerHTML, {className:"alphacube", width:400, okLabel: "login", cancelLabel: "cancel", onOk:function(win){ $('login_error_msg').innerHTML='Login or password inccorect'; $('login_error_msg').show(); Windows.focusedWindow.updateHeight(); new Effect.Shake(Windows.focusedWindow.getId()); return false;}});
</script>
<body>
<div id="login" style="display:none"> 
    <p><span id='login_error_msg' class="login_error" style="display:none">&nbsp;</span></p> 
    <div style="clear:both"></div> 
    <p><span class="login_label">login</span> 
    <span class="login_input"><input type="text"/></span></p> 
    <div style="clear:both"></div> 
    <p><span class="login_label">password</span> 
    <span class="login_input"><input type="password"/></span></p> <div style="clear:both"></div> 
</div>
 
7. Open a login windows
<span id="open_login_click_button" class="title" onclick="Application.evalCode('open_login', true)" onmouseout="$('open_login_click_button').removeClassName('selected')" onmouseover="$('open_login_click_button').addClassName('selected')" href="#">click here</span>
 
</body>
</html>

neodani · #2 (**permalink**) 22/11/2009, 09:15

¿Alguna idea de porque el código de arriba no funciona?

Muchas gracias de antemano!

catalon · #3 (**permalink**) 22/11/2009, 13:02

mmm a mi el error k me da esk no tienes application inizializada... estas seguro k no te faltan mas .js?? en la pagina si le das a ver codigo fuente hay un monton mas de links a .js.... Por otro lado si te bajas la aplicacion entera te viene una carpeta con samples, a lo mejor te sale mas a cuenta cojer el sample k te interese y modificarlo a tu gusto en lugar de ir pegando a trozos...

y estas seguro k la ruta de los .js esta bien? cerciorate por si acaso. Y asegurate de k tienes todos los js necesarios pk me da k te faltan unos cuantos.

Espero k te sirva y lo arregles pronto ;)

neodani · #4 (**permalink**) 22/11/2009, 14:48

Cita:

Iniciado por catalon

mmm a mi el error k me da esk no tienes application inizializada... estas seguro k no te faltan mas .js?? en la pagina si le das a ver codigo fuente hay un monton mas de links a .js.... Por otro lado si te bajas la aplicacion entera te viene una carpeta con samples, a lo mejor te sale mas a cuenta cojer el sample k te interese y modificarlo a tu gusto en lugar de ir pegando a trozos...

y estas seguro k la ruta de los .js esta bien? cerciorate por si acaso. Y asegurate de k tienes todos los js necesarios pk me da k te faltan unos cuantos.

Espero k te sirva y lo arregles pronto ;)

Que va... ni bajandome todos los .js que utiliza la pagina ni utilizando los ejemplos (no he visto ninguno como el del ejemplo 7 del login al que me refiero)

Yo creo que el problema esta en esta linea que de por sí es muy sospechosa y no se que es lo que hace

Código php:

Ver original<span id="open_login_click_button" class="title" onclick="Application.evalCode('open_login', true)" onmouseout="$('open_login_click_button').removeClassName('selected')" onmouseover="$('open_login_click_button').addClassName('selected')" href="#">click here</span>

catalon · #5 (**permalink**) 23/11/2009, 06:07

neodani esa es la linea a la k me referia cuando digo k no has inicializado Application... en el evento onClick llamas a AplicationEtc... pero esk application no esta inicializada... es decir no es nada, no existe, por lo tanto no hay nada a lo k llamar.

Por otro lado, en cuanto a lo k buscas hacer en lugar de usar scripts tan grandes y complicados no te saldria mas a cuenta crearlo tu de 0??
Lo digo pk lo k tu kieres hacer es bastante simple, otra cosa esk kieras mostrar algun tipo de transicion o algo, pero si lo unico k kieres es k en medio de la pantalla aparezca el formulario de login al hacer clic en un link es bastante facil.

Simplemente creas un div con posicion relativa y lo posicionas en medio de la ventana. Luego lo pones k el style.display sea 'none'.
Despues en el onClick del link haces k llame a una funcion k simplemente cambie el estado del div de style.display="none" a style.display="block"
Y simplemente dentro del div deberia ir el formulario con el k hacer el login.

Por experiencia te aconsejo k mas k usar scripts k ves por la red los uses como referencia para aprender pero a la hora de usarlo lo mejor es programarlo uno mismo. Te sera mas facil k modificar un script tan grande para lo k kieres.

neodani · #6 (**permalink**) 23/11/2009, 07:34

Cita:

Iniciado por catalon

neodani esa es la linea a la k me referia cuando digo k no has inicializado Application... en el evento onClick llamas a AplicationEtc... pero esk application no esta inicializada... es decir no es nada, no existe, por lo tanto no hay nada a lo k llamar.

Por otro lado, en cuanto a lo k buscas hacer en lugar de usar scripts tan grandes y complicados no te saldria mas a cuenta crearlo tu de 0??
Lo digo pk lo k tu kieres hacer es bastante simple, otra cosa esk kieras mostrar algun tipo de transicion o algo, pero si lo unico k kieres es k en medio de la pantalla aparezca el formulario de login al hacer clic en un link es bastante facil.

Simplemente creas un div con posicion relativa y lo posicionas en medio de la ventana. Luego lo pones k el style.display sea 'none'.
Despues en el onClick del link haces k llame a una funcion k simplemente cambie el estado del div de style.display="none" a style.display="block"
Y simplemente dentro del div deberia ir el formulario con el k hacer el login.

Por experiencia te aconsejo k mas k usar scripts k ves por la red los uses como referencia para aprender pero a la hora de usarlo lo mejor es programarlo uno mismo. Te sera mas facil k modificar un script tan grande para lo k kieres.

Pues tienes toda la razón del mundo. Me parecia exagerado utilizar tantas librerias en .js para realizar eso!

A ver si consigo hacerlo como dices, porque el javascript y yo no nos llevamos nada bien. El problema de hacerlo como dices es que el efecto de AJAX de transicion lo pierdo....

catalon · #7 (**permalink**) 23/11/2009, 08:02

Hay muchiiiiiiiiiiissimos scripts por la red k habren ventanas nuevas con efectos "molones". googlea un poco y seguro k encuentras alguno k te guste. De todos modos para mi gusto personal prefiero una web rapida y nitida k una lenta y pesada todo por un efecto roñoso k a la gente mas k gustarle le molesta. Es verdad k keda mas chulo con algun efecto pero eso es solo la primera vez... despues de eso empiezas a odiar esos 2 o 3 segundos k pierdes en ver una transicion.

Pero weno para gustos los colores jejeje

Ademas tampoco hace falta k sea un efecto... a lo mejor poniendole una imagen de controno semitranparente keda mejor y es mucho mas eficiente k haciendo un efecto k pesa 2 o 3 megas.... No se, ya te digo k hay muchos efectos por hay y maneras distintas de hacertelo, miratelas y decide cual es la que mas te conviene.

neodani · #8 (**permalink**) 23/11/2009, 08:57

Cita:

Iniciado por catalon

a lo mejor poniendole una imagen de controno semitranparente keda mejor y es mucho mas eficiente

Esa es la idea principal que quiero conseguir ;)

Aunque en los dos ejemplos externos que puse, se cumplia esto, es un efecto nitido, como el login de digg.com

deirdre · #9 (**permalink**) 23/11/2009, 17:29

Hola neodani

Hace varias semanas subí un ejemplo muy parecido a lo que necesitas. Puedes descargártelo aquí. Sólo tendrás que adaptarlo a tu diseño.

Comenta si te sirve...

Bye