mostrar x segundos y ocultar

[kaninox]

Hola muchachos les comento que vi este efecto una vez y ahora que lo necesito y por mas que busco no puedo dar con el.

Lo que necesito es que por ejemplo tengo un formulario el cual una vez se ingresen los datos me aparezca el típico mensaje de se ingresaron correctamente los datos, pero solo quiero aparezca unos segundos luego desaparezca, el efecto lo vi una vez y mostraba el mensaje y antes de desaparecer empezaba a pestañar digamos unas 5 veces luego desaparecía, alguna idea de como hacer esto o si alguien sabe la URL de este script lo necesito para ojala prototype que estoy trabajando con este framework, y jquery u otros me dan conflictos.


Saludos.

[masterpuppet]

Deberias utilizar script.aculo.us y estos dos efectos Pulsate + Fade

Saludos.

[Sourcegeek]

Usa la funcion Javascript 'setInterval', busca la sintaxis en Google y la ajustas a tus necesidades apuntando a una funcion que esconda el mensaje que salga

Saludos!

[seik!]

en jquery...

$("#idelemento").hide();

y dentro de hide busca algun evento en jquery ui

[kaninox]

Pues lo que comenta masterpuppet es lo que me sirve, como dije estoy trabajando con prototype y en este caso script.aculo.us va de la mano con el.

el tema es que en el ejemplo del fade : http://madrobby.github.com/scriptaculous/effect-fade/
lo que necesito es hacer un tipo onload en la capa un onclick no me sirve probe y no me resulta ademas lo de la duracion no me va como debería de hecho no me funciona. alguna idea quiero que la capa una vez se carge la pagina desaparesca en digamos 5 segundos.

probe poner como dice :

Código Javascript:

Effect.Fade('cfa');
Effect.Fade('cfa', { duration: 5.0 });
 
<div id="cfa" style="width:80px; height:80px; background:#c2defb; border:1px solid #333;"></div>
 

me la oculta pero no en la duracion que le doy ni con el efecto fade probe con :

Código Javascript:

$('cfa').fade();
$('cfa').fade({ duration: 5.0, from: 0, to: 1 });
 

Pero lo mismo :/

[Sourcegeek]

Bueno, yo ya te di una manita con una opcion
Pero bueno, a ver quien sabe de script.aculo.us

[masterpuppet]

Esta en el loaded el codigo javascript ?, deberia ser asi(en el head entre tags <script>):

Código Javascript:

document.observe("dom:loaded", function() {     
   $('cfa').fade({duration: 5.0});
   ....
});
 

Nota: comproba que la versión de scriptaculous sea la que corresponde con la versión de prototype.

Saludos.

[kaninox]

Correctamente me funciona de esa manera masterpuppet el problema es que el div cfa lo estoy cagando en una pagina que esta dentro de unas llamadas ajax que hago a través del mismo prototype.

la funcion me permite abrir dos paginas en diferentes DIVS

Código Javascript:

/*Realizado por HieloVerde*/
function cargarUrl(url,capa_destino)
{
   var cargando = new Array(2);
   cargando['capa1'] = 'imagen1.gif';
   cargando['capa2'] = 'imagen2.gif';
   
   new Ajax.Updater(capa_destino, url,
   {
        parameters: '',
        evalScripts:true,
      onSuccess: function(transport)
      {
         $(capa_destino).innerHTML=transport.responseText;
      },
      onCreate: function()
      {
         $(capa_destino).innerHTML='<img src="'+cargando[capa_destino]+'" />';
      }
   }
   );
}
 

supongo que por alguna razon no se traspasa el llamado ya que lo he puesto fuera y dentro de la pagina principal, y en la pagina llamada etc, y nada, voy a seguir intentando.
Saludos

[masterpuppet]

Entiendo que si son dinamicos los div's, que dependen de un AJAX , los efectos deberian ir en onSuccess, algo asi:

Código Javascript:

/*Realizado por HieloVerde*/
function cargarUrl(url,capa_destino)
{
   var cargando = new Array(2);
   cargando['capa1'] = 'imagen1.gif';
   cargando['capa2'] = 'imagen2.gif';
   
   new Ajax.Updater(capa_destino, url,
   {
      parameters: '',
      evalScripts:true,
      onSuccess: function(transport)
      {
         //$(capa_destino).update(transport.responseText);
         //Pulsate + Fade
         new Effect.Pulsate('cfa', { pulses: 5, duration: 2.5});    
         new Effect.Fade('cfa', { duration: 3.0, queue: 'end' });
      },
      onCreate: function()
      {
         $(capa_destino).update('<img src="' + cargando[capa_destino] + '" />');
      }
   }
   );
}
 

En teoria Ajax.Updater te actualiza el elemento que le pasas por parametro, en tu caso capa_destino, si te falla descomenta la linea 14, despues evalScript = true ? estas evaluando codigo js en la respuesta ?, sino es el caso elimina la propiedad para que quede el valor por defecto(false) y por ultimo en vez de utilizar Element.innerHTML, utiliza las funcion de prototype para dicho fin, Element.update.

Probalo y nos comentas.

Saludos.

[kaninox]

Pues mira me funciona cuando cargo la pagina por primera vez, el tema es que cuando la cargo yo muestro un formulario el cual envío con

Código Javascript:

<script type="text/javascript">
function form(){var params = Form.serialize($('formulario'));
new Ajax.Updater('bodychange', 'mipagina.php', {asynchronous:true, parameters:params, onLoading: showLoad, evalScripts: true });}
function showLoad () {
$('ContenidoFormulario').style.display = 'none';
$('ContenidoCargando').style.display = 'block';
}
</script>
<form name="formulario" id="formulario" method="post" action="mipagina.php" onsubmit="form();return false;">
 

El tema es que cuando envio el formulario es hay donde quiero recoger en la misma pagina el tema del fade + pulsate y ya no me funciona,
entonces cargo el formulario envio los datos y aquí es donde si los datos estan correctos por ejemplo quiero mostrar la capa de id="cfa" con el fade etc...
saludos

[masterpuppet]

Yep my bad, en realidad deberia ser en el onComplete, quedaria asi:

Código Javascript:

/*Realizado por HieloVerde*/
function cargarUrl(url,capa_destino)
{
   var cargando = new Array(2);
   cargando['capa1'] = 'imagen1.gif';
   cargando['capa2'] = 'imagen2.gif';
   
   new Ajax.Updater(capa_destino, url,
   {
      parameters: '',
      evalScripts:true,
      onSuccess: function(transport)
      {
         //$(capa_destino).update(transport.responseText);
      },
      onComplete: function()
      {
         //Pulsate + Fade
         new Effect.Pulsate('cfa', { pulses: 5, duration: 2.5});    
         new Effect.Fade('cfa', { duration: 3.0, queue: 'end' });
      },
      onCreate: function()
      {
         $(capa_destino).update('<img src="' + cargando[capa_destino] + '" />');
      }
   });
}
 

[kaninox]

pues no me funciona :/ haber tengo

pagina index.php
en ella tengo las llamadas al script

Código Javascript:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/ajax_doblecapa.js">/* AJAX para los menus a la capa principal */</script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript">
function form(){var params = Form.serialize($('formulario'));
new Ajax.Updater('bodychange', 'mipagina.php', {asynchronous:true, parameters:params, onLoading: showLoad, evalScripts: true });}
function showLoad () {
$('ContenidoFormulario').style.display = 'none';
$('ContenidoCargando').style.display = 'block';
}
</script>
 

en ajax_doblecapa tengo el script de arriiba

entonces en index ademas tengo 3 capas.

1.- menu.php
2.- pagina1.php
3 .- pagina2.php

en menu.php tengo el onclick que me llama las paginas 1 y 2 en sus respectivas capas, hay en la pagina 2.php tengo

Código HTML:

<form name="formulario" id="formulario" method="post" action="mipagina.php" onsubmit="form();return false;">
.....
...
</form>
 

entonces en la pagina 2 llamo a la misma pagina 2 donde envio los datos...

si cargo la capa cuando hago click en el menu y me trae pagina2.php me muestra bien el evento fade...
pero cuando envio los datos a traves del boton enviar del formulario no me toma el efecto
que puede ser :/

[masterpuppet]

Me perdi un poco, pero entiendo que si queres el mismo efecto en el submit del form, deberias agregarlo en la funcion form:

Código Javascript:

function form(){
   var params = Form.serialize($('formulario'));
   new Ajax.Updater('bodychange', 'mipagina.php', {
      asynchronous:true, 
      parameters:params, 
      onLoading: showLoad, 
      evalScripts: true,
      onComplete: function(){
         new Effect.Pulsate('cfa', { pulses: 5, duration: 2.5});    
         new Effect.Fade('cfa', { duration: 3.0, queue: 'end' });
      } 
   });
}
 

Esto si estas sobrescribiendo la misma capa, ya que los id's no se pueden repetir.

[kaninox]

masterpuppet sincesaramente el maestro del prototype, no sabes cuanto te lo agradesco. muchas gracias :)

[kaninox]

Sorry por el doble post una consulta master se puede agregar en

Código Javascript:

onComplete: function(){
         new Effect.Pulsate('cfa', { pulses: 5, duration: 2.5});    
         new Effect.Fade('cfa', { duration: 3.0, queue: 'end' });
 

un efecto para otra capa?
digamos en cfa quiero ambos efectos pero en cfx por decir algo solo el efecto pulse u otro

Código Javascript:

onComplete: function(){
          new Effect.Pulsate('cfx', { pulses: 5, duration: 2.5});  
         new Effect.Pulsate('cfa', { pulses: 5, duration: 2.5});    
         new Effect.Fade('cfa', { duration: 3.0, queue: 'end' });
 

agregue eso pero no me funciona es como que toma el primero del ID y se para?

Saludos.

[masterpuppet]

No deberia darte problemas, igualmente primero asegurate que no hay id's repetidos y segundo asignale un scope para separar las queues, algo asi:

Código Javascript:

onComplete: function(){
    new Effect.Pulsate('cfx', { pulses: 5, duration: 2.5, queue: { scope: 'cfxscope' } });  
    new Effect.Pulsate('cfa', { pulses: 5, duration: 2.5, queue: { scope: 'cfascope' } });    
    new Effect.Fade('cfa', { duration: 3.0, queue: { position: 'end', scope: 'cfascope'}});
}
 

Prueba y nos comentas.

Saludos.

[kaninox]

Pues solo me ejecut el CFX en el caso de agregar el CFX bajo el CFA me ejecuta el CFA :/ es raro, para que es el scope?

[masterpuppet]

Lo he testado y funciona correctamente, no se que puede estar interfiriendo en tu cola de efectos, el scope es para separar justamente las colas de efectos, sino pones scope se crea una cola genérica para todos los efectos, tenes la consola de firebug activa ? te muestra algún error ?, deberías envolver la llamada a la función en un try && catch ya que prototype "silencia" las Exceptions.

[kaninox]

tengo activo firebug y no me muestra ningún error solo me ejecuta un solo div el primero que ponga en la lista :/ eso que desactive todo lo creía que pudiera interferir pero es raro ya que los ID son únicos y para pruebas.

[masterpuppet]

Podrías colgar un demo ?, si lo veo directo capaz puedo detectar el fallo.

[kaninox]

monte una demo rápida aquí : http://www.sonidofull.cl/demo/

al costado izquierdo haces click sobre ingreso de datos, aparece Ingreso demo.
al costado se abren dos paginas una en cada capa en la de abajo el formulario solo me ejecuta el pulse cuando no ingresas nada, cuando ingresas algo no me hace el efecto
tu me dirás en que estoy fallando :/ Saludos y Gracias

[masterpuppet]

Creo que ya se donde esta el problema, en algún momento se da que las dos capas existan a la vez(cfx y cfa) ?, entiendo que no, y por eso el error, deberias checkear que existe primero:

Código Javascript:

onComplete: function(){
 if($('cfx')){
    new Effect.Pulsate('cfx', { pulses: 5, duration: 2.5, queue: {scope: 'cfxscope'}});  
 }
 if($('cfc')){
    new Effect.Pulsate('cfa', { pulses: 5, duration: 2.5, queue: {scope: 'cfcscope'}});    
    new Effect.Fade('cfa', { duration: 3.0, queue: {position: 'end', scope: 'cfcscope'} });
 }
}
 

Probalo y nos comentas.

Saludos.

[kaninox]

no existen al mismo tiempo por que hay un if else en php que comprueba datos, si es correcto muestro un div de lo contrario muestro el otro, de todas formas una vez mas le diste al clavo y me resulto como lo pones excepto por el cfc que agregaste no me resultaba tuve que cambiar a fca y me resulto, solo eso., muchas gracias master :D

Código Javascript:

onComplete: function(){
 if($('cfx')){
    new Effect.Pulsate('cfx', { pulses: 4, duration: 1.8, queue: {scope: 'cfxscope'}});  
 }
 if($('cfa')){
    new Effect.Pulsate('cfa', { pulses: 4, duration: 1.8, queue: {scope: 'cfascope'}});    
    new Effect.Fade('cfa', { duration: 7.0, queue: {position: 'end', scope: 'cfascope'} });
 }
}
 

[masterpuppet]

d+ que funciono, el cfc fue un typo sry :)

[kaninox]

masterpupet tengo unas dudas respecto al prototype, no se si lo mejor seria plantearlas en otro tema, pero van de la mano con el código expuesto.

1.- por que no puedo agregar algún calendario desplegable en un input solo pude con el que probamos : http://www.forosdelweb.com/f127/cons...ndario-870636/
los demás con códigos con jquery o mootols etc, no me funcionaron y probé muchos.
me gustaria poder usar dentro del formulario un calendario tipo : http://dev.base86.com/app/pages/scri...dar_version_2/

2.- hasta donde se el evalscript:true me permite ejecutar javascript dentro pero solo puedo hacer cosas tipo alert. un validador en javascript de campos por ejemplo no me funciona.


Saludos

[masterpuppet]

En realidad podes tener varias librerias a la vez, lo cual no quiere decir que sea una buena idea, yo únicamente haría un mix de librerías, si estuviera fuera de mi control el decidir que utilizar.
El problema es que todas utilizan $ para obtener los elementos, jQuery tiene noConflict para evitar este problema y Mootools tiene document.id, para utilizar el calendario que mensionas deberias envolver la clase vlaCalendar en una función anonima que se autoejecute, algo asi:

Código Javascript:

(function(){
    var $ = document.id;
    var vlaCalendar = new Class({
    ...
})();
 

debes tener en cuenta que document.id esta disponible a partir de Mootools 1.2.3 .

Con respecto a la otra pregunta, efectivamente evalscript permite ejecutar codigo js, pero tiene una peculiaridad, esto

Código Javascript:

function execute(){
   alert('Executed!');
}
 

no funciona, la forma correcta seria:

Código Javascript:

execute = function(){
   alert('Executed!');
}
 

Saludos.