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:


So to add items to the List is:

objectName.list.add(value,text ...)

Or to set images for the Scroll is:


And the build(), write CSS, write DIV, activate() sequence applies here as well. You get the idea. Here's the example that I made:

<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 = new ScrollList(50,50,200,80)
myscrlist.scroll.clipImages = false

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



<body bgcolor="#ffffff" onLoad="init()">

<script language="JavaScript">


View scrolllist1.html for a ScrollList example. View Source Code

View scrolllist2.html for a ScrollList example using version 2 of the Scroll Object. View Source Code

Source Code

Download: scrolllist.js
View Source: scrolllist.js

Home Next Lesson: MenuList Object
copyright 1998 Dan Steinman

Casa de Bender