Duda con mootools

Mikmoro · #1 (**permalink**) 22/03/2008, 16:48

Hola a todos. A ver si alguien me puede echar una mano.

Tengo este ejemplo de un slide con mootools:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Slide</title>
<link type="text/css" href="acor.css" rel="stylesheet" />
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){

var mySlide = new Fx.Slide('test');

$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
</head>
<body>

<h3 class="section">Fx.Slide Vertical</h3>

<a id="toggle" href="http://www.google.es">toggle</a>

<div id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</body>
</html>

Todo funciona correctamente, pero... ¿alguien sabría decirme qué añadir al javascript para el cuadro de texto no se muestre inicialmente?

Es decir, como veréis, al abrir la página el cuadro se muestra y con el toggle lo oculto y lo muestro, y lo que quiero es que al abrir esté oculto en lugar de visible, y luego mostrarlo con el toggle al pulsar.

Espero haberme explicado. Agradecido.

Mikel.

JavierB · #2 (**permalink**) 23/03/2008, 04:11

Movido al sub-foro de Frameworks desde JavaScript.

Saludos, :adios.

metacortex · #3 (**permalink**) 23/03/2008, 09:29

Código HTML:

<div id="test" style="height: 0; visibility: hidden;">

Edito:

Para que te quede accesible mejor pon esos estilos dentro de un javascript:

Código HTML:

<script type="text/javascript">
<!-- 
document.write('<style type="text/css">#test{height:0;visibility:hidden;}<\/style>')
-->
</script>

Mikmoro · #4 (**permalink**) 23/03/2008, 13:11

Hola, metacortex. Gracias por contestar.

Definitivamente no me he debido explicar muy bien.
Tengo bastante claro cómo ocultar el div mediante css, pero la cosa no es eso, porque si lo hago así, el div nunca se muestra mediante el método toggle de mootools, ya que no es un cambio de clase ni de estilo.

Digamos que con el javascript que uso en la cabecera, mediante el método "toggle" el div se muestra y oculta de forma alternativa correctamente, pero la cuestión es que inicialmente el modo es "mostrar", por decir así, y por eso al cargar la página el div se muestra, y yo quisiera que el modo por defecto fuera "ocultar", para que luego fuera mostrado por el toggle.

Quizá hayas visto el efecto en algunas plantillas de joomla que usan mootools, que se suele hacer con un panel de control en la parte superior que hace slide hacia abajo y aparece al ser pulsado, pero inicialmente aparece oculto, sólo con el enlace que acciona el toggle a la vista. La cosa es que ahora no encuentro ninguna de esas plantillas para ver cómo está hecho.

A ver si me he explicado mejor. Gracias.

Mikel.

metacortex · #5 (**permalink**) 23/03/2008, 13:55

¿Probaste el método? Yo lo probé y funciona correctamente. La asignación de estilos CSS no hace más que condicionar al script para que reconozca un estado inicial (por eso es que no lo encuentras dentro de los Js). Algunas cosas no están fijas en el script sino que tienes que hacerlas fuera para que éste ejecute la instrucción.

En este caso creo que la instrucción es "si se muestra al principio, lo ocultamos con el clic. Y si se oculta al principio, entonces lo mostramos".

Por si acaso, el consejo lo tomé de aquí:

http://jcesar.artelogico.com/2006/12...lto-con-moofx/

Si sigues teniendo problemas avísame para mandarte el que tengo aquí (con efectos de opacidad y todo). El archivo de configuración está simple. Bastante liviano. Pesa 15kb entre los 4 archivos.

Saludos.

Mikmoro · #6 (**permalink**) 23/03/2008, 15:52

Cita:

Iniciado por metacortex

¿Probaste el método? Yo lo probé y funciona correctamente. La asignación de estilos CSS no hace más que condicionar al script para que reconozca un estado inicial (por eso es que no lo encuentras dentro de los Js). Algunas cosas no están fijas en el script sino que tienes que hacerlas

Lo primero que hice fue pegar tu trozo de código y probarlo, a pesar de que ya lo había hecho, y el resultado fue el mismo: el div se oculta, pero al pulsar no aparece, porque la instrucción del toggle

$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();

no le hace que pierda el "visibility:hidden".

Quizá no lo hice bien.
Voy a probar con ese ejemplo y te cuento. Gracias.

Mikel.

metacortex · #7 (**permalink**) 23/03/2008, 16:10

Dame un rato Mikel para subirte un ejemplo al servidor. Te dejo la URL en la madrugada.

Mikmoro · #8 (**permalink**) 23/03/2008, 16:11

Argggggg, qué melón. Como de costumbre, era una bobada.
Lo que yo buscaba no era lo que aparece en el ejemplo, porque lo estoy haciendo con un slide (FX.Slide), pero la solución era bien sencilla:

he añadido la llamada al método FX.Slide.hide antes de añadir el evento click del enlace y listo.

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Slide</title>
<script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){

var mySlide = new Fx.Slide('test');
mySlide.hide();

$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
</head>
<body>

<h3 class="section">Fx.Slide Vertical</h3>

<a id="toggle" href="http://www.google.es">toggle</a>

<div id="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

</body>
</html>

Ya funciona como yo quería. Gracias por tu interés.

Mikel.

PiluK · #9 (**permalink**) 05/06/2008, 10:09

Gracias Mikmoro, yo tenía exactamente ese mismo problema y lo acabo de solucionar viendo tu mensaje.