SimplytheBest DHTML dynamic scroller script

SimplytheBest
Scripts

ASP scripts
PERL scripts
PHP scripts
JavaScripts & Ajax
Snippets
Online scripts

Ajax, DHTML
& JavaScripts

Animation
Background
Bookmarks
Buttons
Calculators
Cookies
Data handling
E-mail
Enhancements
Forms
Image rotation
Menus
Messages
Miscellaneous
Music
Password protection
Redirection
Scrollers
Tables
Time & date
Windows

Publishers
Add script
Account login
Publisher list

Sponsored links

Easy Media Planner

Home > Scripts > DHTML scripts & JavaScripts > Scrollers > Dynamic scroller

Dynamic scroller script

AUTHOR: Submitted by Ron Grafe
TYPE: Freeware
BROWSERS: IE 4+, IE 5+, IE 6+, NS 4+, NS 6+

A scroller that allows you to manually control the scroll. You can 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 scroll box or when it reaches the bottom or top 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 also add small graphics.

EXAMPLE

Down

Up

Stop

Top

SimplytheBest.net

•	Shareware & Freeware
•	DHTML Scripts & Javascripts
•	CGI Scripts
•	Free online games
•	Free Fonts
•	Blogs
•	Music directory
•	Sounds archive
•	Web search

PlanMagic.com

•	PlanMagic Business professional business plan software
•	PlanMagic Marketing professional marketing plan software
•	PlanMagic Finance Pro financial calculations were never this easy
•	PlanMagic Hotel professional hotel plan generator
•	PlanMagic Restaurant the only restaurant business plan generator

1) Insert the following code with the script inside the <BODY> section where you want the scroller to appear on the page.

then copy (CTRL-C) & paste (CTRL-V)

<table width="155" cellspacing="0" border="1" bgcolor="#E1F0F0" bordercolor="#008080" bordercolorlight="#FFFFFF"> <tr> <td width="25%" align="center" valign="bottom"> <a href="Javascript:scrolldown()">Down</a> </td> <td width="25%" align="center" valign="bottom"> <a href="Javascript:scrollup()">Up</a> </td> <td width="25%" align="center" valign="bottom"> <a href="Javascript:stopall()">Stop</a> </td> <td width="25%" align="center" valign="bottom"> <a href="Javascript:shifttotop()">Top</a> </td> </tr> </table> <script language="JavaScript1.2"> // Author: Ron Grafe grafer@columbus.rr.com http://www.gdevresources.com/Pages/Scripts/Dynamicscroller/Dynamicscroller.htm // Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/ 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:1px ridge white">') document.write('<div id="content" style="position:absolute;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>  SimplytheBest.net <hr size="1" color="#008080" width="98%"> <table><tr> <td valign="top">•</td><td><a href="http://simplythebest.net/software/" onmouseover="stopall()">Shareware & Freeware</a></td></tr> <tr><td valign="top">•</td><td><a href="http://simplythebest.net/scripts/categories.php?cid=4" onmouseover="stopall()">DHTML Scripts & Javascripts</a></td></tr> <tr><td valign="top">•</td><td><a href="http://simplythebest.net/scripts/categories.php?cid=2" onmouseover="stopall()">CGI Scripts</a></td></tr> <tr> <td valign="top">•</td><td><a href="http://games.simplythebest.net" onmouseover="stopall()">Free online games</a></td> </tr> <tr> <td valign="top">•</td><td><a href="http://simplythebest.net/fonts/" onmouseover="stopall()">Free Fonts</a></td> </tr> <tr> <td valign="top">•</td><td><a href="http://blogs.simplythebest.net/" onmouseover="stopall()">Blogs</a></td> </tr> <tr> <td valign="top">•</td><td><a href="http://simplythebest.net/music/" onmouseover="stopall()">Music directory</a></td> </tr> <tr> <td valign="top">•</td><td><a href="http://simplythebest.net/sounds/" onmouseover="stopall()">Sounds archive</a></td> </tr> <tr><td valign="top">•</td><td><a href="http://web.simplythebest.net/" onmouseover="stopall()">Web search</a></td></tr> </table> PlanMagic.com <hr size="1" color="#008080" width="98%"> <table><tr> <td valign="top">•</td><td><a href="http://planmagic.com/business_plan.html" onmouseover="stopall()">PlanMagic Business</a> professional business plan software</td></tr> <tr><td valign="top">•</td><td><a href="http://planmagic.com/marketing_planning.html" onmouseover="stopall()">PlanMagic Marketing</a> professional marketing plan software</td></tr> <tr> <td valign="top">•</td><td><a href="http://planmagic.com/financial_planning.html" onmouseover="stopall()">PlanMagic Finance Pro</a> financial calculations were never this easy</td> </tr> <tr> <td valign="top">•</td><td><a href="http://planmagic.com/business_plan/hotel_business_plan.html" onmouseover="stopall()">PlanMagic Hotel</a> professional hotel plan generator</td> </tr> <tr> <td valign="top">•</td><td><a href="http://plan-a-restaurant.com" onmouseover="stopall()">PlanMagic Restaurant</a> the only restaurant business plan generator</td> </tr> </table>  </layer></ilayer> <script language="JavaScript1.2"> // Author: Ron Grafe grafer@columbus.rr.com http://www.gdevresources.com/Pages/Scripts/Dynamicscroller/Dynamicscroller.htm // Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/ var step=1 if (iens6){ document.write('</div></div>') var contentobj=document.getElementById? document.getElementById("content") : document.all.content var contentheight=contentobj.offsetHeight if (document.getElementById&&!document.all){ step=5 } } else if(ns4){ var contentobj=document.nscontainer.document.nscontent var contentheight=contentobj.clip.height }  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>

2) Define the content to appear inside the scroll box in this section of the script:

SimplytheBest Scripts
 <hr size="1" color="#008080">
<table>
<tr><td valign="top">•</td>
<td>
<a href="scripts/DHTML_scripts/" onmouseover="stopall()">DHTML Scripts & Javascripts</a></td></tr>
<tr><td valign="top">•</td>
<td>
<a href="scripts/perl_scripts/" onmouseover="stopall()">CGI Scripts</a></td></tr>

3) Define the scolling speed and the style of the scoll box in this section of the script:

var scrollspeed = 40 // the lower the faster


if (iens6){
document.write('<div id="container" style="position:relative;width:155;height:160px;overflow:hidden;border:1px ridge white">')

And in this section of the HTML code:

For more information you can visit Ron Grafe's web site.

[BACK] [TOP]