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>
View the source code section to get the code to put into that file. Remember that you must include the file in your document before any other javascript that uses the scroll object.
Initialization:
Next you must create a new instance of the object:
objectName = new Scroll('objectName',x,y,width,height)
The objectName in both cases must be exactly the same.
Example:
myscroll = new Scroll('myscroll',50,30,350,220)
After you've initialized your scroll object, you can define all the customizations that you want. These customization 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',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. Using the "inline" technique you'll also see all the contents there. But noticably absent is the scrollbar itself and the ability to scroll the content in any way. This is because the scroll must be activated in order for anything to work and you have to send the mouse coordinates from the mouseDown, mouseMove, and mouseUp events to each scroll object that you have.
Activating External Content Scroll Objects:
Since the content is from another HTML file you have to load that file using the load() method:
objectName.load('filename.html')
This can be done after all the layers have been written or in the init() function, whichever you prefer.
The load method will automatically activate the scroll object, so the only other code necessary is for sending the mouse coordinates to the object. I've included mouseDown(), mouseMove(), and mouseUp() methods into the scroll object which makes this job pretty easy:
function init() {
objectName.load('filename.html')
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
function mouseDown(e) {
if ((ns4 && e.which == 1) || ie4) {
if (ns4) {var x=e.pageX; var y=e.pageY}
if (ie4) {var x=event.x; var y=event.y+document.body.scrollTop}
objectName.mouseDown(x,y)
if (objectName.active || objectName.arrow.active) return false
}
}
function mouseMove(e) {
if (ns4) {var x=e.pageX; var y=e.pageY}
if (ie4) {var x=event.x; var y=event.y+document.body.scrollTop}
objectName.mouseMove(x,y)
if (objectName.active || objectName.arrow.active) return false
}
function mouseUp(e) {
objectName.mouseUp()
}
You must return false in the mouseDown() and mouseMove() to prevent text selection problems, and to make it work on the Macintosh.
And we're done this script - it's that easy. But there's one more thing to discuss before loading up the scroll...
Setting Up External Files:
There is one line of JavaScript that must be included in any external files that you use. This was due to a technology barrier that I could not get around. The scroll object is not actually activated until its content file is completed loading. Now to find when the external file is loaded from within the main script is possible with IE 4.0, however I wasn't successful in finding a way to do it in Netscape. So I've still kept the system from my previous Scrollbar script which is to put a BODY onLoad in the external file which calls back to the parent page which updates everything.
The onLoad hander should be set up in this manner:
<BODY onLoad="if (parent.Scroll && (document.layers||document.all)) parent.ScrollRefresh()">
This way, the file will still load fine independently (without being in a scroll) and will work fine in older browsers. Notice the handler calls the ScrollRefresh() function. This function will determine which scroll object to activate.
View scroll-1external.html for an external content scroll example. View Source Code.
Activating Inline Content Scroll Objects:
For inline content is almost exactly the same. The only difference is that in this case there is no external file to load, so to activate the scroll you must manually call the activate() method after the scroll layers have been written (or in the init() function):
function init() {
objectName.activate()
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (ns4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
View scroll-2inline.html for an inline content scroll example. View Source Code.
| Home | Next Lesson: Creating and Destroying Layers |