ProgramandooIntentándolo

4 Dic 2017

Cómo comprobar si un elemento está visible con jQuery

Comprobar si un elemento esta visible con Jquery

Es habitual querer comprobar si un elemento concreto se está mostrando o no para ejecutar una acción u otra, y como no podía ser de otra forma jQuery nos permite comprobar si un elemento se está mostrando o no con la función .is(':visible') o .is(':hidden') para hacer la comprobación al reves.

Hasta aquí todo es muy bonito pero ¿qué es lo que comprueba esta función en realidad? pues simplemente comprueba el valore de la propiedad display, si es none (#elemento {display: none;}) entonces el elemento no está visible y en cualquier otro caso sí lo está.

// Si elemento esta visible lo oculta y si no lo muestra if ($('#elemento').is(':visible')) { $('#elemento').hide(); } else { $('#elemento').show(); } // Si el elemento2 esta oculto lo indica por consola y si no ejecuta una funcion if ($('#elemento2').is(':hidden')) ...
19 Jun 2017

Control de eventos con jQuery para elementos HTML generados dinámicamente

Cuando el contenido de la página es estático es muy sencillo capturar los eventos con jQuery, ya sea por su id, por clase o de cualquier otra forma que podamos identificar los elementos para los que se quieren añadir eventos pero cuando se crea un nuevo elemento dinámicamente llega el “problema” porque los handlers (controladores, manejadores o como los quieras llamar) de jQuery solo capturan los eventos de los elementos que se crearon antes de que se crease el handler y por este motivo se suelen declarar en el $(document).ready() justo después de que este cargado todo el contenido de la página.

// Handlers para elementos creados antes de la declaracion $('.botonA').click(function(){ alert("Hola"); }); $('.botonB').on('click', function(){ alert("Hola"); }); Desasociar y volver a asociar los eventos

La primera idea para solucionarlo puede ser crear un nuevo handler cada vez que se crea el nuevo elemento pero la vamos a descartar porque ...

25 Mar 2016

Comprobar checkbox seleccionados con jQuery

Para comprobar si un checkbox esta seleccionado hay que comprobar la propiedad/atributo checked del <input type="checkbox"/>, y esto se puede hacer o bien comprobando el valor de la propiedad o atributo con .prop() o .attr() para versiones antiguas de jQuery o con la función .is(selector).

Comprobar si un checkbox esta seleccionado

Con .prop() y .attr() se puede recuperar el valor de una propiedad de un elemento, por lo tanto simplemente necesitamos comprobar el valor de la propiedad checked (true => seleccionado / false => deseleccionado).

Otra opción es usar la función .is(selector) que comprueba si un elemento “encaja” con el selector indicado, (ej. $('input[type=checkbox]').is('input') => true y $('input[type=checkbox]').is('li') => false), usando el pseudo clase :checked se puede hacer la comprobación de si esta seleccionado o no.

// Comprobacion usando .prop() (jQuery > 1.6) if ($('#dia1').prop('checked') ) { console.log("Checkbox seleccionado"); } // Comprobacion usando .attr() (jQuery < 1.6) if ($('#dia1').attr('checked') ) ...
29 Sep 2013

Como hacer un Slideshow con jQuery

Un Slideshow es una presentación de imágenes que se van mostrando siguiendo una secuencia y el cambio de una imagen a la siguiente normalmente va acompañado de algún tipo de animación y también puede tener música.

Aquí vamos a ver como crear slideshows en unas pocas líneas de código usando solo jQuery para hacer las animaciones porque usando javaScript podemos cambiar la animación el numero de imágenes, el tamaño, etc. de una forma realmente sencilla y rápida. También se puede hacer un slideshow con CSS3 y así evitar el uso de jQuery pero sería más trabajoso por lo que descartamos esta opción para esta ocasión.

Vamos con unos ejemplos para ver como hacer un slideshow con jQuery sin tener que usar plugins ni ninguna otra cosa que un poco de HTML, una sencilla hoja de estilo y unas pocas líneas de jQuery.

Estructura del slideshow

El slideshow va a tener ...

15 Mar 2013

Crear Tooltip usando javaScript

En el post anterior puse un ejemplo de como crear tooltips personalizados usando únicamente CSS para los que no saben javaScript o no lo quieren usar. En esta ocasión os comparto el código necesario para que lo puedas usar si te gusta y las explicaciones de que es lo que he hecho.

Como comentaba en el post anterior en HTML se pueden crear tooltips usando el atributo title, aunque no se puede personalizar su estilo y solo pueden tener texto plano.

Para crear el tooltip de esta forma es necesaria una función javaScript, un CSS y un elemento de HTML que llame a la función.

El CSS pues puede ser como quieras, lo único obligatorio es que el posicionamiento sea absoluto, para que se muestre por encima del resto de la página y no descoloque todo. El z-index lo he dejado de la versión con solo ...