ScrollList Object

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.

Creating a ScrollList

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>

Source Code

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
copyright 1998 Dan Steinman