A menudo nos encontramos con la necesidad de realizar listas o selects dependientes del valor seleccionado en un nivel superior. Lo que comúnmente llamamos combobos o selects dependientes, que al seleccionar una opción de una lista, vamos actualizando las listas de niveles inferiores o, mejor dicho, dependientes del anterior.

Traduciendo, tenemos 3 listas (las llamaremos SELECT PADRE, SELECT HIJO y SELECT NIETO), pues bien, lo que queremos es que PADRE actualice a HIJO y éste a su vez, actualice a NIETO... pero cuidado, que también queremos que si se cambia alguno de estos valores, tanto PADRE, HIJO y NIETO se actualicen sobre la marcha.

Sé que es un poco confuso de explicar, más fácil es mirarse la demo que puse online y decir, siiii esto es lo que necesitaba pero este tío se explica fatal :)

ver más >

Otro nuevo plugin, Gips, para mostrar tooltips en nuestros elementos de la web con pocas líneas de código y 100% personalizables. Como siempre, necesitaremos jQuery, un poco de CSS y nuestra imaginación para combinar los estilos y efectos de nuestros globitos de ayuda.

El plugin nos permite configurar el estilo, tiempo que está visible, si se oculta automáticamente o no, la posición, el botón de cierre y todas las opciones que nos hacen falta.

Hay una demo totalmente funcional en este enlace y la descarga en este otro.

ver más >

Este plugin se encarga de verificar la fortaleza de la contraseña ingresada a la vez que valida que se ingrese dos veces la misma clave, mientras presenta de modo gráfico el nivel de seguridad de la cadena ingresada.

Resumiendo, te dice si tu clave es fácil de adivinar o difícil según la combinación de caracteres que contenga. Para mayor nivel de seguridad, combinar símbolos, letras -ya sean minúsculas o mayúsculas- y números.

Su implementación es muy sencilla, simplemente se crean los 2 campos de tipo password, unas pocas líneas de javascript y un poco de CSS para personalizar su presentación y listo.

ver más >

Lo que traigo en esta ocasión es un plugin de jQuery que se encargará de hacerte facil la tarea de insertar y manipular mapas de Google Maps en tu web.

Si la API v3 de Google Maps ya es bastante más sencilla de utilizar que su versión anterior, este plugin realmente simplifica la tarea de utilizar los mapas y adaptarlos a nuestras necesidades.

Con muy pocas líneas de código podemos insertar mapas, definirle los parámetros, insertar marcadores, polígonos, definir el zoom, eventos, mapas estáticos y muchas opciones más.

ver más >

jQuery Text box hint es un plugin que se ocupará de mostrar y esconder contenido automáticamente en los campos de nuestro formulario de contacto.

Muchas veces habrás visto que al rellenar un formulario (creo que Twitter lo tiene), ya te aparece escrito algún texto en los campos de tipo input o textarea y al hacer click sobre ellos ese contenido desaparece automáticamente, volviendo a aparecer si haces un click fuera de dicho campo.

Pues bien, aunque este plugin es un poco antiguo, a día de hoy lo utilizo mucho en mis proyectos porque es una ayuda al usuario, para decirle en un lugar no intrusivo qué queremos que escriba en cada campo de nuestro formulario.

ver más >

En esto del desarrollo web como en la vida, siempre toca evolucionar. Y evolucionar, en términos de informática, quiere decir incorporar nuevas prácticas, nuevos conocimientos y técnicas para optimizar el flujo de trabajo, consiguiendo un producto final de mejor calidad en el menor tiempo posible.

Esta vez, le ha tocado el turno al Responsive Web Design, o diseño web responsivo... o, en cristiano, el diseño web que se adapta a todos los dispositivos, según tamaño de pantalla u orientación, sin tener distintas versiones de tu web... Qué quiere decir ésto? Que partiendo de la base de un sólo código, es decir una única página web, mediante algunos .JS y muchas líneas de CSS, obtendrás la versión adecuada para el tamaño de la pantalla de tu visitante.

Qué ganamos con ésto...
Pues que tu página web se vea correctamente, al tamaño adecuado, sin hacer zoom, sin tener desplazamiento horizontal y sin fastidiar al usuario, dándole los contenidos que viene a ver en un tamaño acorde al aparatito que está usando.

ver más >

Esto es magia en estado puro. Me lo encontré buscando como agregar eventos al jQuery UI datePicker para que, en lugar de seleccionar la fecha indicada, muestre una alerta o siga un vínculo desde cada día del calendario.

Encontré este código que voy a copiar y pegar tal cual... antes que me muerdan, el código no es mío, pero lo que hace, básicamente, es crear un array con los eventos a mostrar y luego capturar el evento de seleccionar la fecha.

No lo he probado aún para saber qué pasa si quisiera seleccionar la misma fecha en la que hay un evento. Entiendo que debería funcionar de todos modos, pero, repito, no lo he probado.

ver más >

Este plugin o widget como lo llama su autor, se encarga de ponerle un aspecto muy pero muy (y no exagero) a los select multiple de html. Básicamente lo que hace es convertir la lista desplegable en un conjunto de checkboxes con opciones de seleccionar todos a la vez o ir seleccionando uno a uno con un simple click y sin necesidad de utilizar la tecla CTRL en Windows o OPTION (creo) en Mac.

Lo descubrí gracias a mi compañero Antonio -que no tiene ni twitter, ni web ni facebook- y de casualidad -en realidad por estar mirándole el source de una web que está desarrollando- y creí necesario compartirlo en mi web.

Tienes unas demostraciones online para ver de lo que hablo y su descarga también lo tienes en ese enlace.

ver más >

Lo que traigo a continuación es una colección de plugins para nuestra ya archiconocida librería jQuery que me he encontrado dando un paseo por la vieja web de plugins de jQuery.

Si bien la web está semicerrada por rediseño, los usuarios no dejan de publicar sus nuevos desarrollos y hoy, justamente, me encontré un usuario que ha publicado 9 plugins que no están nada nada mal. En realidad fueron 10 plugins, pero uno no me convenció, así que me quedé con los 9 elegidos.

jQuery uLightBox
Un plugin para crear las ya conocidas ventanas del tipo lightbox. Muy fácil de usar y muy personalizable. Cuenta con muchas opciones, ya sea ventanas del tipo modales, ventanas que pueden ser arrastradas, con fondo, sin fondo, etc...

ver más >

Este pequeñísimo código hará que todas las filas de una tabla alternen su color de fondo automáticamente utilizando la librería jQuery, sin declarar clases ni ningún código en especial.

Hay muchísimas formas de hacer ésto, una es con PHP como nos enseña Webintenta, pero creo que, hoy día, el 99% de los desarrolladores web están utilizando jQuery, Mootools o cualquier otro framework en javascript para sus proyectos. Por esta razón, veo más que útil aplicar una nueva opción visual a tus trabajos con 1 línea de código.

Básicamente, tenemos 2 formas de alternar el color de fondo de nuestras filas con jQuery (seguramente existan más formas), pero me voy a parar en estas 2. La primera, es aplicando una clase a las filas pares o impares y la segunda, es aplicando directamente el color de fondo.

ver más >