fleXcroll: scroll bars personalizados para tu web

ByLuis July 27, 2006

LibrerÃa que nos permite usar scrolls personalizados en nuestras pÃ¡ginas web, ya sean verticales u horizontales. Aunque hay que intentar que no aparezcan en nuestra pÃ¡gina, en caso de que sea necesario, porque los hay que son totalmente necesarios, quizÃ¡s se puedan personalizar con este script.

Por lo poco que he visto del cÃ³digo (que no estÃ¡ fÃ¡cil de seguir porque estÃ¡ ofuscado), veo que fija el tamaÃ±o de la capa y con la propiedad overflow muestra los scrolls. Dibuja los scrolls personalizados encima y mediante ellos realiza el scroll de la capa, usando scrollTop y scrollLeft (que creo que antes no funcionaba del todo bien en Opera 8 y en la versiÃ³n 9 lo han solucionado). Algo que yo no solÃa hacer y que he visto como lo hace aquÃ, es capturar el evento selectstart y hacer que devuelva false, para que cuando se haga el drag del scroll no se seleccione la imagen que usamos para personalizar el control.
FleXcroll, Flexible and Accessible Custom Scroll Bars
VÃa / aNieto2K

Javascript

Tutorial de Drag&Drop de capas con jQuery UI

ByLuis May 25, 2010

Últimamente, algunas webs como la BBC han modificado su diseño para hacerlo modular y permitir que el usuario realice Drag&Drop de los módulos para colocarlos cómo más le guste, algo que Netvibes o iGoogle ya hacían hace bastante tiempo. Afortunadamente, ahora con jQuery UI se puede realizar de forma muy sencilla.

El tutorial que enlazo explica paso a paso cómo hacerlo haciendo uso de jQuery, jQuery UI mediante los sortables y jQuery Cookies para trabajar con cookies de forma facil (y poder recuperar la configuración cuando el usuario vuelva a conectarse).

$('#sidebar .sortable-list').sortable({
    axis: 'y',
    containment: 'parent',
    forceHelperSize: true,
    forcePlaceholderSize: true,
    handle: '.section-title',
    opacity: 0.8,
    placeholder: 'placeholder',
    update: function(){
        $.cookie('sidebar-cookie', getItems('sidebar'));
    }
});

jQuery: Customizable layout using drag and drop

Vía @kingsleyphls

IE | Javascript

IE7 y Javascript

ByLuis May 3, 2006

Aunque Microsoft dijo que se iba a centrar en corregir los errores en CSS y no en Javascript, no está mal decir que cosas se ha corregido y cuales estarían bien para futuras versiones.

Los errores que se han corregido son: los memory leaks cuando se hacían referencias circulares entre elementos, un fallo que cerraba la aplicación cuando se usaba la función normalize() y soporte para XMLHttpRequest de forma nativa en vez de mediante ActiveX.

Los errores que no estaría mal que corrigieran en futuras versiones son: getElementById debería ignorar el atributo name, debería cambiar el window.location cuando se navega entre referencias en el mismo documento mediante el historial, cuando se mueven checkbox mediante métodos del DOM recuperan el estado original y no conservan el que tenían, setAttribute no funciona con el atributo style o con eventos, varios atributos necesitan ser escritos usando las máyusculas en las iniciales de las plabras (camelCase), radio buttons clonados no crean su propio grupo.

Vía / QuirksBlog

Javascript

Drag & Drop de ficheros en Firefox

ByLuis February 18, 2010

Esto puede dar mucho juego, pero tan solo funciona en Firefox 3.6+, por lo que no podemos depender de este script en nuestras aplicaciones. A partir de la versión 3.6, Firefox permite realizar drag&drop de ficheros en nuestra web y mediante Javascript poder obtener los ficheros o textos que se arrastren contra un elemento específico.

Su uso es muy sencillo:

dropzone.addEventListener("drop", function(event) {
  event.preventDefault();
  // Ready to do something with the dropped object
  var allTheFiles = event.dataTransfer.files;
  alert("You've just dropped " + allTheFiles.length + " files");
}, true);

Y dispone de una API tanto para el drag&drop como para los ficheros.

Recomiendo ver el código fuente de este ejemplo para tener una librería que te hace todo el trabajo.

file drag and drop in Firefox 3.6

Javascript

linkNotify: plugin jQuery que indica que se carga un enlace

ByLuis June 16, 2009

linkNotify es un plugin jQuery que permite modificar enlaces y mostrar un texto personalizado que indica que el enlace se está cargando. Algo que puede ser muy útil para aplicaciones en la que el usuario es algo básico y pincha y pincha en el enlace eternamente hasta que ve algún resultado sin esperar a que cargue la primera vez.

$('a').linkNotify('Espera mientras carga la pagina...');

linkNotify

Javascript

Manejar y generar excepciones en Javascript

ByLuis July 23, 2010

Los que hemos trabajado con Java estamos acostumbrados a tratar y lanzar excepciones para controlar los errores, algo que en Javascript no es muy común, pero en librerías algo elaboradas podría ser muy útil.

// Clases de errores
function DivisionByZeroError() {
    this.name = "DivisionByZeroError";
}
function DivisionByStringError() {
    this.name = "DivisionByStringError";
}
// Funcion que devuelve un error
function divisionCanFail(a, b) {
    if (b == 0) {
        throw new DivisionByZeroError();
    }
    if (typeof b == "string") {
        throw new DivisionByStringError();
    }
    return a / b;
}
// Funcion de test
function decoratedDivision(a, b) {
    try {
        alert(divisionCanFail(a, b));
    } catch (error if (error.name == "DivisionByZeroError")) {
        alert("A division by zero...");
        alert("Exception class: " + error.name);
    } catch (error if (error.name == "DivisionByStringError")) {
        alert("Exception class: " + error.name);
    }
}

decoratedDivision(5, "isThisANumber?!");
decoratedDivision(5, 0);

Exceptional JavaScript

css | PHP | XHTML

CAPTCHA DHTML y CSS con PHP

ByLuis March 12, 2008

Sí, demasiadas siglas para un título, pero se trata de eso, de generar un CAPTCHA mediante PHP, pero la característica de este CAPTCHA es que se realiza mediante CSS y HTML, para lo cual presentará una tabla con celdas y solo una de ellas con un color diferente que será la que hay que pulsar para poder pasar el CAPTCHA.

La clase envía mediante AJAX una petición al servidor pasando las coordenadas de los clicks del usuario hasta que se envían un numero total de clicks a cajas coloreadas.
DHTML and CSS CAPTCHA

Similar Posts