Precarga de imágenes con jQuery

No hace mucho tuve que lidiar con un proyecto en el que, en uno de los apartados, había un listado de restaurantes, ordenados en forma de grid mediante Isotope, y que al clicar sobre cualquiera de ellos se desplegaba un apartado con unas cuantas fotos del sitio. Al final habían un montón de fotos y la página tardaba una eternidad en aparecer: Isotope no arrancaba hasta que toda la página (imágenes incluídas) habían cargado. Y cargar las imágenes por Ajax al clicar sobre un elemento estaba descartado.

Intenté cargar las imágenes mediante $(document).ready pero no había manera, se seguían cargando junto con el resto del contenido. Pero al final encontré una solución.

Sigue leyendo

FullCalendar: cómo insertar un calendario con este plugin jQuery. También sincronizable con Google Calendar.

Creado por Adam Shaw,  FullCalendar es, como dice en su sitio web (con varios ejemplos incluídos), un plugin jQuery que proporciona un completo calendario que se puede alimentar por AJAX (o no, si definimos los eventos en el momento de su creación), y que nos permite incluso arrastrar y soltar eventos, o incluso sincronizarlo con Google Calendar.

Además es ampliamente customizable visualmente, y proporciona controles para capturar eventos tales como el click o el drag and drop (ésto último utilizando jQueryUI) de eventos.

En el sitio web hay muchísima documentación sobre el funcionamiento del plugin, pero vamos a ver cómo incorporar rápidamente este calendario a nuestra página web.

Sigue leyendo

jQuery: Conocer si un selector existe

Hace unos meses hice una entrada describiendo cómo saber si una variable existía, y de paso explicar las diferencias entre null y undefined.

Hoy toca explicar cómo saber, mediante jQuery, si un selector está presente o no en el documento, para evitar errores al ejecutar acciones sobre un selector que no existe.

La verdad es que la solución es muy sencilla aunque un poco rebuscada, y todo porque jQuery siempre devuelve un objeto independientemente de si coincide o no:

if ( $(selector).length ) {
    // Hacer algo
}

Así de sencillo.

Curso de jQuery (I): Selectores básicos

JavaScript está de moda, eso es un hecho. Y esto es así debido a librerías como jQuery, que simplifican mucho la forma de trabajar con él. Todo lo que se puede hacer con jQuery se puede lograr también con JavaScript directamente, pero teniendo que teclear mucho más código y sufriendo adaptándolo para que funcione en todos los navegadores; jQuery nos libera de ésto y de mucho más.

No soy ningún experto en jQuery, ni mucho menos, pero con este pequeño curso básico intentaré enseñar, de manera práctica, a dar los primeros pasos y de paso pondré en orden lo que he aprendido hasta ahora. Iré mezclando jQuery y también jQueryUI, mostrando cosas básicas de uno y cómo trabajar con controles del otro.

En éste primer post veremos cómo utilizar los selectores básicos de jQuery para interactuar con los diferentes elementos de una página HTML. En la siguiente entrada mostraré otros selectores más avanzados, para no hacer de cada entrada un libro. Pero lo primero de todo es saber cómo incluir jQuery en nuestra web, y qué opciones tenemos. Vamos a ello:

Sigue leyendo