Aaron Boodman's dhtml scroller modifications (ypSimpleScroll)
2004-10-15 14:17:08
Hi, i'll show you a hack i made for the mtv spain website this past may. We needed a dhtml scroller that would work with arrows, drag/drop handler and was IE/mac compatible. I couldn't find one at that time, so I took Aaron Boodman's ypSimpleScroll and mixed it with his dom drag script.
The script degrades nicely in (nearly) all browsers, though I've noticed Opera breaks it somewhere, leaving the script half way applied. I haven't had time to investigate, so if any of you want to, you can send me an email. I'll give you an example of the script using text from my tools section.
Example one
Javascript is a different layer of the style and structure ones, and like CSS, it should not be required but optional, so that without its use the page should be accessible and usable. If the browser cannot interpret the code it will not execute it, but the contents will be accessible. This is generally called script degradation. Now, being more specific, what makes a piece of code unobtrusive?
- Mix with structure: mainly, script behaviour not being mixed with page contents. This means there will be no intrinsec events inside the document and the file will be stored in a separate .js file.
- Initialization: the ideal solution is the script being initialized automatically on page load
- Assign actions with an event handler: because we have avoided the use of intrinsec events we will need a way to associate actions (execute functions) to events captured by different elements on the page.
- Compatibility: browsers that dont understand the code must do without it throwing no error messages.
- Capacities detection: to allow the previous point be true we will use object detection instead of browser detection.
Ending example one.
As you'll see next, I also modified it so the page could handle more than one scroller, even with different sizes, as that was another requirement for that website. So I created a function that added a counter to an array and we pass as arguments the index of that instance and the size for that scroller. The script just does the rest.
Example two
Table of Contents from titles (TOC)
This script reads all nodes in a document and stores the titles hierarchic structure in a variable, showing them in an indented list according to their order. Sections of the list are links to the real section on the page, using the id of the titles (script creates them if needed).
Download toc
Form validator
This script reads all text fields of a form making all "required" classes having to be filled before sent to server, otherwise warning visually and through an alert. If the field is named email it forces (with a regular expression) to use a valid email.
Download validador
Ending example two.
I think it's quite easy to implement, you need:
- A block of style to define how to see the contents of the scroller area if dhtml is not applied
<link rel="stylesheet" type="text/css" href="scroller.css"> - Link the three javascript files either in the head or before the scrolling content itself (as examples in this page):
<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> - Initialise the script, also in the head or before the scrolling content itself.
To this end we will use the function
instantiateScrolleras follows:
The argument values refer to:<script type="text/javascript"> instantiateScroller(0, "scroll0", 7, 0, 300, 150, 150); </script>- count
- counter for the number of scroller, starting at zero.
- id
- part of the id that references that scroller; simply use "scroll" + the previous count.
- left
- content left position inside container.
- top
- content top position inside container.
- width
- container width.
- height
- container height.
- speed
- scroller speed.
- Save the three images (up, drag y down) in the same directory of the scripts.
- Define the boxes that we will use as content and container. Basically we need three boxes, only needing to use
names according to the next notation: (root_ scroll_Container and scroll_Content); just replace the
_ by the count number of each scroller (starting by zero):
<div class="root" id="root0"> <div class="scrollContainer" id="scroll0Container"> <div class="scrollContent" id="scroll0Content"> All content will go inside here </div> </div> </div>
Download the script in rar format
Once you accomplish these the script will do the rest for you. You can download the script with all the needed files in raw format from here