Scroll2 - Usage and Examples

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)

Scroll2

Home Next Lesson: List Object
copyright 1998 Dan Steinman