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>
You can download the scroll code from scroll.js or view the Source Code.
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('objectName',nestref,x,y,width,height)
Note:
Examples:
myscroll1 = new Scroll('myscroll1',null,50,30,350,220) // not nested
myscroll2 = new Scroll('myscroll2','nestDiv',null,null,350,220) // nested inside 'nestDiv' and relatively positioned
After you've initialized your scroll object, you can define all the customizations that you want. 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.
After you've initialized the scroll object and set the options for customizing it you have to build the object. The build() method finalizes your settings and generates all the CSS and associated DIV tags that are necessary to display the scroll.
objectName = new Scroll('objectName',nestref,x,y,width,height)
// customize methods go here
objectName.build()
The build() method will automatically document.write() the necessary CSS. But it will not write the DIV tags. It was necessary to separate the writing of the CSS from the DIV's to avoid layout problems and allow you to nest the scroll inside other layers to your liking.
This means you must do a separate document.write()'s to display the DIV tags. You can do this anywhere in the BODY of your document. I have incorporated 2 different ways to do this depending on whether you want the content of the scroll to be a separate HTML file (external), or to be in the same page (inline).
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.
Note: I've changed it so that you must specifically state the name of the scroll that it is being loaded in. In the last version I did not do this, but it occasionaly caused problems the first time you view a page with a scroll within Netscape. So you must do it this way from now on:
<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: Creating and Destroying Layers |