Fx.Slide, un ejemplo más

4 de September, 2007

Arcadio, fiel visitante del sitio, vino por aquí con un problemita y he hecho un ejemplo mas sobre Mootools Fx.Slide, a él le sirvió, seguramente a alguien mas también le servirá y por eso lo hago mas visible dedicándole una entrada. Lo pueden ver desde aquí.

Popularity: 4% [?]

Otros artículos

Suscríbete para seguir el blog Escrito por Archivado en Mootools en español

20 comentarios »

20 comentarios en “Fx.Slide, un ejemplo más”

matias tripailao Dijo:
October 9, 2007 a las 12:16 am
En base a este ejmeplo tengo un problema: Al ponerlo en una página que excede el alto de la pantalla, cosa que en una lista vertical el “Tres” no se ve en la pantalla, al bajar y hacer click en ese link, sube abruptamente hace el Uno. ¿Cómo se puede solucionar ese sobresalto?

Saludos y felicitaciones por el blog.
Federico Dijo:
October 9, 2007 a las 10:01 pm
Hola matías, lo único que se me ocurre que puede ser es que en mi código yo no detengo el evento. Es decir, haces click en el enlace y como este tiene un #, la pagina se va a la parte mas alta. En el código de mi ejemplo deberias hacer un pequeño cambio, donde dice:

elemento.addEvent(‘click’, function()
{
var id = elemento.getProperty(‘id’);
$(‘elemento_’ + id).efecto.toggle();

if(anterior != false)

Cambialo por:

elemento.addEvent(‘click’, function(ev)
{
new Event(ev).stop();
var id = elemento.getProperty(‘id’);
$(‘elemento_’ + id).efecto.toggle();

if(anterior != false)

Espero que te sirva

Saludos
tikitakfire Dijo:
March 19, 2008 a las 5:39 am
hola! antes que nada quiero felicitarte por la excelente explicación!

ahora una pregunta: como hago para que al posicionar el puntero sobre algún elemento este aparezca y al quitar el puntero se oculte?

ya hice miles de pruebas pero no consigo lograrlo… espero que me ayudes! gracias…
Federico Dijo:
March 19, 2008 a las 8:55 am
Hola tikitakfire, si te referis a como comunmente sucede con los links…lo podes hacer con estilos. Dicho elemento podria ser asi:

#elemento {
cursor: pointer;
}

Saludos
tikitakfire Dijo:
March 22, 2008 a las 5:52 pm
hola! gracias por la respuesta y perdon por la tardanza en contestarte.

creo que me exprese mal, mira, estoy haciendo un carro de compras y uso esta estructura para mostrar los productos en la pagina principal:

Producto 1

ahora, lo que quiero hacer es que el div con las funciones () se muestre solo cuando se posiciona el cursor en cada producto.

como te dije en el comentario anterior ya intente muchas veces pero no entiendo como meter hide y show en un solo codigo(?) para que funcione…

espero que me ayudes y me perdones por no haber publicado el comentario en la entrada correspondiente
tikitakfire Dijo:
March 22, 2008 a las 5:59 pm
uh! no se puede poner el código, te subo a mi servidor
http://tikitakorama.com.ar/stuff/productos.txt
Federico Dijo:
March 22, 2008 a las 6:59 pm
Hola, a ver que te parece esto:

http://jourmoly.com.ar/ejemplos/mootools/efectos/fx-slide/tikitakfire.html

El área importante es el div con class item, cuando estas encima muestra el div functions que corresponde, cuando sacas el puntero del elemento, oculta el div functions.

Lo probe en ie7 y FF 2, me queda la duda en la linea 45, no se que tan correcto sea o que tan bien funcione en el resto de los navegadores eso de guardar la instancia del efecto en un atributo de un elemento.

Saludos
tikitakfire Dijo:
March 24, 2008 a las 2:16 am
yeah! muchísimas gracias! lo probe en opera y anda bien… si lo pruebo en otros navegadores te aviso como anda

saludos y gracias de nuevo…
Federico Dijo:
March 25, 2008 a las 2:13 pm
de nada
Introducción a MooTools Dijo:
May 7, 2008 a las 4:36 am
[...] FX.Slide. [...]
gustavo Dijo:
June 5, 2008 a las 5:34 am
hola, como puedo hacer si necesito que uno de los submenus al abrir la pagina aparezca desplegado??

Saludos, y felicitaciones por el blog
Gustavo
Federico Dijo:
June 5, 2008 a las 1:10 pm
No lo he probado, pero modificando esta porcion de codigo:

$$(‘.secciones div’).each(function(elemento)
{
var efecto = new Fx.Slide(elemento, {transition: Fx.Transitions.Back.easeOut, wait: false});
efecto.hide();

elemento.efecto = efecto;
});

Por esta otra:

$$(‘.secciones div’).each(function(elemento, index)
{
var efecto = new Fx.Slide(elemento, {transition: Fx.Transitions.Back.easeOut, wait: false});
if(index > 0)
efecto.hide();

elemento.efecto = efecto;
});

Espero que te funcione o al menos te de una idea de como lograrlo.

Saludos
gustavo Dijo:
June 7, 2008 a las 10:51 pm
Hola Federico, gracias por la respuesta, estuve probando y no lo logro… de la forma que me decís lo que me hace es que cuando aprieto el del index=0 (el primero), me despliega el 0 y el 1, y cuando aprieto el uno como que hace el slideOut del 1, después al apretar los otros empieza a funcionar el menú normalmente todo, pero antes ni siquiera, al entrar a la pagina logro que halla un submenu desplegado

Gustavo
Federico Dijo:
June 8, 2008 a las 12:42 pm
Hola gustavo, disculpa, faltaba una linea mas justamente en ese if:

if(index > 0)
efecto.hide();
else
anterior = elemento;

Lo subi aqui y de paso corregi otro error que habia cuando hacias click sobre un link que ya estaba abierto, desaparecia la caja.

El codigo quedo bastante feo, supongo que se podra mejorar con una de las nuevas funcionalidades de Mootools 1.2

Saludos!
gustavo Dijo:
June 8, 2008 a las 6:58 pm
Gracias Fede, me resolviste el problema… Ya guardo tu blog en mis favoritos y lo recomiendo a amigos…

Exitos
gustavo
SDaniel Dijo:
July 11, 2008 a las 2:40 am
Hola Federico
Pues bien, mi duda/problema es el siguiente:
Soy medio nuevo en esto y no logro hacer que el ejemplo funcione con mootools 1.2. Todo se muestra bien, pero a la hora de darle click a un enlace estando abierta una cajita, esta no se cierra :S

¿Podrías orientarme?
Muchas gracias
SDaniel Dijo:
July 11, 2008 a las 3:30 am
Bien, vuelvo con la solución

anterior.efecto.stop();

Esa linea causa todo el problema… se quita (o comenta) y ya está.

Debo decir que no fui yo quien lo solucionó, fue Zyos.

Un abrazo.
Federico Dijo:
July 11, 2008 a las 9:39 pm
Me alegro que lo hayan solucionado
topiz Dijo:
August 31, 2008 a las 2:09 pm
Hey, Federico!
Gracias por este ejemplo que está buenísimo.
Pero me ocurre el mismo problema que a le sucedía a SDaniel, si hago click en una cajita ya abierta, no se vuelve a cerrar :S
ya intenté quitar la línea que escribió SDaniel pero sigue sin cerrarse. Qué puede funcionar?
Mi código es exactamente igual al del ejemplo que pusiste, gracias por adelantado! ;D
W4 Dijo:
November 6, 2008 a las 1:23 am
Muchas Gracias Bro, de Verdad, son las 1:22 AM; buscando desde la tarde, muchas gracias ¡
manejo mootools, pero solamente novato.
thanx bro¡
Segui Posteando mas Tutos Bros¡
Animo¡