Now that all the image stuff is out of the way I can show you a few examples of how to use this object. Again I must repeat myself, if you didn't read the ScrollWindow lesson in particular you should do it now. I won't be going in to much detail here because most of how to use the scroll2 is basically just using the ScrollWindow.
Building and Displaying a Scroll
Include the DynLayer, MouseEvents, and Scroll2 source code:
<script language="Javascript" SRC="../dynapi/dynlayer.js"></script> <script language="Javascript" SRC="../dynapi/mouseevents.js"></script> <script language="Javascript" SRC="../dynapi/scroll2.js"></script>
Below is basically how you'll set up the script:
onload = init
function init() {
initMouseEvents()
}
myscroll = new Scroll(150,50,250,170)
myscroll.imgSet('metal/',16,16,37,-1,2,-1,2,1,1)
myscroll.build()
writeCSS (
myscroll.css
)
// in the body of the document
<script language="Javascript">
document.write(myscroll.div)
</script>
Inline Content
Inline Content is the simplest way to use the Scroll2. You just insert your contents into the same page. To do this you write the alternate divStart and divEnd values rather than just div.
<script language="Javascript"> document.write(myscroll.divStart) </script> My Content Goes here <script language="Javascript"> document.write(myscroll.divEnd) </script>
With inline content you must call the activate() method onLoad.
Example: scroll2-inline.html [source]
Multi-Block Inline Content
before build():
myobject.window.inlineBlocks = 4
In your inline content:
<script language="JavaScript"> document.write(myscroll.divStart) </script> <div id="ScrollWindow0Block0"> </div> <div id="ScrollWindow0Block1"> </div> <div id="ScrollWindow0Block2"> </div> <div id="ScrollWindow0Block3"> </div> <script language="JavaScript"> document.write(myscroll.divEnd) </script>
And call the Scroll2's showBlock() method instead of window.showBlock()
Example: scroll2-inline-multi.html [source]
External Content
Write the .div to the page, and use the load() method, or the window.load() method (does the same thing):
myscroll.load('mypage.html')
External pages must call the Scroll2's activate() method (activate the scroll after the content has been loaded).
<html>
<head>
<title>Text 1</title>
</head>
<body onLoad="if (parent.Scroll) parent.myscroll.activate()">
rest of content...
</body>
</html>
Example: scroll2-external.html [source]
Non-Buffered External Content
before build():
myobject.window.usebuffer = false
External page will look like this:
<html>
<head>
<title>Text 1</title>
<script language="JavaScript">
<!--
if (parent.Scroll) parent.myscroll.window.writeContent()
//-->
</script>
</head>
<body onLoad="if (parent.Scroll) parent.myscroll.activate()">
rest of content...
</body>
</html>
Example: scroll2-nobuffer.html [source]
Multi-Block External Content
before build():
myobject.window.inlineBlocks = 4
Load external page:
myobject.load('mypage.html')
In your external page:
<body onLoad="if (parent.Scroll) parent.myscroll.activate()"> <script language="JavaScript"> document.write(myscroll.divStart) </script> <div id="ScrollWindow0Block0"> </div> <div id="ScrollWindow0Block1"> </div> <div id="ScrollWindow0Block2"> </div> <div id="ScrollWindow0Block3"> </div> <script language="JavaScript"> document.write(myscroll.divEnd) </script>
And call the Scroll2's showBlock() method instead of window.showBlock()
Example: scroll2-external-multi.html [source]
External Content In Frames
Send frame name in constructor:
myscroll = new Scroll(150,50,250,170,'myframe')
External pages call the activate() in this manner:
<body onLoad="if (window.top.myframe.Scroll) window.top.myframe.myscroll.activate()">
Example: scroll2-frames.html [source]
sources of external pages involved:
scroll2-frames-page.html (bottom frame with scroll)
text-frames.html (external page)
Non-Buffered External Content In Frames
Send frame name in constructor:
myscroll = new Scroll(150,50,250,170,'myframe')
No buffer:
myscroll.window.usebuffer = false
External pages:
<html> <head> <title>Text 1</title> <script language="JavaScript"> <!-- if (window.top.myframe.Scroll) window.top.myframe.myscroll.window.writeContent(document) //--> </script> </head> <body onLoad="if (window.top.myframe.Scroll) window.top.myframe.myscroll.activate()"> <div id="content"> Content goes here </div> </body> </html>
Example: scroll2-frames-nobuffer.html [source]
sources of external pages involved:
scroll2-frames-nobuffer-page.html (bottom frame with scroll)
text-frames-nobuffer.html (external page)
| Home | Next Lesson: List Object |