The ScrollList is a very simple widget that embeds the List object into a Scroll object. It has no unique functionality of it's own, but everything that's available to each of the List and Scroll are available to this object as well.
You must include all 4 of dynlayer.js, list.js, scroll.js, and scrolllist.js:
<script language="JavaScript" src="dynlayer.js"></script> <script language="JavaScript" src="list.js"></script> <script language="JavaScript" src="scroll.js"></script> <script language="JavaScript" src="scrolllist.js"></script>
Define an instance of the ScrollList:
objectName = ScrollList(x,y,width,height,scrollBarWidth,scrollBorder)
The List and Scroll objects are defined as properties of the ScrollList:
objectName.list.propertyName objectName.list.methodName() and objectName.scroll.propertyName objectName.scroll.methodName()
So to add items to the List is:
objectName.list.add(value,text ...)
Or to set images for the Scroll is:
myscrlist.scroll.setImages('scroll-img-box0.gif','scroll-img-box1.gif','scroll-img-up0.gif','scroll-img-up1.gif','scroll-img-dn0.gif','scroll-img-dn1.gif','scroll-img-bar.gif','../scroll/')
And the build(), write CSS, write DIV, activate() sequence applies here as well. You get the idea. Here's the example that I made:
<html> <head> <title>The Dynamic Duo - ScrollList Object Demo</title> <script language="JavaScript" src="../dynlayer/dynlayer.js"></script> <script language="JavaScript" src="../list/list.js"></script> <script language="JavaScript" src="../scroll/scroll.js"></script> <script language="JavaScript" src="scrolllist.js"></script> <script language="JavaScript"> ns4 = (document.layers)? true:false ie4 = (document.all)? true:false function init() { myscrlist.activate() } myscrlist = new ScrollList(50,50,200,80) myscrlist.scroll.setDimensions(0,0,15,myscrlist.scroll.h,14,15,29,1) myscrlist.scroll.clipImages = false myscrlist.scroll.setImages('scroll-img-box0.gif','scroll-img-box1.gif','scroll-img-up0.gif','scroll-img-up1.gif','scroll-img-dn0.gif','scroll-img-dn1.gif','scroll-img-bar.gif','../scroll/') myscrlist.list.add(0,' item 0') myscrlist.list.add(1,' item 1') myscrlist.list.add(2,' item 2') myscrlist.list.add(3,' item 3') myscrlist.list.add(4,' item 4') myscrlist.list.add(5,' item 5') myscrlist.list.add(6,' item 6') myscrlist.list.add(7,' item 7') myscrlist.list.add(8,' item 8') myscrlist.list.add(9,' item 9') myscrlist.list.add(10,' item 10') myscrlist.list.add(11,' item 11') myscrlist.list.add(12,' item 12') myscrlist.list.add(13,' item 13') myscrlist.list.add(14,' item 14') // myscrlist.list.onSelect = ListRedirect // do this to auto-redirect based on list.value myscrlist.build() writeCSS( myscrlist.css ) </script> </head> <body bgcolor="#ffffff" onLoad="init()"> <script language="JavaScript"> document.write(myscrlist.div) </script> </body> </html>
You can download the code from scrolllist.js
// ScrollList Object // Copyright 1999 Dan Steinman // Available at the Dynamic Duo (http://www.dansteinman.com/dynduo/) // Feb 7, 1999. // In order to use this code you must keep this disclaimer function ScrollList(x,y,width,height) { this.name = "ScrollList"+(ScrollList.count++) this.x = x this.y = y this.w = width this.h = height this.list = new List(0,0,this.w) this.scroll = new Scroll(0,0,this.w,this.h) this.scroll.setMargins(0,0,0,0) this.obj = this.name + "ScrollListObject" eval(this.obj + "=this") this.build = ScrollListBuild this.activate = ScrollListActivate } function ScrollListBuild(write) { this.scroll.build(false) this.list.build() this.css = css(this.name,this.x,this.y)+ this.scroll.css+ this.list.css this.div = '<div id="'+this.name+'">\n'+ this.scroll.divStart+ this.list.div+ this.scroll.divEnd+ '</div>' } function ScrollListActivate() { this.lyr = new DynLayer(this.name) this.list.activate() this.scroll.setHeight(this.list.h) } ScrollList.count = 0
View scrolllist1.html for a ScrollList example. View Source Code
Home | Next Lesson: MenuList Object |