DynamicScroller - Multiple

Multiple Dynamic Scroller: IE4 Nav4 NS6 01/20/02
Created by: Ron Grafe
Version 1.0
Version Date: 1/20/2002
Website: GDevResources.com

Several visitors to this site have requested to put multiple instances of my dynamic scroller on one page. I have created the code for this below. This is the same dynamic scroller (you at the control), but you can place as many as you like in the page and each can be independantly controlled.

Step 1: Select, Copy and paste the following code into the HEAD section your HTML Page.

SELECT ALL

iens6=document.all||document.getElementById
ns4=document.layers

var scrollspeed = 40

var step=1
var contentobj
var contentheight
var theobj
var theheight
var thename
var thecontainer
var theScroller
var timerup
var timerdown
var timerupname
var timerdownname

function director(incomingScroller,theFunction) {
stopall()
theScroller=incomingScroller
theobj = "contentobj"+theScroller
theheight = "contentheight"+theScroller
if(iens6){
	thename = "content"+theScroller
	theobj=document.getElementById? document.getElementById(thename):document.all.thename
	theheight=theobj.offsetHeight
	if (document.getElementById&&!document.all){
   		step=5
	}
}else if(ns4){
	thename = "nscontent"+theScroller
	thecontainer = "nscontainer"+theScroller
	theobj = eval("document."+thecontainer+".document."+thename)
	theheight=theobj.clip.height
}
	if(theFunction=="sd") {
		timerdown="window.down"+theScroller
		timerdownname="down"+theScroller
		scrolldown()
	}else if(theFunction=="su") {
		timerup="window.up"+theScroller
		timerupname="up"+theScroller
		scrollup()
	}else if(theFunction=="sa") {
		stopall()
	}else if(theFunction=="st") {
		shifttotop()
	}
}

function scrolldown() {
	if(iens6&&parseInt(theobj.style.top)>=(theheight*(-1)+100)){
		theobj.style.top=parseInt(theobj.style.top)-step
	}else if(ns4&&theobj.top>=(theheight*(-1)+100)){
		theobj.top-=step
	}
	timerdownname = setTimeout("scrolldown()",scrollspeed)
}

function scrollup() {
	if(iens6&&parseInt(theobj.style.top)<=0){
		theobj.style.top=parseInt(theobj.style.top)+step
	}else if(ns4&&theobj.top<=0){ 
		theobj.top+=step
	}
	timerupname = setTimeout("scrollup()",scrollspeed)	
}

function stopall() {
	if(timerup){
		clearTimeout(timerupname)
	}
	if(timerdown){
		clearTimeout(timerdownname)
	}
}

function shifttotop(){
	stopall()
	if (iens6) {
		theobj.style.top=0
	}else{
		theobj.top=0
	}
}

</script>

Step 2:

Enter how many scrollers you would like -- I would like # of Scrollers, and then click
Select all the code below and copy it into the BODY section of your web page. Each scrollers code is between their respective "START SCROLLER #" and "END SCROLLER #" comment tags. To move the scrollers around just copy all the code between those tags and move them to wherever you like.

SELECT ALL

Step 3: Change the default scroller content to your scroller content (between the respective "INSERT SCROLLER # CONTENT HERE" and "END SCROLLER # CONTENT" comment tags).

<table width="155" cellpadding="0" cellspacing="1" border="1" bgcolor="#CCCCCC">
		<tr>
		<td width="20%" align="center" valign="bottom">
		<a href="Javascript:director(spaceholder,'sd')"><font face="times" size="2"><b>Down</b></font></a>
		</td>
		<td width="20%" align="center" valign="bottom">
		<a href="Javascript:director(spaceholder,'su')"><font face="times" size="2"><b>Up</b></font></a>
		</td>
		<td width="20%" align="center" valign="bottom">
		<a href="Javascript:director(spaceholder,'sa')"><font face="times" size="2"><b>Stop</b></font></a>
		</td>
		<td width="20%" align="center" valign="bottom">
		<a href="Javascript:director(spaceholder,'st')"><font face="times" size="2"><b>Top</b></font></a>
		</td>
		<td width="20%" align="center" valign="bottom">
		<a href="Javascript:selectspeed()"><img src="speedbutton.gif" alt="Set Scroll Speed" width="14" height="14" border="0" align="middle"></a>
		</td>
		</tr>	
</table>

<script language="JavaScript1.2">
if (iens6){
document.write('<div id="containerspaceholder" style="position:relative;width:155;height:160px;overflow:hidden;border:2px ridge white">')
document.write('<div id="contentspaceholder" style="position:relative;width:155;left:0;top:0">')
}
</script>
<ilayer name="nscontainerspaceholder" width=155 height=160 clip="0,0,155,160">
<layer name="nscontentspaceholder" width=155 height=160>

<font type="times" size="2" style="color:black">
<b>Web Site Design</b><br><hr>
<table><tr>
<td valign="top">•</td><td>Hints about Web Site Design from some of the top <a href="http://builder.cnet.com/webbuilding/0-3881-8-5069140-1.html" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">guru"s</font></a>...</td></tr>
<tr><td valign="top">•</td><td>Tag, Attribute, CSS, and Color reference <a href="http://builder.cnet.com/webbuilding/0-7530.html" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">charts</font></a>...</td></tr>
<tr><td valign="top">•</td><td>Introduction to Web Site <a href="http://www.wdvl.com/Authoring/HTML/Tutorial/toc.html" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">Design</font></a>...</td></tr>
<tr><td valign="top">•</td><td>Site <a href="http://www.wdvl.com/Location/Navigation/101/" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">Navigation</font></a>...</td></tr>
</table><br>
<b>HTML Tutorials</b><br><hr>
<table><tr>
<td valign="top">•</td><td>Introductory <a href="http://www.wdvl.com/Authoring/HTML/Intro/" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">HTML</font></a>...</td></tr>
<tr><td valign="top">•</td><td>Beginning HTML Tutorial Listing <a href="http://www.pageresource.com/html/hclist.htm" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">many topics</font></a>...</td></tr>
<tr><td valign="top">•</td><td>Advanced HTML Tutorial Listing <a href="http://www.pageresource.com/html/index6.htm" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">many topics</font></a>...</td></tr>
</table><br>
<b>Javascript Tutorials</b><br><hr>
<table><tr>
<td valign="top">•</td><td>Javascript and Browser Objects <a href="http://www.dannyg.com/javascript/quickref/index.html" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">Quick Reference</font></a>...</td></tr>
<tr><td valign="top">•</td><td>Introductory <a href="http://www.webdeveloper.com/javascript/javascript_js_tutorial.html" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">Javascript</font></a>...</td></tr>
<tr><td valign="top">•</td><td><a href="http://www.webdeveloper.com/javascript/javascript_html_tnt_cookies.html" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">Javascript and Cookies</font></a>...</td></tr>
<tr><td valign="top">•</td><td>Basic Javascript Tutorial Listing <a href="http://www.pageresource.com/jscript/index2.htm" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">many topics</font></a>...</td></tr>
<tr><td valign="top">•</td><td>Advanced Javascript Tutorial Listing <a href="http://www.pageresource.com/jscript/index6.htm" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">many topics</font></a>...</td></tr>
</table><br>
<b>DHTML Tutorials</b><br><hr>
<table><tr>
<td valign="top">•</td><td>Introductory <a href="http://www.wdvl.com/Authoring/DHTML/Intro/" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">DHTML</font></a>...</td></tr>
<tr><td valign="top">•</td><td><a href="http://www.pageresource.com/dhtml/indexcss.htm" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">Cascading Style Sheets</font></a>...</td></tr>
</table><br>
<b>Java Tutorials</b><br><hr>
<table><tr>
<td valign="top">•</td><td><a href="http://javaboutique.internet.com/tutorials/Thread0/" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">Java for Beginners</font></a>...</td></tr>
</table><br>
<b>Comprehensive Tutorials</b><br><hr>
<table><tr>
<td valign="top">•</td><td>A wide variety of Design, HTML, Java, and Javascript <br><a href="http://www.webdeveloper.com/tutorials.html" target="_blank" onmouseover="director(spaceholder,'sa')"><font style="color:blue">Tutorials</font></a>...</td></tr>
</table><br>
</font>

</layer></ilayer>

<br>