Scroll Object [Advanced Functionality]

In this section I'll explain some of the more complex situations that you can get into if you plan on using the scroll extensively.

History System

I incorporated a simple history system into the scroll object so that you can make back, forward, and reload buttons. Using these commands you can pretty much mimic the functionality of a basic web browser. This is very useful if you plan on using the scroll object as the basis of an entire website, or as the front-end to a server-side application (...yes that type of stuff is possible with this code).

The methods for navigating the history are straight-forward:

objectName.back()
objectName.forward()
objectName.reload()

View scroll-4navigation.html for a navigation scroll example. View Source Code.

Nesting the Scroll

The entire scroll can be nesting in a layer itself. When you do, you have to pass the object some information about it's parent layer.

setNestInfo() Method:

Usage:

objectName.setNestInfo(nestref,x,y)

The nestref, is the same as in the Dynlayer. If it's nested only once you insert the name of the layer (in quotes), if it's nested several times you insert the names of the layers (according to their hierarchy) separated by .document. (eg 'parent1.document.parent2'). The x and y values are absolute left and top values of the parent layer(s) - if it's nested once, use the left and top values, if it's nested several times you use the total of all the left and top values.

When you write the div property to the BODY you just insert that piece of JavaScript within the parent layer:

<DIV ID="parentLayerDiv">

	<SCRIPT LANGUAGE="JavaScript">
	document.write(objectName.div)
	</SCRIPT>

</DIV>

View scroll-5nested.html for a nested scroll example. View Source Code.

Using Layers Inside The Scroll (Sub-Layers)

Since the scroll uses IFRAME as a buffer, it only transfers the body content from the HTML file. It does not transfer any CSS or JavaScript information. Therefore if you want to use Dynamic HTML inside the content file it becomes a bit of task. Generally it's easiest to put all the CSS and JavaScript in the main document. For example a layer's CSS will be defined in the main document, but the actual DIV's still remain in the content file. Obviously this solution will become very cumbersome if you plan on having a lot of content pages that are all fairly complex, so perhaps you'll instead want to have page templates using the scroll. Use your judgement to determine what's the best route to go with.

Accessing Sub-Layers with JavaScript:

It is possible to initialize any sub-layers as Dynamic Layers and therefore be able to do just about anything with them as you normally would. The only trick is the loading sequence of the files. The sub-layers can only be accessed after the content page is fully loaded. This works fine in Netscape, however I noticed a painfully annoying problem with IE. IE tends to execute a BODY onLoad handler a tad before the page is totally loaded - which is obviously a problem. What I came up with is to do a double-check to see if a particular layer exists or not before initializing it as a DynLayer.

I'm not going explain how to do it any further, but you can follow along with the example to see how I set it up:

View scroll-6sublayers.html for a sub-layer example. View Source Code. You should also take a look at the content file text-sublayers.html to see how that's set up.

Sub-Scrolls

To prove that it could be done I made a page that has a scroll within a scroll. Take a look at the source to the demo if you'd like to see how to do it:

View scroll-7subscroll.html for a sub-layer example. View Source Code. The content file is text-subscroll.html.

Various Other Properties and Methods:

Property	Description
visibility	sets the visibility ("hidden","visible") - must be done before build()
zIndex	sets the zIndex (integer) - must be done before build()
slideInc	sets the number of pixels the content will scroll each increment
slideSpeed	sets the repetition speed of the scroll
ref	returns the nested heirarchy of the content layer
refX	returns the absolute left co-ordinate of the content layer
refY	returns the absolute top co-ordinate of the content layer

Scroll Object:

• Implementation
• Customization
• Advanced Functionality
• Source Code

Home	Next Lesson: Creating and Destroying Layers