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.
The load method can be used at anytime to load a new page into the scroll window. Just use it as before:
myscroll.load(url)
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()
The reload() method will only re-read the contents of the if you set the META tags in the file so that it does not get cached. It can be done like this:
<META HTTP-EQUIV="expires" CONTENT="0"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
You can return the current URL shown in the scroll by using the url property (ie. myscroll.url)
View demo-methods.html for a navigation scroll example. View Source Code.
For IE there are 2 ways to initialize the scroll - buffered or non-buffered. This is set by using the usebuffer property.
objectName.usebuffer = false // by default it is true
This topic was originally discussed in the Changing Source lesson. If usebuffer is set to true (by default), the scroll will use an IFRAME only as a buffer for the contents of the scroll. The resulting content in the scroll window will be a mirror of the actual page. This avoids certain display problems such as transparency. However, this makes using javascript in the content pages rather difficult. If you want to do complex javascripts within the scroll window from external files, you may prefer to set the usebuffer property to false. This will make the scroll display the actual content html file - it shows the IFRAME directly. This may make it less of a burden for you to do more complex things in the content pages. It will by no means be easy because you will almost always have to to have separate commands because in IE the page will be in a frame, but in Netscape the page will not. I haven't done much testing on how things should work, so you will be on your own if you want to experiment with it.
External files for non-buffered scroll objects:
The content pages must follow a slightly different format.
if (parent.Scroll) parent.myscroll.writeContent(document)
An easy template to follow would look like this:
<HTML> <HEAD> <TITLE>Text 2</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- if (parent.Scroll) parent.myscroll.writeContent(document) //--> </SCRIPT> <STYLE TYPE="text/css"> <!-- CSS Styles Go Here --> </STYLE> </HEAD> <BODY onLoad="if (parent.Scroll) parent.myscroll.activate()"> <DIV ID="content"> Content HTML Goes Here </DIV> </BODY> </HTML>
View demo-nonbuffer.html for a simple example showing a non-buffered scroll. View Source Code
Layers in Inline Scrolls:
If you plan on working with Layer layers inside of a Scroll you should be aware of what layers are actually involved,
Hierarchy of the Scroll Object to Content Layers:
For each scroll that you create make a new index, the first scroll you make will be named Scroll0, the next is Scroll1 and so on.
Any layers inside of a scroll Object will be triple nested. To initialize a layer when you're using the inline scroll is easy because the latest DynLayer will already know the layer's heirarchy. Just initialize the layer by it's ID:
mysublayer = new DynLayer("mysublayerLyr') (mysublayerLyr is inside the scroll)
If name your layer with a 'Div' extension, the DynLayerInit() function will automatically assign a DynLayer to it.
View demo-sublayers-inline.html for an inline sublayer example. View Source Code.
Layers in External Scrolls:
Using layers in external files is a different story. It relates to how I built the DynLayer. The DynLayerInit() function sniffs through all the layers in the document and manually assigns DynLayers to layers with a 'Div', and prepares all the nestref parameters for use when manually assigning new DynLayers. However, this only occurs for layers that are currently in the document hierarchy.
When you load in pages from an external file, you are incorporating new layers into the page that weren't in the original hierarchy. Therefore any layers that even have a 'Div' extension will not be automatically be found. To initialize these layers you have 2 options.
Option 1: Recall the DynLayerInit() function
This optional is the easy solution. When you recall the DynLayerInit() function it will incorporate the new layers introduced and automatically assign them if named with 'Div'.
function setSubLayers() {
DynLayerInit()
}
Option 2: Manually assign the DynLayers
A faster, but slightly more annoying way to assign the sublayers is to send the DynLayer() constructor the necessary information to initialize it, in other words, send the nestref parameter to it.
As I showed before, the Scroll has it's own heirarchy of layers that you must be aware of. However, a built in property in the Scroll Object will make this easier. The contentRef parameter of the Scroll will return the nestref parameter that you use to intialize any layers inside it:
mysublayer = new DynLayer('mysublayerLyr',myscroll.contentRef)
View demo-sublayers-external.html for an external sublayer example. View Source Code.
Definining CSS for External Buffered Layers:
One of the disadvantages of using a buffered scroll (default) is that in IE it only tranfers the HTML in the BODY of the document. It does not transfer any CSS if you define them in the STYLE tag. So you have 2 choices:
1. Define your CSS in the main document
2. Define your CSS using inline STYLE's. Remember back in the Nesting Layers lesson where I stopped using inline styles. The reason was that it causes conflics in Netscape when you try to nest layers more than once. So if you don't need more than one set of nested layers, this is a feasible option, and it does work.
In either case, once the layers are displaying you should be able to target them just as you would if they were inline. The only trick is that you have to call a separate function from the external files which initializes the the layer. The code in that example will illustrate this.
Layers in External Non-Buffered Scrolls: (how about that for some DHTML vocabulary)
In this case, there is no difference for Netscape. But in IE the content is in a Frame. This is primary reason that I incorporated a the frame parameter into the DynLayer. This is so that you can target Layers that are located in another frame. In this case you absolutely must manually define a DynLayer - DynLayerInit() will not find it automatically.
if (ie4) objectName = new DynLayer(id,nestref,iframe)
Take a look at demo-sublayers-nonbuffer.html for an non-buffered example. View Source Code.
In general, it is not feasible to even bother unless you go with a non-buffered scroll.
Making JavaScript calls to the main scroll document:
If you want to call a function in the main document, for example if you want to have a link inside the content page that loads a new page, you will have to call the scroll object using "parent". This is because in IE the page is in a frame - using parent will target the top-most frame, the one with the scroll object. This will also work for Netscape.
<A HREF="javascript:parent.myscroll.load('newpage.html')">load page</A>
Making JavaScript calls to in the content page:
First off, if you call the function with a link you can't use
<HREF="javascript:functionName()">link</A>
Instead you should use:
<A HREF="javascript://" onClick="functionName()">link</A>
Now, if the function needs to gain access to elements in the content page, for example to submit a form, you need to know the document reference to those elements. You would have to target the form according to it's true heirarchy for Netscape
if (is.ns) document.Scroll0.document.Scroll0TextC.document.Scroll0TextT.document.yourform
A sneaky way around this is to pass the document object to that function. Then use that document to work with the elements of the page. Again this works in both Netscape and IE so it is the best solution to use.
Example function:
function submitForm(doc) {
doc.myform.submit()
}
The HTML to call that function would be this:
<A HREF="javascript://" onClick="submitForm(document)">submit</A>
View demo-javascript.html for an example which uses JavaScript in the content page. The source code for that page is nothing new, but take a look at the source code to the content page (text-javascript.html) - that's where these tricks occur.
You can easily have multiple scrolls in the same page. This is made much easier with this new version of the Scroll.
View demo-frames.html for a multiple Scroll example that communcate with eachother. View Source Code.
With the changes I made to the Scroll object, and DynLayer, making a nested Scroll (a scroll within another scroll) is simple. Take a look at the code for the following example to see how it is done.
However there is still one bug in Netsape that I haven't been able to figure out. The demo below will work, but only the first time you view the page. If you reload the page, it only draws the scrollbar part for the last Scroll. If you go back, and hit the link again it works again... aarrrggg!!
View demo-nestedscroll.html for a nested Scroll example. View Source Code.
| Home | Next Lesson: List Object |