Dynamic Drive DHTML Scripts- Scrollable content

Scrollable content

Author: Dynamic Drive

Description and demo:

This is a cool script that allows you to compact any content and confine it within a scrollable mini "window" Save valuable document space while making your page more "interactive", all at the same time! This script uses two different techniques- one for IE, one for NS- to create the scrollable window. Scrollbars will be available to IE 4 users to scroll the window, while NS users will need to use the "up" and "down" buttons instead (since NS does not support the adding of scrollbars to contents).

Directions:

Simply copy the below into the <body> section of your web page:

Select All
<ilayer name="scroll1" width=170 height=150 clip="0,0,170,150"> <layer name="scroll2" width=170 height=150 bgColor="lightyellow"> <div id="scroll3" style="width:170px;height:150px;background-color:lightyellow;overflow:scroll"> <big>T</big>his is a cool script that allows you to compact any content and confine it within a scrollable mini "window" Save valuable document space while making your page more "interactive", all at the same time! This script uses two different techniques- one for IE, one for NS- to create the scrollable window. Scrollbars will be available to IE 4 users to scroll the window, while NS users will need to use the "up" and "down" buttons instead (since NS does not support the adding of scrollbars to contents). </div> </layer> </ilayer> <script> /*********************************************** * Scrollable content Script- © Dynamic Drive (www.dynamicdrive.com) * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var nsstyle='display:""' if (document.layers) var scrolldoc=document.scroll1.document.scroll2 function up(){ if (!document.layers) return if (scrolldoc.top<0) scrolldoc.top+=10 temp2=setTimeout("up()",50) } function down(){ if (!document.layers) return if (scrolldoc.top-150>=scrolldoc.document.height*-1) scrolldoc.top-=10 temp=setTimeout("down()",50) } function clearup(){ if (window.temp2) clearInterval(temp2) } function cleardown(){ if (window.temp) clearInterval(temp) } </script> <br><span style="display:none" style=&{nsstyle};><a href="#" onMousedown="up()" onMouseup="clearup()" onClick="return false" onMouseout="clearup()">Up</a> | <a href="#" onMousedown="down()" onMouseup="cleardown()" onClick="return false" onMouseout="cleardown()">Down</a> | <a href="#" onClick="if (document.layers) scrolldoc.top=0;return false">Top</a> | <a href="#" onClick="if (document.layers) scrolldoc.top=scrolldoc.document.height*(-1)+150;return false">Bottom</a></span>

Configuring the script: The width of the "window" is represented by the value 170, and the height, 150. To alter the dimensions, change ALL instances of 170 to another value, and the same for 150 (just do a search-and-replace). You can also give the window a different background color. Just change "yellow" to another color name.