BetaRedes

19-04-2012 03:38 PM

Hola... bueno, tengo la siguiente duda:

Actualmente tengo un panel que muestra y se oculta en el top de la pagina, dentro de este panel tengo el formulario de login. Todo con jQuery.

Los invitados no pueden ver los enlaces en los mensajes. Registrate en el foro: aquí para ver los enlaces. pueden ver el panel.

Bueno, la pregunta es la siguiente... se puede hacer que el panel salga al pasarle el puntero por encima y una vez se quite el puntero se oculte.
PERO si el usuario ingresa un caracter o coloque el cursor del teclado en alguno de los dos campos (correo/contraseña) el panel NO se oculte al quitar el puntero del panel. Osea, que quede "manual" y para ocultarlo, dar click en el boton cerrar panel.

Es eso posible?

El codigo que tengo ahorita:

Código PHP:

var jq=jQuery.noConflict();

jq(document).ready(function() {
    
    // Expand Panel
    jq("#open").mouseover(function(){
        jq("div#panel").slideDown("slow");
        
    });    
    
    // Collapse Panel
    jq("#close").click(function(){
        jq("div#panel").slideUp("slow");    
    });        
    
    // Switch buttons from "Log In | Register" to "Close Panel" on click
    jq("#toggle a").hover(function () {
        jq("#toggle a").toggle();
    });        
        
}); 

**aquí** · 19-04-2012 04:23 PM

creo que con focus y una variable podrías hacerlo

Los invitados no pueden ver los enlaces en los mensajes. Registrate en el foro: aquí para ver los enlaces.

**aquí** · 19-04-2012 05:17 PM

Eso lo podrías hacer con un not y ademas is(':focus) para evitar que se cierre la ventana. Ejemplo:

Código:

$("input").focus();

   $("div#panel").mouseover(function(){

        $(this).slideDown("slow");

    }, function(){

          if(!$(this).children('input').is(":focus")) $(this).slideUp("slow");     

    });

Realice un focus para comprobar que funcionara, a modo de ejemplo.

Si quieres puedes comprobar que ningún hijo del formulario tiene un valor asignado (.val()) para evitar que se cierre.
Saludos!

19-04-2012 05:48 PM

Gracias chicos!

... ensaye el focus y a modo de ejemplo, logre que cada vez que diera en una caja de texto cambiara el boton abrir/cerrar con toogle, Pero no logre que funcionara con el cierre de panel.

Y tu codigo, Javier... lo coloque en un lado y en otro, pero no se como implementarlo Sonrojado

**aquí** · 19-04-2012 06:02 PM

Y podrías probar solo con clicks o te lo pidieron con hover?.

Por ejemplo al hacer click en iniciar sesión, se despliega el panel, si el usuario clickea cerrar panel, se cierra nuevamente y a mi parecer tiene mayor usabilidad.

Si lo deseas al hacer hover.

Debes hacer los if correspondientes dentro del evento para saber que ningún elemento hijo del formulario tiene el foco.

19-04-2012 06:07 PM

Bueno, lo que quieren es:

Al hacer hover en "Iniciar sesión" se despliega, al retirar el puntero del panel se cierra.
Pero si el usuario da focus en correo/contraseña, el panel no se oculta al quitar el puntero del panel... es decir si quieren cerrarlo hay que dar click en "Cerrar panel".

Eso es posible?

**aquí** · 19-04-2012 06:13 PM

Ah si con el código que te mande deberías complementarlo un poco:

Código:

$("div#panel").mouseleave(function(){

       if(!$(this).children('input').is(":focus")) $(this).slideUp("slow");     

});

Con eso debería funcionarte.

19-04-2012 06:34 PM

No, no lo logro hacer funcionar... Confundido

La verdad no entiendo que sobra, que le falta o en que parte del codigo que yo tengo, colocar esas dos partes que me envias... ya lo ensaye por donde se me ocurre y nada... Confundido

Código PHP:

$(document).ready(function() {
    // Expande el Panel
    $("#open").mouseover(function(){
        $("div#panel").slideDown("slow");
    });    
    // Cierra el Panel
    $("#close").click(function(){
        $("div#panel").slideUp("slow");    
    });        
    // Cambia los botones Iniciar sesion/Cerrar panel
    $("#toggle a").hover(function () {
        $("#toggle a").toggle();
    });        
    // Lo que me enviaste
    $("input").focus();
       $("div#panel").mouseover(function(){
        $(this).slideDown("slow");
    }, function(){
          if(!$(this).children('input').is(":focus")) $(this).slideUp("slow");    
    });
       $("div#panel").mouseleave(function(){
          if(!$(this).children('input').is(":focus")) $(this).slideUp("slow");    
    });
}); 

Que pena molestar tanto... Sonrojado

**aquí** · 19-04-2012 09:26 PM

Remueve esto:

Código:

// Lo que me enviaste

    $("input").focus();

       $("div#panel").mouseover(function(){

        $(this).slideDown("slow");

    }, function(){

          if(!$(this).children('input').is(":focus")) $(this).slideUp("slow");    

    });

Y deja solo el mouseleave

20-04-2012 10:53 AM

Gracias!

Pero no, no funciona... doy click en los input del formulario, quito el puntero y se oculta.

naaa... ya me dio dolor de cabeza esto (?)
Hable con mi jefe y le dije que no se podia, que por usabilidad no era conveniente y blablabla (?)

Pero entonces no quería que eso quedara manual... entonces llegamos al acuerdo de dejar todo con hover (como se ve actualmente).

De todas formas gracias Javier Sonrisa

El codigo:

Código:

$(document).ready(function() {

// Expand Panel

$("ul.login").mouseenter(function(){

// if statement prevents trigger on panel mouseout

if($('#panel').css('display')=='none') {

$("div#panel").slideDown("slow");

}

});

$('#panel').mouseleave(function(){

$("div#panel").slideUp("slow");

})

});

Es esto posible? - SlidePanel Jquery
Autor	Mensaje

BetaRedes

Diseño, Web e Informática