Mensajes

Hahaha... claro, poner la imagen directamente en html.

Hehehe todo ha salido perfecto, muchas gracias por la ayuda prestada!

Me queda ver porque las tablas que hay dentro de los divs reaccionan al toggle que solo debería activarse al darle click a la imagen (div) no a la tabla o lo que hay dentro... al darle click a la tabla o su contenido, desaparece, por el toggle sera...

Si sabes porque, o si hay una manera mejor de hacer esto:

Código (html) [Seleccionar] Expandir


$(document).ready(function(){
$("#web_design").click(function(){             // div - imagen - opcion
$("#layout_content").hide();                      // tabla
$("#corporate_image_content").hide();      // tabla
$("#picture_content").hide();                     // tabla
$("#pacakin_content").hide();                    // tabla
$("#digital_printing_content").hide();          // tabla
$("#web_design_content").toggle();            // tabla
});
});


Lo que quiero hacer con el código es, al hacer click en una opción, primero ocultar las otras 5 tablas (en el caso de que una este abierta) y mostrar u ocultar (depende de si esta ya abierta) la tabla correspondiente a esa opción clickada. Creo que es algo muy común que hacen muchos menús...

[);]

Estoy probando, la penúltima llave le falta ");".

Pues por lo que veo, con el -100 se va igualmente a la izquierda, pero un poco solo, apenas sale de la pantalla, el -200 ya ni se ve, se sale.

La idea del segundo click funciona perfectamente, gracias. Ahora es cuestión de jugar con los numeritos para ver cual es el bueno... hehehh

Claro, el codigo que hace el click es el que puse antes

Código (html) [Seleccionar] Expandir


$(document).ready(function(){
$("#layer_0").click(function(){
$(this).toggleClass("layer_2");
$("#photo").hide();
$("#layer_1").hide();
$( ".layer_2:first" ).animate({ 'left': 100}, { duration: 1000, step: function( now, fx ){  // animacion
$( ".layer_2:gt(0)" ).css( "left", now );  // animacion
}
});
$("#design_menu").fadeIn();
});
});


Y este es el html, igual que siempre, llama una imagen y hace de boton:

Código (html) [Seleccionar] Expandir


<div id="layer_0" class="layer_0"></div>


[$( ".layer_2:first" ).animate(]

Vale, si que funciona, el padre display none y los hijos display block.

Ahora me toca volver al tema de la animacion, hacer que vuelva a la posicion original con el segundo click...

¿Se puede hacer el animate para que corra un script cuando se le hace click por segunda vez? Donde dice $( ".layer_2:first" ).animate( ese first quiere decir el primer click? o para que sirve? se puede configurar para que corra una funcion al segundo click?

Ahora mismo tengo un problema que no funciona el .show() y no consigo averiguar que pasa...

Código (javascript) [Seleccionar] Expandir


$(document).ready(function(){
$("#layer_0").click(function(){
$(this).toggleClass("layer_2");
$("#photo").hide();
$("#layer_1").hide();
$( ".layer_2:first" ).animate({ 'left': 100}, { duration: 1000, step: function( now, fx ){
$( ".layer_2:gt(0)" ).css( "left", now );
}
});
$("#design_menu").show().delay(1000); // not working ???
});
});


He probado tambien cambiandolo a class, pero nada, el html es igual que el de antes:

Código (javascript) [Seleccionar] Expandir


<div id="design">
       <div id="design_menu" class="design_menu" style="visibility:hidden">
        <div id="web_design" class="web_design">


Debajo de design_menu hay 6 divs que son las opciones, debajo de cada opcion hay tablas que deben quedar ocultas hasta que se pinche en una opcion y muestre su tabla. Las tablas las tengo ocultas en css con visibility:hidden.

Ahora el problema, es que el script no muestra las opciones, bueno muestra el design_menu y las opciones al ser child, deberian de mostrarse, no? Como hago para que no se muestren las tablas que deben quedar ocultas hasta pinchar las opciones?

Llevo horas dandole vueltas y probando muchas cosas...

Quiero que vuelva con el segundo click, es decir, el primer click lo corre a la izquierda y una vez quieto si se le vuelve a dar, el segundo, que vuelva a su posicion original y aparte que muestre el que se oculto.

Y lo otro, me refiero a que la función animate solo funciona hacia la izquierda, no se mueve hacia la derecha y necesito que la otra imagen gire a la derecha.



Otra cosa, desde que empece tengo un problema muy extraño con el css... Las dos imagenes ocultas que se deben mostrar al click, segun las opciones css estan en la misma posicion que las visibles, pero cuando en el codigo html quito lo de oculto y las veo que estan en otra posición, pero en las opciones tienen la misma posicion... Por ejemplo layer_0 esta en left:700px y top:170px y layer_02 igual, pero en el diseño esta en otra posicion...

¿Como es esto posible?

Me molesta porque rompe la resolución de toda la pagina y salen las barras para subir y mover al lado, aunque no se vea nada porque estan ocultas...

EDITO: Vale, ya lo he solucionado los problemas, lo del css y la posicion era porque el div de la imagen estaba dentro de otro div con otra imagen, por eso cuando ponia una encima de la otra marca posicion left y top 0... Y lo otro, efectivamente he tenido que trastear para averiguar que numero negativo equivalia al 100, el mas parecido -1550 para que se moviera el mismo tramo.

Si, ese código es de la otra imagen, que debe de ir hacia la derecha.

Además, ¿donde se supone que debo poner el mismo codigo pero con el -100? dentro del mismo click? debajo del todo? pero donde dice layer_2:first poner second?

Aah vale claro, si estaba pensando justamente en algo asi. Voy a probar y te cuento.

Pero hay un problema, y es que hacia la derecha no funciona!

Código (javascript) [Seleccionar] Expandir


$(document).ready(function(){
$("#layer_1").click(function(){
$(this).toggleClass("layer_3");
$("#layer_0").hide();
$( ".layer_3:first" ).animate({ right: 100}, { duration: 1000, step: function( now, fx ){
$( ".layer_3:gt(0)" ).css( "right", now );
}
});
});
});



Si es posible, si, para poder ver el otro menu, osea la otra imagen que hace exactamente lo mismo. Son como dos menus, si uno se muestra el otro se oculta.