To implement the Scroll Object is pretty straight-forward and very similar to the other objects in this tutorial. What I'd recommend is to have all the code for the object in it's own .js file and call that file into any pages that use it. Since the Scroll Object uses the DynLayer Object you must also include a js file for it:
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="scroll.js"></SCRIPT>
Initialization:
Next you must create a new instance of the object (note the nestref parameter was not present before, this replaces the need for the setNestInfo() method):
objectName = new Scroll(x,y,width,height)
Examples:
myscroll = new Scroll(50,30,350,220) myscroll = new Scroll(null,null,350,220) // relatively positioned
After you've initialized your scroll object, you can define all the customizations that you want (images). This is done by calling various methods or assiging new properties. These will be explained in more detail in the next sections. So for now I will skip that part. If you don't do any customizations the object will assume a set of defaults that I've chosen.
To display a scroll is like every one of my Object. You do the sequence of build(), write the CSS, write the DIV, and then activate() the object.
objectName = new Scroll(x,y,width,height) // customize methods go here objectName.build() writeCSS ( objectName.css )
External Content:
If you want to use an external file all you need to do to display the DIV's is to document.write() the div property which is one big String containing all the DIV's one after another.
<BODY> <SCRIPT LANGUAGE="JavaScript"> document.write(objectName.div) </SCRIPT> </BODY>
Inline Content:
Using inline content is desirable when the contents of the scroll do not need to be interchanged with any other content. Also using this way the entire page can be generated from a server-side script using Perl or C, or possibly from a server-side database such as SQL or Domino.
To address this need, I've included 2 separate properties that you must write to the document: divStart and divEnd. Between the document.write()'s is where you insert the contents of the scroll:
<BODY> <SCRIPT LANGUAGE="JavaScript"> document.write(objectName.divStart) </SCRIPT> Content goes here <SCRIPT LANGUAGE="JavaScript"> document.write(objectName.divEnd) </SCRIPT> </BODY>
Immediately after the scroll layers have been written to the browser you will see the square frame where the contents are.
If you use the "inline" technique you'll also see all the contents there. To activate the scroll bar (to allow for contents to be scrolled) you must call the activate() method in your init() function:
function init() {
myscroll.activate()
}
This only has to be done when using the inline technique. Once you have called the activate() method with an inline scroll, everything should work immediately. But if you want to load an external file into the scroll, you must instead call the load() method and pass the url of the page:
function init() {
myscroll.load('file.html')
}
Either the activate() or load() methods can be called after all the layers have been written or in the init() function, whichever you prefer.
Setting Up External Files:
When using external files, you must also insert one line of javascript into those files to call the activate() method.
<BODY onLoad="if (parent.Scroll) parent.myscroll.activate()">
Remember if you name your scroll object to something else you must also change that line.
Demos:
| Filename | Souce Code | Description |
| demo-external.html | code | external content, absolutely positioned |
| demo-nested.html | code | external content, absolutely positioned, nested within another DIV |
| demo-relative.html | code | external content, relatively positioned |
| demo-inline.html | code | inline content, absolutely positioned |
Also view the source to text1.html (the external file used in those examples).
| Home | Next Lesson: List Object |