Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: gAb1 en 20 Abril 2014, 01:02 am


Título: mover imagenes onclick con jquery
Publicado por: gAb1 en 20 Abril 2014, 01:02 am
Hola, llevo un buen rato intentando hacer mover unas imágenes hacia los lados cuando se haga click en ellas. Estoy usando input type button y onclick para el jscript, pero no consigo nada...

La imagen la llamo desde una hoja de estilo con un div y la id de la hoja de estilo, en la hoja de estilo uso hover para que se cambie al pasar el cursor por encima, pero necesito que la segunda imagen (la que aparece al pasar el cursor por encima) sea la que haya a partir del click.

Llevo trasteando un buen rato y no me aclaro:

index.html
Código
  1. <!doctype html>
  2. <html lang="en">
  4.     <meta charset="utf-8">
  5.     <title>Untitled Document</title>
  6.  
  7.     <link rel="stylesheet" type="text/css" media="all" href="css/logo.css">
  8.     <link rel="stylesheet" type="text/css" media="all" href="css/foot.css">
  9.     <link rel="stylesheet" type="text/css" media="all" href="css/layer.css">
  10.     <link rel="stylesheet" type="text/css" media="all" href="css/design_menu.css">
  11.     <link rel="stylesheet" type="text/css" media="all" href="css/photo_menu.css">
  12.     <link rel="stylesheet" type="text/css" media="all" href="css/.css">
  13.  
  14.     <script type="text/javascript" src="jscript/jquery-2.1.0.min.js"></script>
  15.     <script type="text/javascript" src="jscript/moveitem.js"></script>
  16. </head>
  17.  
  19.     <div id="logo"></div>
  20.     <div id="creativos"></div>
  21.     <div id="DADA"></div>
  22.     <div id="rights_reserved"></div>
  23.     <div id="design_company"></div>
  24.     <div id="pro_photo_web_design"></div>
  25.     <div id="layer_0" input type="button" value="Delete Image" onclick="return delImage('layer_0')">
  26.     	<div id="layer_2" style="visibility:hidden">
  27.             <table id="design_menu">
  28.                 <div id=""></div>
  29.                 <div id=""></div>
  30.                 <div id=""></div>
  31.                 <div id=""></div>
  32.                 <div id=""></div>
  33.                 <div id=""></div>
  34.             </table>
  35.         </div>
  36.     </div>
  37. 	<div id="layer_1" input type="button" value="Delete Image" onclick="return delImage2('layer_1')">
  38.     	<div id="layer_3" style="visibility:hidden">
  39.             <table id="photo_menu">
  40.                 <div id=""></div>
  41.                 <div id=""></div>
  42.                 <div id=""></div>
  43.                 <div id=""></div>
  44.                 <div id=""></div>
  45.                 <div id=""></div>
  46.             </table>
  47.         </div>
  48.     </div>
  49. </body>
  50. </html>
  51.  
  52.  

layer.css
Código
  1. #layer_0 {
  2. 	background: url(../img/layer/layer-0.png) no-repeat;
  3. 	position: absolute;
  4. 	left: 700px;
  5. 	top: 164px;
  6. 	width: 599px;
  7. 	height: 1291px;
  8. 	z-index: 3;
  9. }
  10.  
  11. #layer_1 {
  12. 	background: url(../img/layer/layer-1.png) no-repeat;
  13. 	position: absolute;
  14. 	left: 1300px;
  15. 	top: 170px;
  16. 	width: 527px;
  17. 	height: 1291px;
  18. 	z-index: 3;
  19. }
  20.  
  21. #layer_0:hover {
  22. 	background: url(../img/layer/layer-2.png) no-repeat;
  23. }
  24.  
  25. #layer_1:hover {
  26. 	background: url(../img/layer/layer-3.png) no-repeat;
  27. }
  28.  
  29. #layer_2 {
  30. 	background: url(../img/layer/layer-2.png) no-repeat;
  31. 	position: absolute;
  32. 	left: 100px;
  33. 	top: 170px;
  34. 	width: 599px;
  35. 	height: 1291px;
  36. 	z-index: 3;
  37. }
  38.  
  39. #layer_3 {
  40. 	background: url(../img/layer/layer-3.png) no-repeat;
  41. 	position: absolute;
  42. 	left: 2000px;
  43. 	top: 170px;
  44. 	width: 527px;
  45. 	height: 1291px;
  46. 	z-index: 3;
  47. }
  48.  
  49.  
el jscript que uso no funciona, pondré una parte por si se puede usar algo, aunque me temo que se va necesitar jquery para todo
Código
  1. Element.prototype.remove = function() {
  2.     this.parentElement.removeChild(this);
  3. }
  4. NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
  5.     for(var i = 0, len = this.length; i < len; i++) {
  6.         if(this[i] && this[i].parentElement) {
  7.             this[i].parentElement.removeChild(this[i]);
  8.         }
  9.     }
  10. }
  11.  
  12. function delImage(imageID) {
  13.  
  14. document.getElementById(imageID).remove();
  15.  
  16. document.getElementById("layer_1").remove();
  17.  
  18. }
  19.  
  20.  
  21. function delImage2(imageID) {
  22.  
  23. document.getElementById(imageID).remove();
  24.  
  25. document.getElementById("layer_0").remove();
  26.  
  27. }
  28.  

Como ya he dicho, necesito que al hacer click y eliminarse las dos imágenes, aparezca una desplazándose lateralmente desde donde estaba la imagen en la que se hizo click y se quede fija, para más adelante mostrar el menú oculto.

Además, estaba pensando en no eliminar las imágenes, si no ocultarlas. Porque las dos imágenes, son como portadas para los menús, cuando haces click en una se gira hacia el lado (ej.: si se hace click en la imagen del lado derecho, se desplaza a la derecha), la otra se elimina o desaparece (mejor) y aparece un menú con 6 opciones (imágenes con link) y cada opción abre un tabla o tablas sueltas donde van imágenes y texto, en el lado vacío que dejo la imagen que no se clickó y al revés. Entonces quería no eliminarlas para que se pueda volver a dejar como estaba todo, darle click otra vez y que se cierre todo y quede como al principio.

¿Alguien puede ayudarme con este lio?

Muchas gracias!

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 20 Abril 2014, 02:45 am
Bueno, no me manejo mucho con css, y para adaptarme a lo que se, modificaria lo siguiente

Código
  1. .layer_0 {
  2. 	background: url(../img/layer/layer-0.png) no-repeat;
  3. 	position: absolute;
  4. 	left: 700px;
  5. 	top: 164px;
  6. 	width: 599px;
  7. 	height: 1291px;
  8. 	z-index: 3;
  9. }
  10.  
  11. .layer_1 {
  12. 	background: url(../img/layer/layer-1.png) no-repeat;
  13. 	position: absolute;
  14. 	left: 1300px;
  15. 	top: 170px;
  16. 	width: 527px;
  17. 	height: 1291px;
  18. 	z-index: 3;
  19. }
  20.  
  21. .layer_0:hover {
  22. 	background: url(../img/layer/layer-2.png) no-repeat;
  23. }
  24.  
  25. .layer_1:hover {
  26. 	background: url(../img/layer/layer-3.png) no-repeat;
  27. }
  28.  
  29. .layer_2 {
  30. 	background: url(../img/layer/layer-2.png) no-repeat;
  31. 	position: absolute;
  32. 	left: 100px;
  33. 	top: 170px;
  34. 	width: 599px;
  35. 	height: 1291px;
  36. 	z-index: 3;
  37. }
  38.  
  39. .layer_3 {
  40. 	background: url(../img/layer/layer-3.png) no-repeat;
  41. 	position: absolute;
  42. 	left: 2000px;
  43. 	top: 170px;
  44. 	width: 527px;
  45. 	height: 1291px;
  46. 	z-index: 3;
  47. }
  48.  

Para que las propiedades en vez de ser ID CSS, sean clases CSS
entonces en tu div que tenga el id layer3 por ejemplo, agregale el class="layer3"

ok, lo que tu quieres es cambiar la clase css del div por cada click que se haga en en el div, te voy a dar una idea porque tu problema realmente no lo entendi mucho, pero si entendi que con un click quieres hacer que se quite la clase css del div.

Vamos a ver si esto te sirve.

Código
  1. $(document).ready(function(){
  2. $("#layer3").click(function(){
  3. /*Cada vez que le haces click, se agrega la clase o se elimina dependiendo del estado */
  4. $(this).toggleClass("layer3");
  5. });
  6. });
  7.  

http://api.jquery.com/toggleClass/

Tambien te puede servir, addClass o removeClass dependiendo de lo que quieras en jquery


Se me olvido otra cosa
Código
  1.     <div id="layer_0" input type="button" value="Delete Image" onclick="return delImage('layer_0')">
  2.  
  3.  
Eso no es valido, un div es un div, no es mitad div ni mitad input xD no existe tal cosa

Código
  1. <input type="button" value="Delete image" onclick="alert('alerta hice click');" />
Eso es un boton

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 20 Abril 2014, 14:58 pm
Hola y gracias por responder.

Hmm respecto a lo que comentas sobre el div y el boton, es un diseño gráfico con animaciones y no puedo poner botones por ahí, por eso quería que el propio div o la propia imagen sea el botón y funciona perfectamente, con otro script que usaba antes pero no hacia lo que quería, la imagen se desplazaba instantáneamente al hacerle click, sin hacer la animación.

No tengo problemas para usar clases en lugar de ids. De todas maneras hay que cambiar bastante.

¿Sabes como puedo hacerlo, probar tu código haciendo que la imagen sea el botón?

Para lo de mover la imagen lateralmente creo que era una función u opción de toggle si no me equivoco...

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 20 Abril 2014, 16:02 pm
Cita de: gAb1 en 20 Abril 2014, 14:58 pm
Hola y gracias por responder.

Hmm respecto a lo que comentas sobre el div y el boton, es un diseño gráfico con animaciones y no puedo poner botones por ahí, por eso quería que el propio div o la propia imagen sea el botón y funciona perfectamente, con otro script que usaba antes pero no hacia lo que quería, la imagen se desplazaba instantáneamente al hacerle click, sin hacer la animación.

No tengo problemas para usar clases en lugar de ids. De todas maneras hay que cambiar bastante.

¿Sabes como puedo hacerlo, probar tu código haciendo que la imagen sea el botón?

Para lo de mover la imagen lateralmente creo que era una función u opción de toggle si no me equivoco...
Para mover la imagen lo unico que hace toggle, es por cada click, agregar tu clase css o quitarla (En caso que este la imagen, el css estaría puesto en el div,entonces al hacer click, le quita la clase y desaparece la imagen, si le hace click de nuevo, agrega la clase css y agrega la imagen)

Lo que puedes hacer es que el div sea clickeable nada mas, quitale la propiedad de input button y dejalo como div

Código
  1. <div id="layer_0" input type="button" value="Delete Image" onclick="return delImage('layer_0')">
Esto dejarlo asi

Código
  1. <div id="layer_0" class="layer_0">
De esta forma será un div comun y corriente y no existira boton, si le haces click a la imagen entonces esta desaparecera porque habremos hecho que el div sea clickeable ya que le agregamos el evento jquery de click.

Estaré atento a tus dudas, saludos!.


Se me olvidaba otra cosa

Código
  1.  
  2. $(document).ready(function(){
  3. //hacer esto mismo para cada clase
  4. $("#layer_3").click(function(){
  5. /*Cada vez que le haces click, se agrega la clase o se elimina dependiendo del estado */
  6. $(this).toggleClass("layer_3");
  7. });
  8. });
  9.  
  10.  

Debes repetir eso con cada div con layer que tengas. Con su propio nombre y su propia clase css, entiendes?

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 20 Abril 2014, 16:20 pm
Si, claro, en el mismo archivo js. El problema es que no hace nada, le doy click a la imagen y nada, solo el efecto hover del css...

Lo tengo tal y como me has dicho: div id y class sin nada mas.

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 20 Abril 2014, 16:22 pm
Puedes ver la consola del navegador y ver los errores javascript que arroja?

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 20 Abril 2014, 16:27 pm
Vale, fallo mio, había puesto mal una cosa.

El problema esque se oculta y ya no se le puede dar click... Tengo que poner que al darle se oculte por ejemplo el layer 0 y que se muestre el layer 2 y con el otro lo mismo, se oculta el layer 1 y se muestra el 3.

¿Tal y como lo tengo estaría bien?

<div id="layer_3" style="visibility:hidden"> añadiendole class="layer_3"???

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 20 Abril 2014, 16:49 pm
Código
  1. $("#layer_3").click(function(){
  2. /*Cada vez que le haces click, se agrega la clase o se elimina dependiendo del estado */
  3. $(this).removeClass("layer_3");
  4. $("#layer_1").addClass("layer_1");
  5. });

Juega con el removeClass y addClass y tienes que ir intercambiando las propiedades en cada layer que quieras.

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 20 Abril 2014, 17:27 pm
Vale, con un simple toggle puedo dejar la imagen cambiada por hover fija.

Código
  1. $(document).ready(function(){
  2. $("#layer_0").click(function(){
  3. $(this).toggleClass("layer_2");
  4. });
  5. });

Ahora, a la vez que se cambia la imagen (layer 0 por layer 2) quiero que otra imagen se oculte (layer 1), he probado asi, primero con toggleclass primero y segundo con removeclass primero, y también con los dos (this) juntos, pero no funciona
Código
  1. $(document).ready(function(){
  2. $("#layer_0").click(function(){
  3. $(this).removeClass("layer_1");
  4. });
  5. $("#layer_0").click(function(){
  6. $(this).toggleClass("layer_2");
  7. });
  8. });
o
Código
  1. $(document).ready(function(){
  2. $("#layer_0").click(function(){
  3. $(this).toggleClass("layer_2");
  4. $(this).removeClass("layer_1");
  5. });
  6. });

Solo funciona el toggleclass, la imagen se cambia, pero la otra imagen no se oculta.

Lo ultimo seria al hacer click en una imagen, todo lo anterior, más aparte que se desplace lateralmente la imagen actual, en este caso layer 2 o layer 3 (cada una hacia un lado distinto).

Gracias.

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 20 Abril 2014, 17:31 pm
Código
  1. $(document).ready(function(){
  2. $("#layer_0").click(function(){
  3. $(this).removeClass("layer_1");
  4. $(this).addClass("layer_2");
  5.  
  6. });
  7. });
  8.  

Prueba con eso.

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 20 Abril 2014, 17:41 pm
Nada, ahora ni siquiera se vuelve a la original, al no ser toggle. Tampoco se quita la otra imagen.

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 20 Abril 2014, 17:44 pm
Ok vamos por parte para que nos entendamos.

layer_0 , es un div con una imagen verdad, quieres que al hacer click, ¿aparezca que div con la imagen? (y quieres hacer desaparecer la imagen de layer_0).

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 20 Abril 2014, 18:00 pm
Si, al igual que los demás layer_x y los tengo con div, y si son imágenes.

Son 2 imágenes que forman 1, en blanco y negro. Las otras 2 imágenes son las mismas solo que con color y brillantes y también forman 1 imagen, aunque esta cortada en 2.

layer_2 y layer_3 remplazan a layer_0 y layer_1 al pasar el raton por encima y al hacer click.

layer 2 y 3 son en color y lo que quiero hacer es que al hacer click en una de las dos imágenes se cambie (aunque ya esta en color porque al pasar el raton por encima se activa la función hover de css y cambia las imagenes mientras este encima) y la otra imagen que hay al lado se oculte para dejar espacio. Lo primero lo hace perfectamente toggle, lo de ocultar la otra imagen todavia falta por hacerlo.

Son dos imágenes que forman una figura pero partida, cuando se hace click en una se desplaza a un lado y la otra se oculta y aparece un menu al lado de la que se ha desplazado, aparte de cambiar la imagen de blanco y negro a color.

Espero no haberte creado más dudas... hehehhe

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 20 Abril 2014, 18:07 pm
Citar
layer_2 y layer_3 remplazan a layer_0 y layer_1 al pasar el raton por encima y al hacer click.

Lo que quiero hacer es que al hacer click en una de las dos imágenes aparezca en color y la otra imagen que hay al lado se oculte para dejar espacio.

Para reemplazar el estilo ya sabes que es con toggle o usando removeClass y addClass, si quieres ocultar algo puedes usar
Código
  1. $("#idDiv").hide();
  2.  

para volver a mostrarlo puedes usar
Código
  1. $("#idDiv").show();
  2.  

Si quieres ocultar con animacion puedes usar el fadeIn() y el fadeOut() en vez de hide y show()

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 20 Abril 2014, 18:33 pm
Entonces me gustaria usar toggle por la posibilidad de que se vuelva a como estaba. Entonces seria usar el script del toggle añadiendole eso? asi?
Código
  1.     $(document).ready(function(){
  2.     $("#layer_0").click(function(){
  3.     $(this).toggleClass("layer_2");
  4.     $("#layer_1").hide();
  5.     });
  6.     });

funciona, asi esta bien.

Ahora lo que necesito es mover lateralmente la imagen al hacerle click. Mover, deslizar... mientras vaya moviéndose hacia un lado me sirve, he estado mirando, pero creo que no encuentro la función que necesito. Y cuando termine de mover la imagen mostrar el menu al lado, eso supongo que es igual con el style hidden y usando el toggle, no?

muchas gracias!

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 20 Abril 2014, 18:39 pm
Te recomiendo visitar la pagina de jquery y ver la documentación, hay miles de eventos geniales.

A ti para mover la imagen de forma lateral te puede servir el animate()

https://api.jquery.com/animate/

Del mismo link saco lo que necesitas.

Código
  1.  
  2. $( "#right" ).click(function() {
  3.   $( ".block" ).animate({ "left": "+=50px" }, "slow" );
  4. });
  5.  
  6. $( "#left" ).click(function(){
  7.   $( ".block" ).animate({ "left": "-=50px" }, "slow" );
  8. });
  9.  

Visita el sitio, te encontraras con mas funciones y propiedades.

Saludos  :)

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 20 Abril 2014, 23:36 pm
Hola, he estado ojeando la pagina y he sacado de un ejemplo otro posible script y al parecer funciona hehehe

Lo que me gustaría hacer es algo que seguramente es dificil, seria que al volver a darle a la imagen movida, vuelva a la posicion original y vuelva a aparecer la otra imagen que se oculto.

Este es el codigo:
Código
  1. $(document).ready(function(){
  2. $("#layer_0").click(function(){
  3. $(this).toggleClass("layer_2");
  4. $("#layer_1").hide();
  5. $( ".layer_2:first" ).animate({ left: 100}, { duration: 1000, step: function( now, fx ){
  6. $( ".layer_2:gt(0)" ).css( "left", now );
  7. }
  8. });
  9. });
  10. });
  11.  

Lo que hace actualmente, una vez ha terminado de moverse, al volver a darse tan solo muestra la otra imagen sin color.

Lo que necesito es algo parecido al toggle ese pero para el animate...

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 20 Abril 2014, 23:44 pm
Primero, si vas a llamar a la funcion click de un div, solo necesitas un evento por cada div diferente, no deberias llamar al mismo div $("idDiv").click dos veces.

y solo es necesario un solo $(document).ready en todo el DOM

En palabras simples así debería ser.
Código
  1.  
  2.  
  3.     //Inicio document.ready
  4. $(document).ready(function(){
  5.     //inicio layer 0 click
  6. $("#layer_0").click(function(){
  7. $(this).toggleClass("layer_2");
  8. $("#layer_1").hide();
  9. $( ".layer_0:first" ).animate({ left: 100}, { duration: 1000, step: function( now, fx ){
  10. $( ".layer_0:gt(0)" ).css( "left", now );
  11. }
  12. });
  13. //fin layer 0 click
  14. });
  15.  
  16. //inicio layer 1 click
  17. $("#layer_1").click(function(){
  18. $(this).toggleClass("layer_3");
  19. $("#layer_0").hide();
  20.  
  21. $( ".layer_1:first" ).animate({ left: 100}, { duration: 1000, step: function( now, fx ){
  22. $( ".layer_1:gt(0)" ).css( "left", now );
  23. }
  24.  
  25. });
  26. //fin layer 1 click
  27. });
  28.  
  29. //fin document.ready
  30. });
  31.  
  32.  
  33.  


Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 20 Abril 2014, 23:47 pm
Si, lo siento, me acababa de dar cuenta y había modificado, pero ya habías respondido, hehehe

Como puedo hacer para que el animate vuelva otra vez al hacer click, al igual que el togge?

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 20 Abril 2014, 23:52 pm
Te refieres a que el animate vuelva a su posición original de forma animada también?

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 20 Abril 2014, 23:52 pm
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.

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 21 Abril 2014, 00:02 am
No estoy seguro pero supongo que es lo contrario con lo que hiciste xD

Código
  1. $( ".layer_1:first" ).animate({ left: -100}, { duration: 1000, step: function( now, fx ){
  2. $( ".layer_1:gt(0)" ).css( "left", now );
  3.  

Recuerda el ejemplo que te puse

Código
  1. $( "#right" ).click(function() {
  2.   $( ".block" ).animate({ "left": "+=50px" }, "slow" );
  3. });
  4.  
  5. $( "#left" ).click(function(){
  6.   $( ".block" ).animate({ "left": "-=50px" }, "slow" );
  7. });
  8.  
Fijate cuando va a la derecha, le suma pixeles, cuando va al lado izquierdo, le resta la misma cantidad de pixeles.

Asi que debería servir con lo que te puse primero.

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 21 Abril 2014, 00:06 am
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
  1. $(document).ready(function(){
  2. $("#layer_1").click(function(){
  3. $(this).toggleClass("layer_3");
  4. $("#layer_0").hide();
  5. $( ".layer_3:first" ).animate({ right: 100}, { duration: 1000, step: function( now, fx ){
  6. $( ".layer_3:gt(0)" ).css( "right", now );
  7. }
  8. });
  9. });
  10. });
  11.  
  12.  

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 21 Abril 2014, 00:11 am
Acuerda que tu tenias left:100
te dije que si querias que volveria a su posicion debia ser left:-100


Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 21 Abril 2014, 00:13 am
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?

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 21 Abril 2014, 00:16 am
Cita de: gAb1 en 21 Abril 2014, 00:13 am
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?

En que momento quieres que vuelva a su posición original? Cuando le des click por segunda vez y ya este en la corrida? pero quieres que en ese momento solo vuelva a su posición original y nada más?

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 21 Abril 2014, 00:22 am
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? :huh: :huh:

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.

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 21 Abril 2014, 17:55 pm
¿Que problemas quedan?

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 21 Abril 2014, 18:06 pm
Ahora mismo tengo un problema que no funciona el .show() y no consigo averiguar que pasa...

Código
  1. $(document).ready(function(){
  2. $("#layer_0").click(function(){
  3. $(this).toggleClass("layer_2");
  4. $("#photo").hide();
  5. $("#layer_1").hide();
  6. $( ".layer_2:first" ).animate({ 'left': 100}, { duration: 1000, step: function( now, fx ){
  7. $( ".layer_2:gt(0)" ).css( "left", now );
  8. }
  9. });
  10. $("#design_menu").show().delay(1000); // not working ???
  11. });
  12. });
  13.  

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

Código
  1. <div id="design">
  2.         <div id="design_menu" class="design_menu" style="visibility:hidden">
  3.         	<div id="web_design" class="web_design">
  4.  

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...

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 21 Abril 2014, 18:16 pm
Código
  1. $("#design_menu").show().delay(1000); // not working ???
  2.  

Cambialo por

Código
  1. $("#design_menu").fadeIn();
  2.  
MODIFICO:
En todo caso, tu delay deberia funcionar, creo que el problema es el otro y lo que te planteo despues.

Para mas propiedades respecto a fadeIn
http://api.jquery.com/fadein/

respecto a lo que ocultas, si tienes por ejemplo un div padre y lo tienes oculto y tambien tienes explicitamente oculto el hijo. Entonces, al mostrar el padre, NO SE MOSTRARA EL HIJO, hasta que le pongas display:block explicitamente al igual que el padre, esto se puede hacer con el show, el fadein, etc.
<div id="padre" style="display:none">
<div id="hijo" style="display:none" >
</div>
</div>

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 21 Abril 2014, 18:34 pm
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?

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 21 Abril 2014, 18:41 pm
Cita de: gAb1 en 21 Abril 2014, 18:34 pm
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?

Si bueno, eso tiene solución, habrá que validar de alguna forma, que cuando este en el lado X, vuelva a la posición original, sino, que haga lo que tenga que hacer y moverse a la derecha.

Puedes pegarme el codigo de un click de layer para ver lo que hace.

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 21 Abril 2014, 18:58 pm
Claro, el codigo que hace el click es el que puse antes

Código
  1. $(document).ready(function(){
  2. $("#layer_0").click(function(){
  3. $(this).toggleClass("layer_2");
  4. $("#photo").hide();
  5. $("#layer_1").hide();
  6. $( ".layer_2:first" ).animate({ 'left': 100}, { duration: 1000, step: function( now, fx ){  // animacion
  7. $( ".layer_2:gt(0)" ).css( "left", now );  // animacion
  8. }
  9. });
  10. $("#design_menu").fadeIn();
  11. });
  12. });
  13.  

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

Código
  1. <div id="layer_0" class="layer_0"></div>
  2.  

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 21 Abril 2014, 19:11 pm
Mira la verdad de las cosas, lo que acabo de hacer no esta probado ni nada, asi que no es seguro que funcione, pero es simplemente una idea de como verificar si estas en el primer o segundo click del mismo "boton".

Código
  1.       $(document).ready(function() {
  2.  
  3.             var primerClick = true;
  4.             $("#layer_0").click(function() {
  5.  
  6.                 if (primerClick) {
  7.  
  8.                     $(this).toggleClass("layer_2");
  9.                     $("#photo").hide();
  10.                     $("#layer_1").hide();
  11.                     $(".layer_2:first").animate({'left': 100}, {duration: 1000, step: function(now, fx) {  // animacion
  12.                             $(".layer_2:gt(0)").css("left", now);  // animacion
  13.                             primerClick = false;
  14.                         }
  15.                     });
  16.                     alert('Estoy en el primer click, borralo despues de haberlo testeado');
  17.                     $("#design_menu").fadeIn();
  18.                 } else {
  19.  
  20.                     $(".layer_2:first").animate({'left': -100}, {duration: 1000, step: function(now, fx) {  // animacion
  21.                             $(".layer_2:gt(0)").css("left", now);  // animacion
  22.                             primerClick = true;
  23.                         }
  24.                     });
  25.                     alert('Esto es por debug, borralo despues, estoy en el segundo click?');
  26.                 }
  27.  
  28.  
  29.             }
  30.             });
  31.  
  32.  
  33.  
Me avisas si te sirve  :xD

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 21 Abril 2014, 19:28 pm
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

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 21 Abril 2014, 19:35 pm
Cita de: gAb1 en 21 Abril 2014, 19:28 pm
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

Excelente, nos avisas si es que todo sale bien, igual prueba la validación que hice, seguramente existen soluciones mas decentes  :xD.

Saludos.

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 21 Abril 2014, 20:21 pm
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
  1. $(document).ready(function(){
  2. $("#web_design").click(function(){             // div - imagen - opcion
  3. $("#layout_content").hide();                      // tabla
  4. $("#corporate_image_content").hide();      // tabla
  5. $("#picture_content").hide();                     // tabla
  6. $("#pacakin_content").hide();                    // tabla
  7. $("#digital_printing_content").hide();          // tabla
  8. $("#web_design_content").toggle();            // tabla
  9. });
  10. });
  11.  

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...

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 21 Abril 2014, 20:51 pm
Citar
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...

Porque seguramente el div es un bloque que encierra todo el contenido, y seguramente donde presiones es parte del div y en consecuencia hara el efecto.


Lo que puedes hacer , es hacer que click escuche directamente a la imagen y no al div, pero tu imagen esta por CSS hummm... Dime si se te ocurre algo  :xD

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 21 Abril 2014, 21:14 pm
Hahaha... claro, poner la imagen directamente en html.

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 21 Abril 2014, 21:18 pm
Cita de: gAb1 en 21 Abril 2014, 21:14 pm
Hahaha... claro, poner la imagen directamente en html.
Exactamente... dale un id y en vez de que el div sea tu boton, haz que la imagen sea el boton. Y esa sería la solución.

Título: Re: mover imagenes onclick con jquery
Publicado por: gAb1 en 21 Abril 2014, 21:43 pm
Al final he decidido sacar las tablas del div... xD

Creo que sera mejor que se vaya cerrando ya... el problema principal se resolvió ya el otro día, hehehe

Muchas gracias, cualquier otra duda que me surja abriré otro mensaje.

Título: Re: mover imagenes onclick con jquery
Publicado por: Pablo Videla en 21 Abril 2014, 21:46 pm
Cita de: gAb1 en 21 Abril 2014, 21:43 pm
Al final he decidido sacar las tablas del div... xD

Creo que sera mejor que se vaya cerrando ya... el problema principal se resolvió ya el otro día, hehehe

Muchas gracias, cualquier otra duda que me surja abriré otro mensaje.
Ok, cuando quieras, saludos!.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines