Foros del Web » Programando para Internet » Javascript »

texto que va desapareciendo

Estas en el tema de texto que va desapareciendo en el foro de Javascript en Foros del Web. Hola, tengo un código en el que hay que meter usuario y contraseña para loguearse. En caso de que dé error saco un mensaje de ...
  #1 (permalink)  
Antiguo 21/07/2011, 04:31
Avatar de humanista  
Fecha de Ingreso: abril-2005
Mensajes: 878
Antigüedad: 19 años, 7 meses
Puntos: 15
texto que va desapareciendo

Hola, tengo un código en el que hay que meter usuario y contraseña para loguearse.

En caso de que dé error saco un mensaje de error pero lo que quiero es que aparezca y pasados 3 segundos vaya desapareciendo progresivamente durante unos 3 segundos más (es decir que no desparezca de golpe).

Intuyo que puede ser con javascript, pero el tema es que después de sacar el mensaje la página debe seguir cargando el resto de contenido con lo que si gasto 6 segundos en que desaparezca el mensaje de error... se me ralentizaría ese tiempo la carga? cómo se podría hacer? gracias.
  #2 (permalink)  
Antiguo 21/07/2011, 05:41
Avatar de ceSharp  
Fecha de Ingreso: octubre-2008
Ubicación: Madrid
Mensajes: 495
Antigüedad: 16 años
Puntos: 66
Respuesta: texto que va desapareciendo

hola,
te va a hacer falta jquery, porque quieres dar un efecto al mensaje...

en cuanto a los tiempos no te preocupes, porque jquery lanza el efecto de mostrar la etiqueta y el resto de cosas siguen funcionando con normalidad, sin que demore nada.
¿que hay que hacer?:
1.- descárgate el archivo jquery.js para poder dar efecto a tu web. De aquí, por ejemplo
http://docs.jquery.com/Downloading_j...ownload_jQuery
2.- pon este archivo en tu proyecto, para poder llamarle desde tu página (en la misma carpeta que tengas la página donde quieres aplicar el efecto)
3.- cópiate este ejemplo para que veas el efecto:
Código PHP:
Ver original
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head >
  3.     <title>Untitled Page</title>
  4. </head>
  5.  
  6. <script type="text/javascript" src="jquery.js"></script>
  7.  
  8. <script type="text/javascript">
  9. function mensajeDesaparece()
  10. {
  11.     $("#el_div")[0].style.display='';
  12.     $("#el_div").delay(3000).fadeOut("slow");
  13. }
  14. </script>
  15.  
  16. <body>
  17.    
  18.         <div>
  19.             <input type="button" onclick="mensajeDesaparece();" value="Aceptar" />
  20.             <div id="el_div" style="background-color: Yellow; width: 250px;display:none">
  21.                 CONTRASEÑA INCORRECTA</div>
  22.         </div>
  23.    
  24. </body>
  25. </html>

.... y suerte... ;)

En este ejemplo hay un botón que al hacer clic muestra un mensaje que, tras 3 segundos, desaparece lentamente.

si falla nos cuentas.

saludos.
  #3 (permalink)  
Antiguo 21/07/2011, 06:22
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: texto que va desapareciendo

sin animo de polemizar sobre el uso o no de librerías y sólo como otra opción, en la web se encuentran multitud de ejemplo de como crear el efecto fade out usando javascript y css
  #4 (permalink)  
Antiguo 22/07/2011, 09:04
Avatar de humanista  
Fecha de Ingreso: abril-2005
Mensajes: 878
Antigüedad: 19 años, 7 meses
Puntos: 15
Respuesta: texto que va desapareciendo

y no es demasiado tener que cargar 89Kb (versión reducida) de la jquery para un efecto tan simple? no hay otra forma como dice IsaBeIM? (yo he buscado y no veo nada...)

Etiquetas: Ninguno
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




La zona horaria es GMT -6. Ahora son las 18:48.