Similar Posts
Detectar cambio de tamaño de letra en Javascript
La verdad es que lo sencillo es lo mejor, y para cuando estés en la necesidad de detectar si se produce un cambio en el tamaño de la letra, nada mejor que el script que nos ofrece la gente de A List Apart.
Te puedes preguntar por qué vas a querer detectar el cambio de tipo de letra. Si te interesa tener un sitio accesible a gente con discapacidades, pues es buena idea que pienses en ello, ya que suele ser algo que pueden hacer con frecuencia.
Además de detectar ese cambio, puede ser necesario realizar alguna acción. Por ejemplo, si usamos una imagen para un botón, si cambiamos el tamaño de la letra, la imagen no cambia, por lo que el botón quedará demasiado pequeño para el resto del texto, ¿solución?, si hay cambio de tamaño de letra, sustituimos la imagen por un elemento input botón.
Al principio decÃa que la solución es sencilla, lo cual la hace aún mejor. Se trata de crear una capa que contenga un espacio dentro y que esté oculta. Se guarda el tamaño de la capa y cada cierto tiempo se detecta si ha habido un cambio en este tamaño, si es asÃ, se ha producido un cambio en el tamaño de la letra.
Text-Resize Detection
Demo
Código y ejemplos
Crear una nube de etiquetas con jQuery
Aunque las nubes de etiquetas ya no están tan de moda como hace un tiempo, el tutorial donde explican cómo hacer un tagscloud mediante jQuery merece la pena, ya que se trata de una explicación detallada.
No solo se centra en jQuery, sino en la parte PHP que devuelve los datos en JSON y en los estilos CSS para mostrar las etiquetas según su relevancia.
Realmente la parte jQuery solo cambia el tamaño de la letra según la frecuencia de la etiqueta.
Building a jQuery-Powered Tag-Cloud
Consejos para jQuery
Últimamente hablo mucho de jQuery, y no es para menos, ya que este framework de Javascript es muy bueno y la gente realiza grandes plugins que nos ayudan en nuestros desarrollos. En este caso se trata de varios consejos que nos serán muy útiles a la hora de desarrollar:
- Carga la librería desde Google Code
- Almacena en variables los selectors que vayas a usar en varias ocasiones
- Evita la manipulación DOM lo máximo que puedas, es mejor realizar una llamada “gorda” que varias pequeñas
- Usa preferiblemente IDs en vez de nombres de clase cuando realices búsquedas
- Realiza la captura de eventos correctamente, muchas capturas suele ser ineficiente
- Usa los nombres de clase para guardar el estado de un objeto
- Incluso mejor que el anterior, usa el método data() para guardar datos en un objeto
- Aprende a crear tus propios selectores
- Usa noConflict() para renombrar el objeto jQuery y no tener problemas con otras librerías
- Aprende a controlar cuando se cargan las imágenes
- Usa .lenght en un selector para saber si un objeto existe
- Añade una clase al objeto HTML para modificar elementos por CSS cuando el documento se haya cargado
Improve your jQuery – 25 excellent tips
Vía / Intenta
Sincronicar scrolls entre capas con jQuery
Interesante script que permite sincronizar scrolls en diferentes divs para que al mover uno el resto también se muevan
jQuery.fn.synchronizeScroll = function() {
var elements = this;
if (elements.length <= 1) return;
elements.scroll(
function() {
var left = $(this).scrollLeft();
var top = $(this).scrollTop();
elements.each(
function() {
if ($(this).scrollLeft() != left) $(this).scrollLeft(left);
if ($(this).scrollTop() != top) $(this).scrollTop(top);
});
});
}
Personaliza los radio y los checkbox
Muchas veces los diseños no suelen ir de acuerdo con el aspecto de los radio y los checkbox que nos ofrecen los navegadores.
Crear controles que sustituyan los ya existentes puede darnos problemas de accesibilidad, salvo en este caso (bueno, y supongo que en otros), ya que lo que hace este script es aprovechar la funcionalidad de las etiquetas label para que el funcionamiento recaiga sobre estas etiquetas y no sobre las checkbox o los radio.
El script buscará los inputs radio y checkbox y los ocultará y cambiará el estilo de las label asociadas para que el funcionamiento sea el mismo.
ARC – Adam’s Radio/Checkbox customisation
VÃa / Infected-FX
Efecto de escala de grises para navegadores no IE
Interesante script que realiza el efecto de escala de grises en cualquier imagen o elementos HTML. Funciona para navegadores que permiten canvas, IE ya tiene un filtro que lo realiza.
Su uso es muy sencillo, tan sólo importar la librería y ejecutar el siguiente código:
grayscale( document.getElementsByTagName('div') );
“Grayscaling” in non-IE browser
Vía / Script & Style