Hola todos,
Pienso que hablar sobre las tecnicas para incorporar la creatividad de
un diseñador en nuestras paginas web es un buen comienzo para un blog ya que muchas
veces nos vemos limitados por las capacidades de un browser o por los
estandares del internet. Este es el caso con los scroll bars que
encierran un texto.
Para los diseñadores siempre hay una salida facil, FLASH. No entrare en
detalle en porque trato de evitar utilizar flash cuando estoy
traduciendo un diseño de illustrator a HTML, pero solo les digo que no lo
recomiendo. No es nada contra flash, es mas, flash se puede utilizar de
maneras excelente para dar detalles muy profesionales. Yo lo utilizo,
solo no para hacer scrollbars.
Volviendo a lo nuestro, cuando estaba buscado por internet en como
hacer un scrollbar con colores y con diferentes propiedades me encontre
con un codigo CSS muy sencillo.
scrollbar-face-color:#903030;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#C0B0B0;
scrollbar-shadow-color:rgb(0,0,0);
scrollbar-highlight-color:rgb(0,0,0);
scrollbar-3dlight-color:#808080;
scrollbar-darkshadow-Color:#202020;
Estas son una de las propiedades que podemos utilizar como
programadores para cambiarle el look de los scrolls de nuestras paginas.
Pero si lo intentan, veran que solo funciona en Internet Explorer. Por
que? Bueno, Microsoft? eh... Microsoft? Estas propiedades no son
aprobadas por W3C y son consideradas ilegales porque modifican
las preferencias del usuario. Me imagino que Microsoft penso que seria
bueno exponer esa funcionalidad a los programadores. Esto no esta mal
si tu aplicacion corre en una intranet donde los usuarios solo pueden
usar internet explorer, pero eso no es el caso mas general. Por lo cual, le recomiendo que siguan los estandares.
La manera de resolver esto es con javascript y si son como yo y no
tienen tiempo para escribir un framework de javascript, hay muchos. Uno
del los que mas me gusta es JQuery y un plugin para hacer scrollbars es
JScrollPane.
Como utilizarlo, es muy sencillo. Primero, descargen la libreria JQuery
y JScrollPane plugin e incluyan el siguiente codigo en el <head>
de su pagina.
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="scripts/jquery.em.js"></script>
<script type="text/javascript" src="scripts/jScrollPane.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="styles/jScrollPane.css" />
<script type="text/javascript">
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
El siguiente paso es remplazar scroll pane con el nombre del
<div> o la clase que van a contener el scrollpane.
<div class="scroll-pane">
Test Text...
<div>
Por ultimo, hay que hacer que el div genere un scroll automatico cuando el texto se pasa del tamano.
<style>
.scroll-pane
{
overflow: auto;
}
</style>
Listo!!!
Esta es la manera mas rapida de crear un scrollbar que puede ser
modificada por CSS y javascript. Por supuesto hay muchos parametros que
se pueden modificar entre los de CSS estan:
.winXP .jScrollPaneTrack {
background: url(images/windows_track.gif) repeat-y;
}
.winXP .jScrollPaneDrag {
background: url(images/windows_drag_middle.gif) no-repeat 0 50%;
}
.winXP .jScrollPaneDragTop {
background: url(images/windows_drag_top.gif) no-repeat;
height: 4px;
}
.winXP .jScrollPaneDragBottom {
background: url(images/windows_drag_bottom.gif) no-repeat;
height: 4px;
}
.winXP a.jScrollArrowUp {
height: 17px;
background: url(images/windows_arrow_up.gif) no-repeat 0 0;
}
.winXP a.jScrollArrowUp:hover {
background-position: 0 -20px;
}
.winXP a.jScrollArrowDown {
height: 17px;
background: url(images/windows_arrow_down.gif) no-repeat 0 0;
}
.winXP a.jScrollArrowDown:hover {
background-position: 0 -20px;
}
.winXP a.jScrollActiveArrowButton, .winXP a.jScrollActiveArrowButton:hover {
background-position: 0 -40px;
}
Esto fue extraido del ejemplo "operating system style scrollbars". Entre los parametros de Javascript, estan los siguientes:
-
scrollbarWidth
-
scrollbarMargin
-
wheelSpeed
-
showArrows
-
arrowSize
-
animateTo
-
dragMinHeight
-
dragMaxHeight
-
animateInterval
-
animateStep
-
maintainPosition
-
scrollbarOnLeft
-
reinitialiseOnImageLoad
Si les interesa ver mas opciones, puede ver los ejemplos en la
pagina de jScrollPane y vean el codigo fuente de la pagina. En general,
la documentacion no es muy buena pero hasta el momento me ha funcionado.
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5