It's about the user interface, baby!

648 days ago

No si alguien habrá notado el excesivo ancho de la página. Pues sí, es excesivo y de momento va a ser así hasta que encuentre la manera de hacerlo dinámico, cosa que ya tengo media maquinada. Pero todo tiene su porqué.

Como pueden ver, los contenidos no se "apilan" como en otros blogs sino que aca tienen otra disposición, de izquierda a derecha. No por nada en especial sino por mero capricho del diseñador, osea, yo mismo. Como pueden ver si hacen click en el índice de títulos a la izquierda los lleva directamente al post que quieren ver, esto es gracias al maravilloso script.aculo.us . Sin embargo éste cuenta con una limitación, y bastante razonable, y es que la función ScrollTo funciona solo cuando los contenidos son verticales. Así que yo me encargue de hacerle las modificaciones pertinentes para funcione en todos los sentidos. Si a alguién le interesa puede cambiar la funciona ScrollTo del effects.js incluido con Script.aculo.us por el siguiente fragmento de código:

Effect.ScrollTo = Class.create();
Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {

  initialize: function(element) {
    this.element = $(element);
    this.start(arguments[1] || {});
  },

  setup: function() {
    Position.prepare();
    var offsets = Position.cumulativeOffset(this.element);
    if(this.options.offsetX) offsets[0] += this.options.offsetX;
    if(this.options.offsetY) offsets[1] += this.options.offsetY;

    var maxWidth = window.innerWidth ?
      window.width - window.innerWidth :
      document.body.scrollWidth -
        (document.documentElement.clientWidth ?
          document.documentElement.clientWidth : document.body.clientWidth);
    this.scrollStartX = Position.deltaX;
    this.deltaX = (offsets[0] > maxWidth ? maxWidth : offsets[0]) - this.scrollStartX;

    var maxHeight = window.innerHeight ?
      window.height - window.innerHeight :
      document.body.scrollHeight -
        (document.documentElement.clientHeight ?
          document.documentElement.clientHeight : document.body.clientHeight);
    this.scrollStartY = Position.deltaY;
    this.deltaY = (offsets[1] > maxHeight ? maxHeight : offsets[1]) - this.scrollStartY;
  },

  update: function(position) {
    Position.prepare();
    window.scrollTo(
      this.scrollStartX + (position * this.deltaX),
      this.scrollStartY + (position * this.deltaY)
    );
  }
});
Con esto ya van a poder usar la función ScrollTo en todas las direcciones, incluido el OffsetY y OffsetX.

Search