Dynamic Drive DHTML Scripts- Manual Scroller

New Revised CSS Library Forums Web Tools

Manual Scroller

Author: Dynamic Drive

Note: Idea derived from this script by Ronald Grafe

Description: This DHTML scroller puts you at the helm. Scroll up, down, or pause as you choose. Plain HTML is used to specify its contents, so embedding/updating this content becomes a snap.

Demo:

Down Up Stop Top

- DHTML is the combination of HTML, JavaScript, and CSS

- DOM stands for Document Object Model

- DHTML allows content on a page to change on the fly, without reloading the page

- CSS allows for the separation between content definition and formatting

- CSS stands for Cascading style sheet

- Dynamic Drive provides free, cut and paste DHTML scripts

Directions

Simply add the following to the <BODY> section of your page:

Select All
<div style="background-color:#FFFFDD;width:155px"><center><a href="javascript:movedown()">Down</a> <a href="javascript:moveup()">Up</a> <a href="javascript:stopscroll()">Stop</a> <a href="javascript:movetop()">Top</a></center> </div> <SCRIPT language="JavaScript1.2"> //Manual Scroller- © Dynamic Drive 2001 //For full source code, visit http://www.dynamicdrive.com //specify speed of scroll (greater=faster) var speed=2 iens6=document.all||document.getElementById ns4=document.layers if (iens6){ document.write('<div id="container" style="position:relative;width:155px;height:160px;overflow:hidden;border:2px ridge white">') document.write('<div id="content" style="position:absolute;width:155px;left:0px;top:0px">') } </script> <ilayer name="nscontainer" width=155 height=160 clip="0,0,155,160"> <layer name="nscontent" width=155 height=160 visibility=hidden>  <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the combination of HTML, JavaScript, and CSS</font></p> <p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p> <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows content on a page to change on the fly, without reloading the page</font></p> <p><font size="2" face="Arial">- CSS allows for the separation between content definition and formatting</font></p> <p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p> <p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic Drive</a> provides free, cut and paste DHTML scripts</font></p>  </layer> </ilayer> <script language="JavaScript1.2"> if (iens6){ document.write('</div></div>') var crossobj=document.getElementById? document.getElementById("content") : document.all.content var contentheight=crossobj.offsetHeight } else if (ns4){ var crossobj=document.nscontainer.document.nscontent var contentheight=crossobj.clip.height } function movedown(){ if (window.moveupvar) clearTimeout(moveupvar) if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100)) crossobj.style.top=parseInt(crossobj.style.top)-speed+"px" else if (ns4&&crossobj.top>=(contentheight*(-1)+100)) crossobj.top-=speed movedownvar=setTimeout("movedown()",20) } function moveup(){ if (window.movedownvar) clearTimeout(movedownvar) if (iens6&&parseInt(crossobj.style.top)<=0) crossobj.style.top=parseInt(crossobj.style.top)+speed+"px" else if (ns4&&crossobj.top<=0) crossobj.top+=speed moveupvar=setTimeout("moveup()",20) } function stopscroll(){ if (window.moveupvar) clearTimeout(moveupvar) if (window.movedownvar) clearTimeout(movedownvar) } function movetop(){ stopscroll() if (iens6) crossobj.style.top=0+"px" else if (ns4) crossobj.top=0 } function getcontent_height(){ if (iens6) contentheight=crossobj.offsetHeight else if (ns4) document.nscontainer.document.nscontent.visibility="show" } window.onload=getcontent_height </script>

You can change the dimensions of the scroller by changing all occurrences of the values "155" and "160" to something else, corresponding to width and height, respectively.