Programando o Intentándolo

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.


[crayon-578341e835962008332941/]

(adsbygoogle = window.adsbygoogle || ).push({}); Controlar cuando se selecciona/deselecciona un checkbox

El evento que se debe comprobar para poder controlar cuando ...

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

2 Abr 2013

Como saber si un número es decimal o entero en JavaScript

Hay varias formas para comprobar si un numero es decimal o no pero quizás la más sencilla sea comprobando que el resto de la división del numero a analizar entre 1 sea igual a 0 lo que indicaría que es un numero entero y si el resultado es distinto de 0 el numero será decimal.

[crayon-578341e8387de570020572/]

No estaría de más comprobar que ciertamente es un número con isNaN(numero) que devuelve false en caso de que sea un número y true en el caso en el que no se un numero.

[crayon-578341e8387ea027580587/]

Otra opción es usar Math.floor() para obtener la parte entera del numero y restársela al numero y si es 0 pues entonces el número es entero y sino pues obviamente no.

[crayon-578341e8387f1087302343/]

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

20 Feb 2013

Arrastrar y soltar en HTML5 (Drag & Drop HTML5)

Esta es una de las nuevas características añadidas en HTML5, aunque ya se podía hacer drag and drop mediante otras técnicas, ahora al estar incluido en HTML5 hace que “supuestamente” funcione en todos los navegadores aunque si no cumplen los estándares como es el caso de Internet Explorer te encontraras en que en principio no funciona.

Para explicar estas nuevas funcionalidades me voy a servir de 2 ejemplos sencillos. En el primero veremos como arrastrar y soltar elementos, clonarlos o eliminarlos, y en el segundo un sencillo puzzle de 4 piezas.

Para que se pueda arrastrar y soltar un elemento hacen falta dos tipos de elementos, un elemento arrastrable (que se consigue añadiéndole al menos los atributos draggable=”true” y ondragstart=”la_funcion_que_sea(event)”) y un elemento en el que se pueda soltar a el que como mi mínimo hay que poner ondragover=”return la_funcion_que_sea(event)” y ondrop=”return la_funcion_que_sea(event)”.

Ejemplo 1 de arrastrar y soltar con ...