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>
One thing that may help when dealing with layers in a non-buffered scroll is that I've included an alternative DynLayer that targets layers within the scroll. I may release it as an update to the DynLayer. Using this version of the DynLayer you can send the name of the IFRAME:
objectName = new ScrollDynLayer(id,nestref,iframe)
I will be more thoroughly testing this technique in the future but for now I've left it as an experimental addition to the DynLayer.
View demo-nonbuffer.html for a simple example showing a non-buffered scroll. View Source Code
Layers in Inline Scrolls:
The inline scroll is pretty straight forward because you're only dealing with layers in the same document. To target a layer inside the scroll window using the DynLayer all you need to know is the layer-hierarchy (nestref) to the layer which contains the contents. That hierarchy looks like this (if your scroll is named "myscroll"):
So to initialize a layer named "mylayer" inside the scroll you can use:
mylayer = new DynLayer('mylayerDiv','myscrollScroll.document.myscrollTextC.document.myscrollTextT')
But to save you some time and code I've built a property named contentRef which obtains the nestref for you. So you can do the same thing using:
mylayer = new DynLayer('mylayerDiv',myscroll.contentRef)
The contentRef property will also reflect the nestref properly when the scroll itself is nested.
View demo-sublayers-inline.html for an inline sublayer example. View Source Code.
Layers in External Buffered Scrolls:
One of the disadvantages of using a buffered scroll 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 (the one with the scroll)
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. View demo-sublayers-external.html for an external sublayer example. View Source Code.
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. Therefore to reference the layer in IE will be totally different. You need a way to target the layer inside the Frame, and for this purpose I wrote an alternative Dynlayer that address this situation. It is included with the Scroll object source code because it is used internally by the object. To make it brief, you use it in this manner:
objectName = new ScrollDynLayer(id,nestref,iframe)
Take a look at demo-sublayers-nonbuffer.html for an 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. A sneaky way to do this is by passing 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, the only thing you should do differently is have each of the build() methods in separate Script tags. If you don't do this, and try the scroll with Netscape 4.0 or 4.01 the page will hang. For a great demo of the scroll functionality view demo-frames.html, also view the source code. That demo, if you haven't seen it already shows how you can mimic frames with the scroll object.
| Home | Next Lesson: Creating and Destroying Layers |