//////////////////SCROLLER//////////////////////////////////////////////////
<!--

// *** SCROLLER OBJECT SETUP AND LOADING CONTENT ***

// First, you have to create one or more scroller objects corresponding to divs in your page.
// Pass it the name of a file to load (or an empty string to scroll HTML already in the page).
//  var objectName = new DHTMLScroller('objectName', 'firstFileToLoad.html');     // Loads file.
//  var objectName = new DHTMLScroller('objectName', '');       // Scrolls pre-existing content.

var content = new DHTMLScroller('content', '');

// When you 'load' files, there are some important restrictions:
//  * You can't load files from other domains, files can ONLY come from the same server.
//  * In non-NS4 browsers, only the BODY of the file is transferred to the DIV in this page.
//  * Regular links and forms in the loaded file will reload the whole window.
//    See later in the script for how to dynamically load HTML files.
// Upon 'loading' a file, it is inserted into the DIV in this page, so all links or images
// will be relative to this page, NOT the external file! The pages are MERGED together.
// I recommend keeping loaded content simple, for instance avoid loading scripts if you can.
// Instead, keep any important JS functions in this page; merged files can still access them.



// *** SCROLLER LAYOUT AND CUSTOMISATION ***

// Once we have created a scroller object, we tell it the names of the relevant divs in the page
// we want it to use. This is accomplished by adding 'ScrDiv()' objects to an array:
//
// divs[n] = new ScrDiv('ID-of-div', 'Left', 'Top', 'Width', 'Height', Visibility, 'Parent');
//
// As you can see, the second through to fourth parameters are the positions and dimensions of
// the divs. They can be strings containing JavaScript expressions, using functions/variables to
// calculate special positions, e.g. centring or sizing with the window. All left/top positions
// are measured in pixels from the top-left corner of the document, and the div will hover over
// that area of the page. An empty string '' will not set that position/dimension.
//   The visibility parameter should be 0, 1 or 2. If 0, the div visibility will never be set
// by the script. If 1, the div will be shown, but only when the scroller content is larger than
// the scroller area. If 2, the div will always be visible.
//   The 'parent' parameter is optional and can be ignored. Only use it if you're nesting the
// scroller divs within other divs, by passing a string that when evaluated returns a reference to
// the nesting div, e.g. 'getRef("containerDivID")'

// This example uses my 'page' object, included with this script. It provides some functions,
// page.winW() and page.winH(), which return the current width and height of the window.
// These allow you to construct mathematical expressions to size or position the scroller based on
// the window dimensions, e.g. centre it, or hover it over a given point in the page somewhere.

with (content)
{
 // The first three divs you add are special! The first is the scroller area itself into which
 // files are loaded. The second is the scrollbar area, and he third is the scrollbar thumb (the
 // draggable bit). Anything after that is positioned and sized by the scroller engine on window
 // resize but does not have any special properties.

 // CONTENT: This div has an ID of 'contentOuter', is positioned at (x=50, y=50), and is
 // most of the window wide and high. If you want to centre the div, try something like:
 //divs[0] = new ScrDiv('contentOuter', 'page.winW()/2 - 300', 'page.winH()/2 - 200', '600', '400');
 divs[0] = new ScrDiv('contentOuter', '', '', '520', '330', 2);

 // SCROLLBAR: Positioned near the right edge of the window by setting its 'Left' position.
 divs[1] = new ScrDiv('contentBar', '536', '120', '6', '260', 1);

 // DRAGGABLE THUMB: Don't pass 'Y' or 'Height' settings, these are set automatically.
 // Visibility=1, so this will hide when scroller content is smaller than the scroller area.
 divs[2] = new ScrDiv('contentThumb', '536', '', '7', '', 1);

 // And after that, you can put in the IDs of any other divs you want to position/size.
 // These are the up and down arrow divs, positioned on resize accordingly...
 divs[3] = new ScrDiv('contentUpArrows', '529', '90', '50', '50', 1);
 divs[4] = new ScrDiv('contentDownArrows', '529', '390', '50', '50', 1);



 // OPTIONAL SETTINGS: Uncomment these to further customise the script if you want.
 // They're all properties of this scroller object, except the 'page' object which is global.
 //
 // For a "floating" effect... set to a decimal number between 0 and 1 for 'sticky' scrolling,
 // where you drag the scroller thumb and the content chases it to the new position.
 //stick = 0.25;
 //
 // You can set scroller padding at the top and bottom of loaded files like this:
 //padTop = 100;
 //padBot = 50;
 // If your web host sticks banner ads at the top of every page you load, you could always
 // declare 'padTop' to be slightly negative... don't say you heard it from me... :)
 //
 // Other useful optional properties: manual thumb height control. Defaults are:
 //minThmHeight = 20;
 //maxThmHeight = 9999;
 // These might be useful if you want to use a fixed-size image as your scrollbar thumb.
 //
 // The page object mentioned above can have minimum sizes set. By default, the winW() and winH()
 // functions just return the window area, but you can set minima like so:
 page.minW = 160;
 page.minH = 805;
 // I highly recommend doing this otherwise interesting crashes can result when the window sizes
 // too small and objects start to overlap and get negative heights etc.
 //
 // XFrame behaviour: This script will set the current URI bookmark to something like this as
 // you load files: #frames(content=file.html). This allows users to bookmark files within the
 // scroller(s) in the page. To disable this behaviour, uncomment this:
 //noXFrame = true;


 // Next you can assign scroller events. They are 'onbeforeload', 'onload', 'onscroll', 'onsetup',
 // 'onlayout', 'onthumbdown' and 'onthumbup'. The load events fire whenever a file is loaded into
 // the scroller, and the thumb events whenever you start or stop dragging the thumb. The scroll
 // event fires when you scroll or drag, the setup event fires when the scroller is initialised
 // but hasn't loaded its first file, and the layout event fires whenever the layout function is
 // called (on load completion and window resize).
 //   I've only provided one here, to hide the example loading message in the page below onload.
 // Feel free to add others to highlight the thumb, animate things, etc. etc... if you want to.

 onload = function() { var lm = getSty('loadMessage'); if (lm) lm.visibility = 'hidden'; }
}





// *** SCROLLING BY MOUSEWHEEL HANDLER - delete if you want to restore normal mousewheeling ***

var mwHandler = function(evt)
{
 evt=evt?evt:window.event;
 // You have to manually specify a scroller name in here (like 'content').
 if (evt.wheelDelta) content.scrollBy(evt.wheelDelta / (window.opera ? 3 : -3));
 else if (evt.detail) content.scrollBy(evt.detail * 12);
 return false;
};
if (window.addEventListener && !window.opera)
 window.addEventListener('DOMMouseScroll', mwHandler, false);
else window.onmousewheel = document.onmousewheel = mwHandler;


// *** SCROLLING BY KEYPRESS HANDLER - delete this too if you want ***

// This will capture keypresses and scroll up/down depending on the key code.
// You must manually specify a scroller name here ('content'), as only one can respond to keys.
function scrKeyDown(evt) { with (content)
{
 if (!loaded) return;

 // Find the correct event object and property.
 var evt = evt?evt:window.event;
 var key = evt.keyCode?evt.keyCode:(evt.charCode?evt.charCode:evt.which);

 //alert(key);
 // Depending on key press (capital || lowercase || function key), scroll div.
 // Uncomment the above 'alert(key)' line to figure out your own keycodes.
 if (key==84 || key==116 || key==36) scrollTo(0);         // 'T', 't' or 'Home'
 if (key==83 || key==115 || key==33) scrollBy(0-cHeight); // 'S', 's' or 'PgUp'
 if (key==65 || key==97  || key==38) scrollBy(-10);       // 'A', 'a' or 'Up'
 if (key==90 || key==122 || key==40) scrollBy(10);        // 'Z', 'z' or 'Down'
 if (key==88 || key==120 || key==34) scrollBy(cHeight);   // 'X', 'x' or 'PgDn'
 if (key==66 || key==98  || key==35) scrollTo(divHeight); // 'B', 'b' or 'End'
}};

// Capture key presses.
if (isIE && !isOp) document.onkeydown = scrKeyDown;
else
{
 if (isNS4) document.captureEvents(Event.KEYPRESS);
 document.onkeypress = scrKeyDown;
}