Error con efecto fade

[mariomon17]

Tengo un div contenedor de otros divs. He creado un script en JQuery para que al pulsar en uno de los div's interiores ocurra lo siguiente.

1.- Se carga en un div (display:none) una pagina.
2.- Se pone a semitransparente con un fadeTo el div fila (contenedor de los otros).
3.- Se muestra el div donde se ha cargado la pagina.
4.- Si se hace click fuera, el proceso se invierte. Todo queda disponible para volver a funcionar.

El error: cuando pasa esto por segunda vez todo va bien excepto que el dic que se pone semitransparente se vuelve a poner bien antes de hacer click.

Código Javascript:

function produ(id) {
    $(document).ready(function(){
        $(".fila").fadeTo("slow",0.5, function () {
            $(".produ").load('producto.php?id='+id,function(){
               $(".produ").fadeIn("slow", function() {
                  $(".cuerpo").click(function(){ 
                     $(".produ").fadeOut("slow");
                     $(".fila").fadeTo("slow",1);
                  });
               });
            }); 
          });
        });
};
 

Código HTML:

<div class="cuerpo">
   <div class="box" onclick="produ(345)">
   </div>
   <div class="box" onclick="produ(346)">
   </div>
</div
 

Espero haberme explicado bien
Un saludo.

[masterpuppet]

Que tal mariomon17,

falta markup ahi, donde esta fila y produ ?, igual te comento que estas utilizando jQuery a medias, a ver, deberías organizarlo un poco, la función produ va fuera del ready y el evento click asignalo a través de jQuery, algo así para empezar:

Código Javascript:

function produ(e) {
    e.preventDefault();
    var id = $(this).attr('id').replace('item-', '');
    $(".fila").fadeTo("slow",0.5, function () {
        $(".produ").load('producto.php?id='+id,function(){
           $(".produ").fadeIn("slow", function() {
              $(".cuerpo").click(function(){
                 $(".produ").fadeOut("slow");
                 $(".fila").fadeTo("slow",1);
              });
           });
        });
    });
}
 
$(document).ready(function(){
   $('.box').click(produ);
});
 

y ajusta el html, así:

Código HTML:

<div class="cuerpo">
   <div class="box" id="item-345">
   </div>
   <div class="box" id="item-345">
   </div>
</div>
 

hace estos ajustes y postea el resto del markup, tanto $ anidado en elementos que están relacionados no esta bien.

Saludos.

[caricatos]

Tema movido desde javascript

[mariomon17]

Quise hacer un esquema y me olvide de ciertos divs.

Seria asi:

Código HTML:

<div class="produ" style="display:none">
</div>
 
<div class="cuerpo">
  <div class="fila">
      <div class="box" id="345">
      </div>
      <div class="box" id="346">
      </div>
  </div>
</div
 

Muchas gracias, soy novato en JQuery y eso fue la unica forma que se me ocurrio.
Voy a probarlo y te cuento como va.

Un saludo

[mariomon17]

Ya lo probe y me funciono perfectamente. Ahora voy a implementarle efectos propios del nucleo UI, a ver que tal...

El codigo final, lo dejo por aqui:

Código Javascript:

$(document).ready(function(){
   $('.box').click(produ);
});
 
function produ(e) {
        e.preventDefault();
        var id = $(this).attr("id");
 
        $("body").addClass("loading");
 
        $(".produ").load('producto.php?id='+id,function(){
            $(".fila").fadeTo("slow",0.5, function () {
               $(".produ").fadeIn("slow");
                           
                           $("body").removeClass("loading");
 
            })
        })
            
        $(".cuerpo").click(function(){ 
            $(".produ").fadeOut("slow");
            $(".fila").fadeTo("slow",1);
        });
};
 

Pero me quedo con tres dudas:
1.- Para que se utiliza el e.preventDefault() en este caso en concreto y que ocurriria si no lo pongo dentro de $ document.ready.
3.- Cual seria el mejor metodo para, por ejemplo, cambiar el cursor del raton mientras el load carga el documento en el div. El metodo que he puesto en el codigo no funciona bien pero creo que eso es mas cuestion de CSS...

Gracias, un saludo

[masterpuppet]

1 - En este caso preventDefault no hace nada, fue mas costumbre que otra cosa, pero es para prevenir la propagación del evento, en un link por ejemplo si no haces un preventDefault se recarga la pagina.

2 - te dejo el enlace a ready http://api.jquery.com/ready/, pero la idea es poder ejecutar el js lo mas rápido posible, cuando el DOM este listo, a diferencia de load no espera por la carga de imágenes.

3 - lo que se suele hacer es agregar el loader a la capa de destino, produ en tu caso.

Saludos.

[mariomon17]

Gracias por las aclaraciones. El nuevo codigo (con efectos de JQUERY UI)es este:

Código Javascript:

$(document).ready(function(){
   $('.box').click(produ);
});
 
function produ(e) {
    e.preventDefault();
        var id = $(this).attr("id");
        $(".produ").load('../productos/producto.php?id='+id+' #pro',function(){
                $(".fila").fadeTo("slow",0);
                $(".produ").show("scale","","slow", function(){ 
                    $(".cuerpo").click(function(){ 
                        $(".produ").hide("scale","","slow");
                        $(".fila").show("drop","","slow");
                    });
                });
        })      
    
};
 

Pero no funciona :S ocurre lo siguiente:
Hago click en .box y entra .produ y sale .fila.
Si hago click en .cuerpo .produ se va y .fila vuelve pero al instante desaparece.
Si pulsas en document aparece de repente .produ que se va con el efecto, y .fila entra otra vez con el efecto pero desaparece de repente. Asi infinitamente :S

Un saludo y gracias

[mariomon17]

Código Javascript:

$(document).ready(function () {
    $(".box").click(mostrar);   
})
 
function mostrar(e) {
    var id = $(this).attr("id");
    $(".productos").fadeTo("slow",0.5);
    $(".produ").show("scale","","slow");
    $(".produ").addClass("loading");
    $(".produ").load('../productos/producto.php?id='+id+' #pro',function(){
        $(".produ").removeClass("loading"); 
        $(document).click(ocultar)
    } );
}
 
 
 
 
function ocultar(e) {
    var a = $(".produ").css("display");
    if(a != "none") {
        $(".produ").hide("scale","","slow");
        $(".productos").fadeTo("slow",1);
    }
}
 

El codigo lo he dejado en esto... va mejor y mucho mas rapido pero sigue con el problema de que la funcion "se queda abierta".

Entonces cada vez que pulso document se ejecuta el ocultar de ahora y el de todas las veces anteriores xD

Como habria que hacer para que solo se pudiese ejecutar una vez, o algo para "cerrar", "salir" de la funcion?

Gracias

[mariomon17]

Ya descubri la solucion, se trata de la funcion .one() que hace que la funcion (valga la redundancia) solo se ejecute one vez.

La sintaxis podeis encontrarla en el manual de JQuery.

Al final el codigo quedo asi:

Código Javascript:

$(document).ready(function () {
    $(".box").click(mostrar);   
})
 
function mostrar(e) {
    var id = $(this).attr("id");
    $(".productos").fadeTo("slow",0.5);
    $(".produ").show("scale","","slow");
    $(".produ").addClass("loading");
    $(".produ").load('../productos/producto.php?id='+id+' #pro',function(){
        $(".produ").removeClass("loading"); 
        $(document).one("click", ocultar)
    } );
}
 
 
 
 
function ocultar(e) {
    var a = $(".produ").css("display");
    if(a != "none") {
        $(".produ").hide("scale","","slow");
        $(".productos").fadeTo("slow",1);
    }
}
 

Un saludo