Apaño de scroller dhtml de Aaron Boodman (ypSimpleScroll)
2004-10-15 14:17:08
Os presento un apaño que hice para la web de mtv españa durante el mes de mayo de 2004. Necesitábamos un scroller dhtml que funcionase con flechas, con soltar y arrastrar, y además fuese compatible con el explorer de mac. No había manera de encontrar uno que cumpliese todos los requisitos, así que pillé el ypSimpleScroll de Aaron Boodman y lo modifiqué mezclándolo con su script de soltar y arrastrar.
El script degrada perfectamente en (casi) todos los navegadores, aunque por lo visto en Opera casca y no degrada bien porque aplica el script a medias. No me he entretenido en buscar el fallo, si alguien tiene tiempo puede enviarme un email. Os dejo con un ejemplo del script usando texto de mi página de utilidades.
Inicio del ejemplo uno
Javascript es una capa diferente de la capa estilos y la capa estructural, y al igual que el CSS, debería ser prescindible, de manera que sin el uso de esta tecnología la página debería ser accesible y navegable. Si el navegador no sabe interpretar el código simplemente no lo ejecutará pero los contenidos seguirán siendo accesibles. Esto es lo que se conoce como degradación del script. Ya entrando en materia, ¿qué hace que un código sea no intrusivo?
- Mezcla con la estructura: principalmente, que no se mezcla el contenido de la página con el comportamiento del script. Esto significa que no habrá eventos intrinsecos en el documento y además que el script estará situado en un archivo .js aparte
- Inicialización: lo ideal es que el script se inicialice automáticamente al cargar la página
- Asignar acciones con un manejador de eventos: puesto que hemos evitado el uso de eventos intrinsecos vamos a necesitar algún modo para asociar acciones (ejecutar funciones) a eventos capturados por distintos elementos de una página
- Compatibilidad: los navegadores que no entiendan el código deben prescindir de éste sin devolver mensajes de error.
- Detección de capacidades: para que lo anterior suceda usaremos detección de objetos en lugar de detección de navegadores
Final del ejemplo uno.
Como vereis a continuación también hice una modificación para poder tener más de un scroller en cada página, incluso con tamaños distintos, porque era otro de los requisitos de la web. Para eso me creé unas funciones que añadían un contador a un vector, donde pasábamos como argumentos el índice del vector y los tamaños que debía tener ese scroller. El script se encarga del resto.
Inicio del ejemplo dos
Tabla de contenidos a partir de títulos (TOC)
Este script lee todos los nodos del documento y guarda en una variable la estructura jerárquica de los títulos de secciones de una página, mostrándolos en una lista indentada acorde a ese órden. Las secciones de la lista son enlaces a las secciones reales de la página, usando el id de los elementos (si no existe se crea automáticamente).
Descarga toc
Validador de formularios
Este script lee todos los campos de texto de un formulario y si encuentra una clase "required" hace que ese campo deba ser llenado antes de enviar el formulario al servidor. En caso contrario te avisa de forma visual y con un alert. Si el campo se denomina email obliga mediante una expresión regular a usar un correo válido.
Descarga validador
Final del ejemplo dos.
Creo que es bastante fácil de implementar. Necesitais:
- Un bloque de estilo para definir cómo se ve el contenido del scroll en caso de no usar un navegador que soporte dhtml.
<link rel="stylesheet" type="text/css" href="scroller.css"> - Enlazar los tres archivos javascript ya sea en el head o antes del contenido que debe hacer scroll (como en estos ejemplos):
<script type="text/javascript" src="dom-drag.js"></script> <script type="text/javascript" src="ypSimpleScrollC.js"></script> <script type="text/javascript" src="scroller.js"></script> - Inicializar el script, también en el head o antes del contenido que debe hacer scroll. Para ello usaremos la función
instantiateScrollerdel modo siguiente:
Los posibles valores se refieren a:<script type="text/javascript"> instantiateScroller(0, "scroll0", 7, 0, 300, 150, 150); </script>- count
- contador de número de scrollers, empezando por cero.
- id
- parte del id que referencia al scroller; simplemente usa "scroll" + el número anterior.
- left
- posición izquierda del contenido dentro del contenedor.
- top
- posición superior del contenido dentro del contenedor.
- width
- anchura del contenedor.
- height
- altura del contenedor.
- speed
- velocidad del scroller.
- Guardar las 3 imágenes (subir, arrastrar y bajar) en el directorio donde alojemos los scripts.
- Definir las cajas que usaremos como contenedores y contenidos. Básicamente necesitamos tres cajas, y deberemos ir con
cuidado de usar los nombres clave (root_ scroll_Container y scroll_Content) correctamente, reemplazando los _ por el número
de índice de cada scroller (empezando por cero):
<div class="root" id="root0"> <div class="scrollContainer" id="scroll0Container"> <div class="scrollContent" id="scroll0Content"> Todo el contenido html aquí dentro </div> </div> </div>
Descarga el script en formato rar
Una vez hecho esto el script se encarga del resto. Ah, podeis bajaros el script con todos los archivos en formato rar desde aquí