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);
});
});
}
La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).
El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:
SVG
Vídeo
Javascript
var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
play.style.display = 'none';
pause.style.display = 'block';
video.play();
}, true);
pause.addEventListener('click', function() {
play.style.display = 'block';
pause.style.display = 'none';
video.pause();
}, true);
video.addEventListener("ended", function() {
play.style.display = 'block';
pause.style.display = 'none';
video.pause();
}, true);
El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.
JX Library es una librería para Mootools que nos facilita la realización de interfaces gráficas en nuestras páginas web.
Nos ofrece una variedad de elementos gráficos: layouts, paneles, árboles, grids, botones, toolbars, selectores de color, combos, … Jx
Vía / WebAppers
Una serie de consejos para que la carga de los javacripts no se demoren demasiado y hagan al usuario esperar, algo que no suele gustar, sobre todo ahora que cada vez hay mas efectos y funcionalidades que hacen que las páginas tarden más en cargarse.
Comprime tus scripts con Rhino, aunque es recomendable tener una versión para pruebas sin comprimir ya que mirar un código comprimido es bastante complicado.
Situa el script al final del documento, asà no habrá que esperar a que se cargue el script para ver el contenido de la página.
Carga los scripts cuando realmente los necesites:
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}
Eso sÃ, retrasa la ejecución de los scripts para que de tiempo a cargarse.
Normalmente lo que intentamos es comprimir nuestro código Javascript o bien para que ocupe menos, o bien para ofuscarlo. En este caso se trata de un script que nos permite embellecer scripts comprimidos.
AsÃ, por ejemplo, el código de Google Reader, el cual, como todos los de Google son casi imposibles de seguir, lo verÃamos asÃ:
...
function nd(a, b) {
a = String(a);
return (new Array(Math.max(0, b - a.length + 1))).join(mc) + a
}
var l = "";
function tj() {
return Array.prototype.join.call(arguments, l)
}
var R = " ",
nc = ", ",
Jc = ":";
function zQ(a) {
...
Facebook pone a disposición de sus usuarios unos sliders para poder controlar el valor de ciertos elementos. Para aquellos que estén interesados en usarlos, podrán echar mano de este ejemplo realizado con Mootools, cuyo uso es muy sencillo.
Hay que tener en cuenta que no es un script accesible, porque no existe una alternativa estándar al control, ya que el slider es una capa y si no hay javascript o entorno gráfico, el valor no se podría cambiar. El script es bueno y añadirle la parte de accesibilidad no implica mucha complicación. Facebook Sliders With Mootools and CSS
Vía / CSS Globe
