Javascript

Lazy Load: retrasar la carga de imágenes con jQuery

ByLuis October 1, 2009

Interesante plugin para jQuery que permite retrasar la carga de imágenes para que la carga de la página sea más rápida. Para ello, cargará las imágenes sólo cuando se vean mediante el scroll. Un script que está pensado para páginas con gran número de imágenes pesadas.

Lazy Load

Vía / WebAppers

Javascript

Javascript: getElementsBy

ByLuis May 4, 2006

Uno de los problemas con los que nos solemos encontrar cuando programamos en Javascript es el modo en el que obtenemos los elementos HTML que deseamos tratar, a parte del conocido getElementById(), existen otros, algunos estÃ¡ndar y otros desarrollados por otra gente.

Una interesante lista con todos ellos reunidos: getElementById (W3C, Prototype JavaScript framework), getElementsByName (W3C), getElementsByTagName (W3C), getElementsByTagNames (Peter-Paul Koch), getElementsByClassName (Prototype JavaScript framework, Stuart Colville, Robert Nyman, Jonathan Snook), getElementsBySelector (Dean Edwards, Olivier Gambier, Prototype JavaScript framework 1.0.5rc2, Simon Willison, jQuery, Joe Hewitt), getElementsByAttribute (Robert Nyman, David “liorean” Andersson, Jack Sleight) y getElementsByAnything (Matthew Pennell)

getElementsBy*()

VÃa / MenÃ©ame

Javascript

JS Bin: edita, testea y haz debug de Javascript online

ByLuis October 22, 2009

JS Bin es una aplicación que nos permite crear nuestros scripts y testearlos o hacerles debug de forma colaborativa. Su interfaz es muy sencilla, consta de tres pestañas: javascript, el html en el que se incluye el javascript y la salida del HTML y el Javascript.

Además, permite añadir librerías javascript con jQuery o YUI, y exportar el trabajo a una URL propia.

JS Bin

Vía / WebAppers

Javascript

Slider accesible y no obstrusivo

ByLuis November 26, 2007

Un gran script que nos permite insertar sliders en nuestras webs, que sean accesibles y no obstrusivos. A parte, permiten ser manejados por las flechas del cursor, por las teclas de inicio y fin, o el ratÃ³n, incluido el scroll.

El script le asigna automÃ¡ticamente a cada slider el rol slider requerido por ARIA y los estados valuemax, valuemin y valuenow.

Un ejemplo de uso para un slider horizontal con una llamada de funciÃ³n serÃa la siguiente:

class="fd_range_0_255 fd_classname_extraclass fd_callback_updateColor"

Slider

VÃa / WebAppers

Javascript

Colección de calendarios Javascript

ByLuis December 11, 2006

En muchas aplicaciones web, la utilizaciÃ³n de un campo fecha suele ser algo habitual. Es preferible que el usuario no tenga que escribir ninguna fecha, sino que esta se tenga que introducir mediante un control de tipo calendario, evitando asÃ que ocurran ciertos errores y facilitando la labor al usuario. Tened en cuenta que hay diversos formatos DD/MM/YYYY, MM/DD/YYYY, DD-MM-YYYY, …

Espero que esta lista de calendarios realizados mediante Javascript os pueda ser de utilidad:

The DHTML / JavaScript Calendar: visible mediante popup o en plano, adecuado para seleccionar fecha y hora, vÃ¡lido para la mayorÃa de los navegadores, admite CSS, themes, navegaciÃ³n por teclado, muestra los dÃas de los meses adyacentes, traducido a varios idiomas, dÃas especiales resaltados de distinta manera.
Calendar Popup: se muestra un popup mediante ventana o usando capas, implementado para que tenga el aspecto de Microsoft Outlook, fÃ¡cil de usar.
Zapatec Calendar: script comercial, muy completo, admite varios meses, vÃ¡lido para la mayorÃa de los navegadores, permite varios formatos de fecha y multiple selecciÃ³n de dÃas.
ScriptCalendar: versiÃ³n comercial, basado en objetos, fÃ¡cil de usar y de modificar, vÃ¡lido para la mayorÃa de los navegadores.
CalendarXP: versiÃ³n comercial, muy completo que a parte del calendario pequeÃ±o, muestra un calendario grande que admite mÃ¡s detalles.
Tigra Calendar: el que mÃ¡s me ha gustado, cada campo es seleccionable, se puede adjuntar a un campo existente, meses seleccionables mediante scrolling y muchas cosas mÃ¡s.
Epoch Calendar: bÃ¡sico, de aspecto atractivo y vÃ¡lido para ser usado en aplicaciones AJAX.

Javascript

Twitter ticker para jQuery

ByLuis November 11, 2008

TwitterTicker es un plugin para jQuery que nos permite añadir un ticker de los ultimos updates que se hacen en un cuenta de Twitter. Las entradas se irán mostrando una a una en el mismo espacio mediante fading.

Su uso es muy sencillo, se crea una capa contenedora y se ejecuta el siguiente código:

$(document).ready(function() {
$("#twitter").twitterTicker({
userName: "jquery",
numTweets: 5,
delay: 4000,
loaderText: "Loading tweets..."
});
});

A jQuery TwitterTicker Plugin

Vía / Script & Style

Javascript

Tutorial básico de HTML storage

ByLuis August 16, 2010

Una de las características más interesantes de HTML5 es el browser storage, el cual nos permite almacenar datos en el navegador del cliente.

A parte de su uso básico:

localStorage.setItem('name', 'arman');  
var value = localStorage.getItem('name');  
localStorage.removeItem('name');

Me gustaría destacar dos puntos importantes: detectar si el navegador lo soporta y añadir eventos:

var webStorageSupported = ('localStorage' in window) && window['localStorage'] !== null;

if (window.addEventListener) {  
  window.addEventListener("storage", handleStorageChange, false);  
} else {  
  window.attachEvent("onstorage", handleStorageChange);  
}  

function handleStorageChange(event) {  
  alert("Algo esta cambiando en el almacenamiento");  
}

El resto del tutorial explica todo paso a paso

Browser Storage for HTML5 Apps

Similar Posts