/***************** Vertical Sroller You set the width and height of the layers inside the style tag, you only have to change the thumbnaillistcontainer, Remember to set the clip the same as the width and height. You can remove the layerScrollUp and layerScrollDown layers if you want. This script should also work if you make the thumbnaillistcontainer position:relative. Then you should be able to place this inside a table or something. Just remember that Netscape crash very easily with relative positioned divs and tables. Remember to include global.js! Updated with a fix for error if moving over layer before pageload. ****************/ MIN_DELAY = 1; MAX_DELAY = 30; //If you want it to move faster you can set this lower, it's the timeout: var speed = MAX_DELAY; //Sets variables to keep track of what's happening var loop; var timer = null; function speedMax(){ speed = MIN_DELAY } function speedMin(){ speed = MAX_DELAY } //Object constructor function createScrollerObject(obj,nest){ nest=(!nest) ? "":'document.'+nest+'.'; // Object porperties this.el=!document.getElementById&&document.all?document.all[obj]:document.getElementById?document.getElementById(obj):document.layers?eval(nest+'document.'+obj):0; this.css=!document.getElementById&&document.all?document.all[obj].style:document.getElementById?document.getElementById(obj).style:document.layers?eval(nest+'document.'+obj):0; this.scrollHeight=document.layers?this.css.document.height:this.el.offsetHeight; this.clipHeight=document.layers?this.css.clip.height:this.el.offsetHeight; this.x=0; this.y=0; // Object methods this.up=goUp; this.down=goDown; this.moveIt=moveIt; this.obj = obj + "Object"; eval(this.obj + "=this"); return this } // A unit of measure that will be added when setting the position or size of a layer. var px = setUnitMeasure(); // function setUnitMeasure() declared in global.js function moveIt(x,y){ this.x = x; this.y = y; this.css.left = this.x+px; this.css.top = this.y+px } //Makes the object go up function goDown(move){ // if (this.y>-this.scrollHeight+oScrollerContainer.clipHeight){ if (this.y>-this.scrollHeight){ this.moveIt(0,this.y-move) } else { this.moveIt(0,oScrollerContainer.clipHeight) } if (loop) timer = setTimeout(this.obj+".down("+move+")",speed) } //Makes the object go down function goUp(move){ //if (this.y<0){ if (this.y0) oScrollerContent.down(speed) else oScrollerContent.up(speed) } } //Stops the scrolling (called on mouseout) function stopScroll(){ loop = false; if (timer) clearTimeout(timer) } //Makes the Scroller object var scrollContentLoaded = false function Scroller_constructor(){ oScrollerContainer = new createScrollerObject('thumbnaillistcontainer'); oScrollerContent = new createScrollerObject('thumbnaillist','thumbnaillistcontainer'); oScrollerContent.moveIt(0,oScrollerContainer.clipHeight); oScrollerContainer.css.visibility = "visible"; scrollContentLoaded = true } //Call the init on page load if the browser is ok... //if (oBrowser.isBrowserOK) onload = Scroller_constructor function initSlideShow() { //if (oBrowser.isBrowserOK) { Scroller_constructor(); startScroll(2) //} } /*************** Multiple Scripts If you have two or more scripts that use the onload event, probably only one will run (the last one). Here is a solution for starting multiple scripts onload: 1. Delete or comment out all the onload assignments, onload=initScroll and things like that. 2. Put the onload assignments in the body tag like in this example, note that they must have braces (). Example: **************/