Dynamic Drive- Scrollable Content script

New Revised CSS Library Forums Web Tools

Scrollable content script

Author: Dynamic Drive

Note: Last updated Oct 17th 12', by vwphillips

Description: Display overflowing content in a confined area and let users view the entire content via custom up and down scroll buttons. Support multiple instances of scrollable content on one 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
<div style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden"> <div id="container" style="position:absolute;width:170px;left:0;top:0">  <p> DHTML is the combination of HTML, JavaScript, and CSS</p> <p>- DOM stands for Document Object Model</p> <p>- DHTML allows content on a page to change on the fly, without reloading the page</p> <p>- CSS allows for the separation between content definition and formatting</p> <p>- CSS stands for Cascading style sheet</p> <p>- <a href="http://www.dynamicdrive.com">Dynamic Drive</a> provides free, cut and paste DHTML scripts</p>  </div></div> <table width="175px"><td><p align="right"> <a href="#" onMouseover="move('container',5)" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/up.gif" border=0></a> <a href="#" onMouseover="move('container',-5)" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/down.gif" border=0></a></p></td> </table> <div style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden"> <div id="container2" style="position:absolute;width:170px;left:0;top:0">  <p>- DHTML is the combination of HTML, JavaScript, and CSS</p> <p>- DOM stands for Document Object Model</p> <p>- DHTML allows content on a page to change on the fly, without reloading the page</p> <p>- CSS allows for the separation between content definition and formatting</p> <p>- CSS stands for Cascading style sheet</p> <p>- <a href="http://www.dynamicdrive.com">Dynamic Drive</a> provides free, cut and paste DHTML scripts</p>  </div></div> <table width="175px"><td><p align="right"> <a href="#" onMouseover="move('container2',5)" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/up.gif" border=0></a> <a href="#" onMouseover="move('container2',-5)" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/down.gif" border=0></a></p></td> </table> <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 ******************************************/ // modified 17-October-2011 function move(id,spd){ var obj=document.getElementById(id),max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=parseInt(obj.style.top); if ((spd>0&&top<=0)||(spd<0&&top>=max)){ obj.style.top=top+spd+"px"; move.to=setTimeout(function(){ move(id,spd); },20); } else { obj.style.top=(spd>0?0:max)+"px"; } } </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.