GDev Resources.com - Dynamic Scroller

Top Navigation - Include

Home

Forums

Index

Terms

Developer Resources

DynamicScroller

Scripts

Javascripts
• Navigation
• Miscellaneous

DHTML
• Navigation
• Scrollers

Miscellaneous
Scripts-In-Action

MultiMedia

• Flash
• Music Loops

Recommends

• WebWiz Forums
• Macromedia HomeSite
• Jasc Paint Shop Pro
• Xara Products
• SWiSH

Shareware/Freeware

• Nonags
• Tucows
• ZDNet

Coding References

• ASCII Table
• CSS Property Table
• HTML Tag Attributes

Code Generators

• Cool Tools 1
• Cool Tools 2

Dynamic Scroller: IE4 Nav4 NS6 Updated 8/4/01
Created by: Ron Grafe
Version 1.0
Version Date: 5/15/2001

A scroller that allows you to manually control the scroll. You can set the scroll speed (3 settings), scroll down, scroll up, jump to the top, or stop the scroll at any time. When you place your cursor over a link in the scrollbox it will stop. You can add links within the scrolling text or format the text in any way you like using standard HTML tags. You can even add small graphics!

You can add multiple scrollers on one page. You can also set up the scroller to randomize images instead of having text. Each time you refresh the page the images are randomized. Check out the demo's below.

DEMO:  Single Scroller  ( get code )
DEMO:  Randomized Image Scroller  ( get code )
DEMO:  Multiple Scrollers  ( get code )

Single Scroller Wizard:  Single Scroller Wizard
Multi-Scroller Wizard:  Multiple Scroller Wizard

Single Scroller Code: Zip File or follow the instructions below..

Step 1: Select, Copy and paste the following code into your HTML Page wherever you want the scroller to be.

SELECT ALL

<table width="155" cellpadding="0" cellspacing="1" border="1" bgcolor="#FFFFCC">
		<tr>
		<td width="20%" align="center" valign="bottom">
		<a href="Javascript:scrolldown()"><font face="times" size="2"><b>Down</b></font></a>
		</td>
		<td width="20%" align="center" valign="bottom">
		<a href="Javascript:scrollup()"><font face="times" size="2"><b>Up</b></font></a>
		</td>
		<td width="20%" align="center" valign="bottom">
		<a href="Javascript:stopall()"><font face="times" size="2"><b>Stop</b></font></a>
		</td>
		<td width="20%" align="center" valign="bottom">
		<a href="Javascript:shifttotop()"><font face="times" size="2"><b>Top</b></font></a>
		</td>
		<td width="20%" align="center" valign="bottom">
		<a href="Javascript:selectspeed()"><font face="times" size="2"><b>Speed</b></font></a>
		</td>
		</tr>	
</table>
<script language="JavaScript1.2">
iens6=document.all||document.getElementById
ns4=document.layers

var scrollspeed = 40

if (iens6){
document.write('<div id="container" style="position:relative;width:155;height:160px;overflow:hidden;border:2px ridge white">')
document.write('<div id="content" style="position:relative;width:155;left:0;top:0">')
}
</script>
<ilayer name="nscontainer" width=155 height=160 clip="0,0,155,160">
<layer name="nscontent" 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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><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="stopall()"><font style="color:blue">Tutorials</font></a>...</td></tr>
</table><br>
</font>

</layer></ilayer>

function selectspeed() {
	var speed = prompt("What speed would you like to scroll? slow (s), medium (m) or fast (f)?","")
	if(speed=="s") {
		step=1
	}
	if(speed=="m") {
		step=3
	}
	if(speed=="f") {
		step=5
	}
}

function scrolldown() {
	if(window.scrolltimerup){
		clearTimeout(scrolltimerup)
	}
	if(iens6&&parseInt(contentobj.style.top)>=(contentheight*(-1)+100)){
		contentobj.style.top=parseInt(contentobj.style.top)-step
	}else if(ns4&&contentobj.top>=(contentheight*(-1)+100)){
		contentobj.top-=step
	}
	scrolltimerdown = setTimeout("scrolldown()",scrollspeed)
}

function scrollup() {
	if(window.scrolltimerdown){
		clearTimeout(scrolltimerdown)
	}
	if(iens6&&parseInt(contentobj.style.top)<=0){
		contentobj.style.top=parseInt(contentobj.style.top)+step
	}else if(ns4&&contentobj.top<=0){ 
		contentobj.top+=step
	}
	scrolltimerup = setTimeout("scrollup()",scrollspeed)	
}

function stopall() {
	if(window.scrolltimerup){
		clearTimeout(scrolltimerup)
	}
	if(window.scrolltimerdown){
		clearTimeout(scrolltimerdown)
	}
}

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

function getcontent_height(){
	if (iens6)
	contentheight=contentobj.offsetHeight
}
window.onload=getcontent_height

</script>

Once the above code is copied and pasted into your document replace the HTML code between the "INSERT CONTENT HERE" and "END CONTENT" with your own HTML code.

Step 2: You are finished.

Randomized Image Scroller Code: follow the instructions below..

Step 1: Select, Copy and paste the following code into your HTML Page wherever you want the scroller to be.

SELECT ALL

var scrollspeed = 40

<script language="JavaScript1.2">
// IMAGE ARRAY - place all the images you want to randomize in this array
var imageArray = new Array()
imageArray[1]="<img src='B1.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[2]="<img src='B2.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[3]="<img src='B3.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[4]="<img src='B4.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[5]="<img src='B5.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[6]="<img src='B6.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[7]="<img src='B7.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[8]="<img src='B8.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[9]="<img src='B9.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[10]="<img src='B10.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[11]="<img src='B11.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[12]="<img src='B12.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[13]="<img src='B13.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[14]="<img src='B14.gif' alt='' width='75' height='75' border='0' align='left'>"
imageArray[15]="<img src='B15.gif' alt='' width='75' height='75' border='0' align='left'>"
// END IMAGE ARRAY
</script>

<table width="155" cellspacing="2" cellpadding="2" border="0">
<tr><td width="100%">

<script language="Javascript">	
var arrayLength // length of the imageArray
arrayLength = imageArray.length-1
var startPoint // the starting point for the loop for the tenImageArray, a randomized number

// this is set to one less than the amount of images in the array
startPoint = 1+Math.round(Math.random()*arrayLength);

for (var i=1;i<=arrayLength;i++) {
	if (startPoint==arrayLength) {
		startPoint=1
	}
	document.write("<tr><td>"+imageArray[startPoint]+"</td></tr>")
	startPoint++
}
</script>

</td></tr>
</table>

</layer></ilayer>

function getcontent_height(){
	if (iens6)
	contentheight=contentobj.offsetHeight
}
window.onload=getcontent_height

</script>

Once the above code is copied and pasted into your document replace the images between the "IMAGE ARRAY" and "END IMAGE ARRAY" with your own images.

Step 2: You are finished.

Site Generated and Maintained using Macromedia Homesite

• HtmlCodeTutorial.com
• DevGuru.com
• Builder.com
• WDVL.com
• WebDeveloper.com
• WebReference.com
• Pageresource.com
• W3C

Javascript Resources

• Website Abstraction
• JavaScript.com
• JavaScript Source

DHTML Resources

• Website Abstraction
• Dynamic Drive
• Jeff Rule's DHTML

Java Resources

• JavaBoutique.com
• Sun Download Center

ASP Resources

• ASP101
• LearnASP
• PowerASP
• ASPZone

ScriptKingdom.com
Script repository
and resource site

www.hotscripts.com