hide() y show() en jQuery

tOWERR #1 Feb '13

Hola amigos, mi problema es el siguiente:
Tengo estos 2 botones:

<div class="ui-grid-a" data-theme="a" >
            <div class="ui-block-a" data-theme="a" id="btn_before" >
                <g:link absolute="true" controller="formResponse" action="pendingFormsMobile"
                params="[ 'max': maximo, 'offset': (fuera-maximo) ]" data-role="button" data-theme="b" data-ajax="false" >< Pág. anterior</g:link>
            </div>
            <div class="ui-block-b" data-theme="a" id="btn_next" >
                <g:link absolute="true" controller="formResponse" action="pendingFormsMobile"
                params="[ 'max': maximo, 'offset': (fuera+maximo) ]" data-role="button" data-theme="b" data-ajax="false" >Pág. siguiente ></g:link>
            </div>
        </div>

Y cuando carga la página juego con los valores fuera y el size() de una variable que se llama instance. Mi problema es el siguiente. Cuando oculto el primer botón el 2º se queda visible pero se viene a la posición del 1º boton. ¿Como puedo hacer para que cada uno respete su posición cuando esten ocultos?

Merkury #2 Feb '13

¿Como ocultas el botón?

¿ Están los dos botones en un mismo container?

Baltar #3 Feb '13

Dentro de la clase (CSS) de cada botón yo utilizaría el atributo position : absolute, que te permite colocar usando left,right, top y bottom el elemento relativo al padre (en tu caso, el div que contiene a ambos elementos) Si no pudieras tocar esas clases, hazlo inline mediante un style="..."

¡Suerte!

bLaKnI #4 Feb '13 Inocente

#1 En vez de trabajar con hide() o show(), que en los respectivos CSS se aplica como display:none; y display:block;, respectivamente, trabaja con opacity.

Entonces, donde tenias:

$("..." ).hide();

usa

$("..." ).css("opacity", 0);

Y el show(), sustituyelo por un $("..." ).css("opacity", 1);

Y para hacerlo redondo:

CSS:

#elemento{
...
opacity: 1;
}
#elemento.hidden{
opacity: 0;
}

Entonces via jQuery, lo que haces es un addClass('hidden' ), donde hacias hide(), y un removeClass('hide' ), donde hacias show(). En eso tambien puedes añadir transitions al #elemento. De ese modo, si se la añades a "all" o a "opacity" directamente, podras hacer ese efecto de fadeIn() o fadeOut() característico. Eso si, es CSS3. Entonces asegurate de tener por ahí un Modernizr.

Por ejemplo.

La otra es maquetar correctamente, y asegurarte de que los botones estan dentro de un espacio el cual es invariable.

1 respuesta

Merkury #5 Feb '13

#4 Utilizar los opacity es una chapuza, porque el botón se siguen quedando ahi y puedes darle.

Lo que tendrás que mirar #1 es mirar la posición porque si estan contenidos en el mismo div padre al ocultarlos, el propio DOM te recoloca el que te queda.

#6 Lo que tiene que hacer es un display none o un display block eso esta bien pero para mantener las posiciones de forma separada, tendrá que darles un padre diferente.

#6 Grandioso el preventDefault XD (a mi me gusta mucho usarlo para ir anidando efectos XD)

2 respuestas

bLaKnI #6 Feb '13 Inocente

#5 Si, cierto...
Entonces que maquete como es debido, coño!

O que agrande la chapuza, haciendo un e.preventDefault()... jajajaja!

edit: exácto.

1 respuesta

JuShTo #7 Feb '13

#5 Vamos que le meta un padre diferente a cada uno y que le aplique el efecto a los hijos para que mantenga la posición al ocultarse y c'est fini.

1 respuesta

Merkury #8 Feb '13

#7 Y si están alineados, alínealos XD

P.D ¿Con que mierda programas para generar ese código HTML tan feo?

1 respuesta

bLaKnI #9 Feb '13 Inocente

#8 Eso va a ser un Google Apps como una casa...

Usuarios habituales