Dynamic Drive- Scrollable Content II

Scrollable content II

Author: Dynamic Drive

Description: We derived our idea for this script from MrShowBiz (now retired), which used a similar setup on its front page to display news headlines. Display content in a confined area. Users can then view the entire content via the automatic scroll up/down functionality. Compatible with all DHTML browsers (IE4+, NS4, NS6), this is a great script to compact and add a touch of interactivity to portions of your page.

Demo:

- 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:

Step 1: Add the following code into the <BODY> section of your page:

Select All
<script type="text/javascript"> /****************************************** * Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com) * Visit http://www.dynamicdrive.com/ for full source code * This notice must stay intact for use ******************************************/ iens6=document.all||document.getElementById ns4=document.layers //specify speed of scroll (greater=faster) var speed=5 if (iens6){ document.write('<div id="container" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">') document.write('<div id="content" style="position:absolute;width:170px;left:0;top:0">') } </script> <ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160"> <layer name="nscontent" width=175 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>') </script> <table width="175px"><td><p align="right"> <a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a> <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></p></td> </table> <script language="JavaScript1.2"> if (iens6){ 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 (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 (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 getcontent_height(){ if (iens6) contentheight=crossobj.offsetHeight else if (ns4) document.nscontainer.document.nscontent.visibility="show" } window.onload=getcontent_height </script>

Step 2: The script uses two images as part of its interface. You can create your own, or use the two below (enlarged for easier download):

(right click images, and select "Save Image As")

Upload them into the same directory as your webpage.

Technical Note

To alter the interface's width, change all occurrences of the number "175" and "170" to another number. To alter its height, change the occurrences of "160".

An interesting way to decorate the script is with a background image.

Finally, note that this script accesses the BODY onload event in NS6. If your page contains another script that does the same, see here for tips on resolving the conflict.