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
Inlcude the DynLayer and Scroll2 source code:
<script language="Javascript" SRC="../dynapi/dynlayer.js"></script> <script language="Javascript" SRC="../dynapi/scroll2.js"></script>
Below is basically how you'll set up the script. The mouse event code should be just as I have below. The ScrollTestActive() method will fix a problem that plagued the previous Scroll Object where text on the page would be selected while you scroll up and down.
onload = init function init() { // initialize mouse events document.onmousedown = mouseDown document.onmousemove = mouseMove document.onmouseup = mouseUp if (is.ns) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP) } function mouseDown(e) { if (is.ns && e.target!=document) routeEvent(e) if (ScrollTestActive()) return false // other mouseDown code return true } function mouseMove(e) { if (is.ns && e.target!=document) routeEvent(e) if (ScrollTestActive()) return false // other mouseMove code return true } function mouseUp(e) { if (is.ns && e.target!=document) routeEvent(e) // other mouseUp code return true } 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.
Example: demo-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: demo-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: demo-external.html [source] sources of external pages: text1.html text2.html text3.html
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: demo-nonbuffer.html [source] source of external page: text-nonbuffer.html
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: demo-ext-multi.html [source] source of external page: text-ext-multi.html
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: demo-frames.html
sources of external pages involved:
demo-frames.html (frameset)
demo-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: demo-frames-nonbuffer.html
sources of external pages involved:
demo-frames-nonbuffer.html (frameset)
demo-frames-nonbuffer-page.html (bottom frame with scroll)
text-frames-nonbuffer.html (external page)
Home | Next Lesson: List Object |