Consejos Blogger: TinyScroller: Simple y personalizable

TinyScroller es un script muy sencillo que no requiere librerías extras y nos permite mostrar mucho contenido en un espacio pequeño tal como normalmente hacemos cuando usamos un contenedor con cierta altura dimensionada y le aplicamos la propiedad overflow para que se pueda ver utilizando una barra de desplazamiento.

El script es realmente pequeño, uno poco más de 50 líneas sin comprimir aunque el ZIP que lo contiene también incluye una versión minimizada.

Lo agregamos como cualquier otro, alojándolo en un servidor o directamente, antes de <head>:

<script type='text/javascript'>
//<![CDATA[
var TINY={};
function T$(id){return document.getElementById(id)}
function T$$$(){return document.all?1:0}
TINY.scroller=function(){
  return{
    init:function(a,c,b,s,d){
      a=T$(a); a.c=c; a.s=s; c=T$(c); b=T$(b); s=T$(s); a.n=d||0;
      b.style.display='block'; a.style.overflow='hidden';
      var h=a.offsetHeight, t=c.offsetHeight;
      if(t<h){
        b.style.display='none'
      }else{
        a.m=h-t; a.d=t/h; s.style.height=(h*(h/t))+'px'; s.style.top=b.style.top=0;
        s.onmousedown=function(event){TINY.scroller.st(event,a.id); return false};
        s.onselectstart=function(){return false}
      }
      a.l=b.offsetHeight-s.offsetHeight
    },
    st:function(e,f){
      var a=T$(f), s=T$(a.s); a.bcs=TINY.cursor.top(e); a.bct=parseInt(s.style.top);
      if(a.mv){this.sp(f)}
      a.mv=function(event){TINY.scroller.mv(event,f)};
      a.sp=function(){TINY.scroller.sp(f)};
      if(T$$$()){
        document.attachEvent('onmousemove',a.mv); document.attachEvent('onmouseup',a.sp)
      }else{
        document.addEventListener('mousemove',a.mv,1); document.addEventListener('mouseup',a.sp,1)
      }
      if(a.d){s.className+=' '+a.n}
    },
    mv:function(e,f){
      var a=T$(f), m=TINY.cursor.top(e)-a.bcs+a.bct, s=T$(a.s), c=T$(a.c);
      if(m>=0&&m<a.l){
        s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px'
      }else if(m<0){
        s.style.top=0; c.style.top=0
      }else if(m>a.l){
        s.style.top=a.l+'px'; c.style.top=a.m+'px'
      }
    },
    sp:function(f){
      var a=T$(f), s=T$(a.s); if(a.d){s.className=s.className.replace(' '+a.n,'')}
      if(T$$$()){
        document.detachEvent('onmousemove',a.mv); document.detachEvent('onmouseup',a.sp)
      }else{
        document.removeEventListener('mousemove',a.mv,1); document.removeEventListener('mouseup',a.sp,1)
      }
      a.mv=0;
    }
  }
}();
TINY.cursor=function(){
  return{
    top:function(e){
      return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY
    }
  }
}();
//]]>
</script>

Y lo usarmemos de este modo:

<div id="ejemplo-scroll" class="scroll">
  <div id="ejemplo-scrollcontent" class="scrollcontent">
    ....... acá pondremos nuestro contenido .......
  </div>
  <div id="ejemplo-scrollbar" class="scrollbar">
    <div id="ejemplo-scroller" class="scroller"></div>
  </div>
</div>

e inmediantamente debajo, llamamos a la función que en este caso, sería así:

<script type="text/javascript">TINY.scroller.init('ejemplo-scroll','ejemplo-scrollcontent','ejemplo-scrollbar','ejemplo-scroller','buttonclick');</script>

Eso, lo haremos siempre del mismo modo, con la misma sintaxis, colocando en la función los cinco parámetros que son los IDs que hemos elegido:

el ID del contenedor que en este caso llamé ejemplo-scroll
el ID del contenido que llamé ejemplo-scrollcontent
los IDs de lso DIVs auxiliares que mostrarán la barra de desplazamiento y el botón: (ejemplo-scrollbar y ejemplo-scroller)
y la clase de ese botón (buttonclick)

Por último, necesitamos el CSS que es lo que podemos personalizar y que en este caso, rearmé agregando clases par que, de esa forma, pudieran mostrarse con distintos tamaños y detalles gráficos:

<style>

  /* las reglas genéricas */
  .scroll { /* el contenedor */
    overflow: auto;
    position: relative; 
  }
  .scrollcontent { /* el contenido */
    position: absolute;
    z-index: 200;
  }
  .scrollbar { /* la barra de desplazamiento es una imagen */
    background:url(URL_scroll-bg.gif);
    display: none;
    float: right;
    position: relative;
    width: 15px;
    z-index: 100;
  }
  .scroller  { /* el botón de desplazamiento también es una imagen */
    background-color: #CCC;
    background-image: url(URL_scroll-arrows.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 15px;
  }
  .buttonclick { background-color:#BBB; }

  /* y defino los anchos, altos y otros detalles de cada uno de elllos */
  #ejemplo-scroll { /* 
    background-color: #000;
    margin: 0 auto;
    height: 200px; /* el ancho */
    width: 300px; /* el alto */
  }
  #ejemplo-scrollcontent {
    width:275px; /* el ancho del contenedor menos el ancho de la barra de desplazamiento */
  }
  #ejemplo-scrollbar {
    height: 200px; /* el mismo alto que el contenedor */
  }

</style>

ejemplo 1

Duis erat justo; aliquam sit amet scelerisque vitae, gravida at magna. Morbi ac justo a est porta sollicitudin id vitae velit. Vivamus dui turpis, placerat id aliquam in, mattis vel nunc. Cras lacus tellus, congue placerat ullamcorper sed, imperdiet molestie mi. Maecenas non tristique leo. Quisque in hendrerit velit. Curabitur vel metus ut dui tincidunt lacinia. Aliquam sed est in tellus lobortis auctor a at tortor. Sed in elit a mauris tempus consequat feugiat eget felis. Donec risus erat, pellentesque vitae lacinia ac, placerat ac enim. Curabitur adipiscing feugiat hendrerit. Integer porttitor malesuada magna, vel laoreet lectus rutrum quis. Etiam tortor lorem, semper vitae auctor sed, lobortis vel libero! Morbi sollicitudin, lacus laoreet malesuada commodo, sapien magna nullam sodales.

Mauris euismod nulla non ligula rutrum non consequat tellus suscipit. Praesent mattis lorem nec nisi lacinia vehicula. Integer dolor justo, pellentesque ut lacinia non, mollis non leo. Sed ornare consectetur dui, at tempus dui suscipit tincidunt. Suspendisse blandit; eros ac vulputate ullamcorper, mi lectus rutrum erat, sit amet ornare tellus nisl a felis. Duis luctus placerat nunc, quis tempus tortor aliquet eget! Nullam ut nisl vitae nibh dignissim dignissim nec sit amet risus. Nulla et turpis dui? Nunc convallis porta consequat.

Morbi molestie lectus et sem luctus tempus. Mauris elementum urna ut mi tristique pharetra. Nullam a eros sem, vel ultricies metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea turpis duis.

Bastaría establecer otros valores para crear otro modelo y usarlo en la misma página:

#otro-scroll{
  background-color: #222;
  border: 2px solid #000;
  height: 270px;
  margin: 0 auto;
  outline: 1px solid #666;
  width: 600px;
}
#otro-scroll{width: 575px;}
#otro-scroll{height: 270px; }

Consejos Blogger

lunes, 15 de octubre de 2012

TinyScroller: Simple y personalizable

ejemplo 1

ejemplo 2

No hay comentarios:

Publicar un comentario

Datos personales