Recorrer divs con mootools ¿cómo?
Hola socios...
estoy haciendo un menú vertical de 2 niveles y he decidido optar por mootools como framework para controlar la interactividad.
Tengo una función con la cual cojo una capa con opacity: 0; y hago un fade in ha visible, y estoy haciendo otra función para ejecutar el efecto de fade out a invisible para ir controlando los submenus, según se haga click en una opción o otra y vayan apareciendo/desapareciendo.
mi intención es hacer una función que recorra los divs que forman parte de los submenus y compruebe cual esta visible (opacity:1) y entonces que se ejecute el fade out para poder hacer un fade in y mostrar el submenu de la sección que he clicado.
se que con $$ se hace referencia a un grupo de elementos, pero en este caso son DIV's y no puedo recorrer todos los div¡s de la web, no tiene sentido, de que otra manera puedo gestionar esto? he pensado de usar un array donde estén los nombres de las capas de las subsecciones... pero, no se... quiza haya otra forma mejor.
Un saludo y gracias!!
markshock
ernexbcn
Declara esa variable que te digo fuera de la función, y le asignas como valor el id del div que has desplegado dentro en el onclick, y allí mismo deberías verificar que si no es el mismo que el último abierto (o es false --si la declaras como false de valor inicial porque no ha sido abierto ninguno-) haga el efecto.
Algo como:
var ultimo_desplegado = false;
Fuera de las funciones que tienes allí, declarala justo despues de <script>
Otra opción es utilizar como verificación alguna de las propiedades css o clases que asignas a los divs que están desplegadas como método de corroborar si tienes que ejecutar el efecto de apertura o no, no he mirado bien tu código, pero seguro hay una forma de hacerlo, al menos en jQuery lo he hecho con algunas cosas.
Si, pero las propiedades CSS que otorgo tampoco tienen nada de especial, solamente trasteo las propiedades opacity y display, de manera que no hay ninguna que sea realmente peculiar...
Probare de definir una variable global fuera del function a ver si así trabaja mejor...
Gracias y un saludo..
ernexbcn
Declara esa variable que te digo fuera de la función, y le asignas como valor el id del div que has desplegado dentro en el onclick, y allí mismo deberías verificar que si no es el mismo que el último abierto (o es false --si la declaras como false de valor inicial porque no ha sido abierto ninguno-) haga el efecto.
Algo como:
var ultimo_desplegado = false;
Fuera de las funciones que tienes allí, declarala justo despues de <script>
Otra opción es utilizar como verificación alguna de las propiedades css o clases que asignas a los divs que están desplegadas como método de corroborar si tienes que ejecutar el efecto de apertura o no, no he mirado bien tu código, pero seguro hay una forma de hacerlo, al menos en jQuery lo he hecho con algunas cosas.
markshock
ernexbcn
Puedes setear una variable con el nombre o id de esa sección y en la función que abre secciones si seccion clickada == sección abierta no ejecutar el bloque.
Es una idea.
Lo he echo, he colocado incluso un alert para ver en pantalla los valores... pero aun siendo iguales se lo pasa por el forro....
jarll....
ernexbcn
Puedes setear una variable con el nombre o id de esa sección y en la función que abre secciones si seccion clickada == sección abierta no ejecutar el bloque.
Es una idea.
markshock
Bueno, esto mas o menos lo he solucionado, pero ahora tengo otro problema, lo podéis ver en esta URL
http://www. newsi teworks.com/test_marc/menuv2niveles/
Cuando haceis c lick e n cualquier sección funciona perfectamente, se desva nece un a y aparece la otra... todo OK.
El problema está e n cuando hago click otra vez en la sección que tengo visib le... me hace como un parpadeo y me repite el efecto de fa de in otra vez...
como podría caparlo para que si está ab ierta la se cción en la que hago click hiciera caso omiso d el código y siguiera mostrándose....?
El code..
<code>
<html>
<head>
<script>link al script de mootools.</script>
<style>
body{
padding:0;
margin:0;
}
#capa0{
width:150px;
height:160px;
background:#ccc;
position:relative;
float:left;
}
#capa1{
position:absolute;
width:150px;
height:160px;
background:red;
opacity:0;
z-index:3;
left:170px;
display:none;
}
#capa2{
position:absolute;
width:150px;
height:160px;
background:Yellow;
opacity:0;
z-index:3;
left:170px;
display:none;
}
#capa3{
position:absolute;
width:150px;
height:160px;
background:Green;
opacity:0;
z-index:3;
left:170px;
display:none;
}
</style>
</head>
<body>
<div>
<div><a href="" id="link1">seccion 1</a><br><br><a href="" id="link2">seccion 2</a><br><br><a href="" id="link3">seccion 3</a></div>
<div>submenu 1</div>
<div>submenu 2</div>
<div>submenu 3</div>
</div>
<script>
var myFunction = function(num){
var i = 1;
var total = 3;
for(i=1;i<total+1;i++){
if($("capa"+i).style.opacity==1){
var ocultar = document.getElementById("capa"+i);
new Fx.Style(ocultar, 'opacity', {duration: 500} ).start(0);
}
}
var div = $("capa"+num).setStyles({
display:'block',
opacity: 0
});
new Fx.Style(div, 'opacity', {duration: 700} ).start(1);
}
$('link1').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(1);
});
$('link2').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(2);
});
$('link3').addEvent('click', function(ev){
new Event(ev).stop();
myFunction(3);
});
</script>
</body>
</html>
</code>