A veces me gusta darme una vuelta por la sección de plugins de jQuery.com y ver qué hay de nuevo. Muchas veces encuentro plugins que valdría la pena compartir pero que no tienen descripción ni información como para escribir un post entero y, para no terminar en post de 2 parrafitos, esta vez recopilo 6 miniposts en uno.

La minicolección de 6 plugins que dejo a continuación están bien, unos mejor que otros, unos mucho más funcionales que otros pero el que se lleva el premio es el de la marquesina, que, seguramente, alguna web todavía tendrá de estos odiosos textos caminando :)

Al grano...
Ahí va mi pequeña recopilación, dejando título, para qué sirve, enlace a la web y enlace a la demo si lo hubiera.

ver más >

Ya comenté varias veces distintos plugins para personalizar las barras de scroll de tu navegador, div o elemento mediante jQuery. Lo que traigo es otro más, que se suma a la gran lista de plugins para scrollbars y Jquery que encontré aquí.

Perfect Scrollbar es muy pequeño pero potente plugin para personalizar nuestras barras de desplazamientos y pequeño, en todo sentido, ya que cuenta con un CSS de 4 líneas en la versión min y el .js sin comprimir no supera los 8 kb.

Es totalmente personalizable mediante CSS y contiene varias opciones que, acompañado del plugin jQuery Mousewheel nos dará scroll utilizando la rueda del ratón.

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 >

jQuery NiceScroll es un plugin, tal como indica su nombre, que mejora las barras de desplazamiento tanto en ordenadores de sobremesa, portátiles y también en dispositivos móviles. Resumiendo, y si miras la imagen más arriba, verás que es un scroll similar al de Facebook.

Realmente, por lo que vi en su web, es lo más fácil que existe para poner a funcionar... sólo basta con indicarle qué elemento (body, div, etc...) tendrá el scroll, configurar por css su aspecto y todo finalizado.

Características:

ver más >

Este pequeño trozo de código en jQuery sirve para calcular la distancia entre el cursor del ratón y el centro de un elemento que debemos definir dentro de nuestro código.

Puede ser muy útil para activar cierta función cuando el ratón está en determinada posición o a cierta distancia de algún elemento de nuestra web.

El código está extraído de CSS TRICKS y pertenece a Chris Coyer

ver más >

Vía el blog (interesantísimo por cierto) de David Walsh, nos deja 3 post donde nos explica con 2 líneas de código como detectar si tu visitante está utilizando el sistema operativo Android, un iPad o un iPhone/iPod.

Los artículos completos están en:

• Detección de Android por David Walsh
• Detección de iPad por David Walsh
• Detección de iPhone/iPod por David Walsh

A continuación los códigos, pero no olvides que visitar el post original de cada caso por si se me escapó algo.

ver más >

Si lo que quieres es personalizar las barras de scroll de tu navegador o usar capas o elementos con scrollbars y que no sean las simples barras que incluyen los navegadores, Tiny Scrollbar es tu opción. Permite personalizar las barras de desplazamiento de los elementos de tu web con un script de tan solo 2.29 kb.

Tiny Scrollbar puede utilizarse para aplicar barras de desplazamiento a tu contenido. Fue construido usando la biblioteca jQuery. Es una herramienta dinámica, ligera que da a los diseñadores web una forma eficaz de mejorar una interfaz de usuario web.

Características:

ver más >

Descubro este nuevo plugin muy interesante para utilizar bordes redondeados en imágenes sin tener que preparar las imágenes con antelación.

Para navegadores modernos (entiéndase Firefox, Opera, Chrome, Safari, Explorer 9...) utiliza CSS3 y para Explorer 8 y anteriores, utiliza VML, por lo que el resultado está garantizado.

Su uso es muy fácil y entre sus principales características tenemos:

ver más >

Encontré el otro día en CSS-TRICKS un excelente ejemplo de como hacer que una barra lateral o menú o submenú (o lo que quieras) acompañe siempre con movimiento vertical al contenido central de la web.

Realmente es muy útil, por ejemplo, para grandes cantidades de texto en las que quieres mostrar unos enlaces internos a determinadas partes de ese texto o subsecciones o lo que quieras.

Es más difícil de explicar que de hacer y ver, por lo que me apropié de la demo de CSS TRICKS y la pasé a español dejando solo la opción que me interesa que es la de la barra lateral acompañe al texto central.

ver más >

Hoy, ante la necesidad de manejar muchas opciones para ordenar una tabla con varios registros, buscaba la mejor forma de hacerlo sin tener que recargar la página ya que los resultados mostrados, dependían de muchas opciones y provenían desde 5 buscadores distintos.

Entonces, googleando, me encontré con esta fabulosa solución que nos ofrece su creador.

Se trata de TinyTable, un script de tan sólo 2.5 kb que, mediante personalización CSS, te da todas las opciones necesarias, como paginación, botones de anterior/siguiente, cambiar resultados por página, mostrar número total de páginas y... hasta personalizar y marcar la columna según el índice de ordenación.

ver más >