use Page Scroller in div, not body

**pithyus** · 10-16-2011, 02:59 PM

1) Script Title: Page Scroller (aka Custom Scrollbar)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...gescroller.htm

3) Describe problem: I want to apply this script to a div instead of the body. I have tried placing this script in the div that I want to scroll, instead of the recommended placement (just above </body>). this places the scroll buttons in the div, but they still control the main scrollbar in the body.

**ddadmin** · 10-17-2011, 12:25 AM

There's no easy way to scroll a DIV with this script unfortunately. You may want to check out the following script instead: http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

**pithyus** · 10-17-2011, 01:09 AM

Thank you.

'Scrollable content script' looks like it'll do what I want.

Pithyus

**vwphillips** · 10-17-2011, 09:29 AM

that script is so old, does not calculate the scroll hight correctly and is inflexible.

suggest it is updated to

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>


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


<!--INSERT CONTENT HERE-->
<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>
<!--END CONTENT-->

</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">


<!--INSERT CONTENT HERE-->
<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>
<!--END CONTENT-->

</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>
</body>

</html>

**pithyus** · 10-17-2011, 02:31 PM

vwphillips,
This script works too. Thanks.

I agree that it should be updated. It is easier for a noob (like me) to understand and manipulate.

**pithyus** · 10-17-2011, 03:40 PM

Originally Posted by vwphillips

that script is so old, does not calculate the scroll hight correctly and is inflexible.

suggest it is updated to

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>


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


<!--INSERT CONTENT HERE-->
<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>
<!--END CONTENT-->

</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">


<!--INSERT CONTENT HERE-->
<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>
<!--END CONTENT-->

</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>
</body>

</html>

I am having one issue with this script. after page load when I first hover the down arrow it will jump to the bottom. After that it works as expected.
Also, if I hover the top arrow before the bottom arrow, it works fine.

This is the site.
http://geekosystems.net/sandbox/

Any suggestions?

**vwphillips** · 10-18-2011, 09:39 AM

the script needs the top position to be defined by inline style

this modification does not

Code:

<html>
	<head>
		<title>Pithyus.com</title>
		<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
		<meta name="robots" content="index, follow" />
		<meta name="keywords" content="Linux,Ubuntu,Gnome,compiz,kiba,kiba-dock,kibadock,kiba dock,akamaru,akamaru dock,Windows,malware,spyware,malware removal,virus,virii,viruses" />
		<meta name="description" content="" />
		<link rel="stylesheet" type="text/css" href="default.css" />

		<link href='http://fonts.googleapis.com/css1?family=Delius' rel='stylesheet' type='text/css'>
<style type="text/css">
/*<![CDATA[*/

.container {
  position:relative;overflow:hidden;width:400px;height:200px;border:solid red 1px;
}

#content {
 position:relative;top:0px;
}

/*]]>*/
</style>	</head>
	<body>
 <div class="container">
   <div id="content">

<!--INSERT CONTENT HERE-->
<p class="first">Ubuntu is a Free computer Operating System (OS) based on Linux (an open-source alternative to Windows and Mac), built by a worldwide team of expert developers. It contains all the applications you need: a web browser, office suite, media apps, instant messaging and much more.</p>

<p>You can do anything in Ubuntu that you can do with Mac & Windows, you just have different tools.</p>

<p>They have IE & Safari, Ubuntu has Firefox.
<br>They have Photoshop, Ubuntu has Gimp.
<br>They have MS Office, Ubuntu has Libre Office & Open Office.
<br>They have several different Chat/IM applications, Ubuntu has Empathy for them all.
<br>Not only does Ubuntu have an application similar to the other guys, but Ubuntu's applications can open files created by their applications.</p>

<p>If you're looking for the perfect desktop, customized just the way you like it - from where or IF you want the gnome panel task bar, to what color fire your windows burn up in when you close them. Thanks to compiz, Ubunutu's composie manager, your desktop will do things you never imagined, like wobbly windows, desktop cube, & exploding windows! Things Arrow, Windows 7 composite manager, is not capable of doing.</p>

<p>Are you tired of viruses? With Ubuntu, you don't have to worry about them anymore.</p>
<!--END CONTENT-->
   </div><!--#content-->
  </div>
						<div class="circlebr">
							<a href="#" onMouseover="move('content',5)" onMouseout="clearTimeout(move.to)"><img src="http://geekosystems.net/sandbox/up.png" border=0></a>
							<br>
							<br>
							<a href="#" onMouseover="move('content',-5)" onMouseout="clearTimeout(move.to)"><img src="http://geekosystems.net/sandbox/down.png" border=0></a></p></td>

						</div>

			<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,top;
             if (obj&&typeof(spd)=='number'){
               max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=obj.offsetTop;
		       if ((spd>0&&top<spd)||(spd<0&&top>max+spd)){
			    obj.style.top=top+spd+"px";
			    move.to=setTimeout(function(){ move(id,spd); },20);
			   }
			   else {
			    obj.style.top=(spd>0?0:max)+"px";
			   }
              }
		     }

			</script>


	</body>
</html>

**pithyus** · 10-18-2011, 03:24 PM

Originally Posted by vwphillips

the script needs the top position to be defined by inline style

this modification does not

Vic,
Thanks for all your help/time!
So far this works exactly as expected.
My site still has a long way to go before it is ready. One of the plans is to make the content window size dynamic. Will this script work or does it need further modification?

Pithyus

**vwphillips** · 10-19-2011, 08:00 AM

all calculations are made in the function so there should not be a problem

I have added vertical and horizontal applications

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>


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


<!--INSERT CONTENT HERE-->
<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>
<!--END CONTENT-->

</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;">


<!--INSERT CONTENT HERE-->
<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>
<!--END CONTENT-->

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


<div style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">
<div id="container3" style="position:absolute;width:490px;left:0;">


<!--INSERT CONTENT HERE-->
<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>
<!--END CONTENT-->

</div></div>

<table width="175px"><td><p align="right">
<a href="#" onMouseover="move('container3',1,'H')" onMouseout="clearTimeout(move.to)"><img src="http://www.dynamicdrive.com/dynamicindex11/up.gif" border=0></a>  <a href="#" onMouseover="move('container3',-1,'H')" 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 19-October-2011

// parameter id   = the unique ID name of the element to scroll.                               (string)
// parameter spd  = the scroll speed and direction, > 0 down, > 0 = up.                        (number)
// parameter mode = (optional) 'V' or 'vertical' = vertical, 'H' or 'horizontal' = horizontal. (string, default = 'V' = vertical)

function move(id,spd,mode){
 var obj=document.getElementById(id),m=typeof(mode)=='string'&&mode.charAt(0).toUpperCase()=='H'?['left','offsetWidth']:['top','offsetHeight','offsetTop'],max,top;
 if (obj&&typeof(spd)=='number'){
  max=-obj[m[1]]+obj.parentNode[m[1]],top=parseInt(obj.style[m[0]]),top=isFinite(top)?top:obj[m[2]];
  if ((spd>0&&top<spd)||(spd<0&&top>max+spd)){
   obj.style[m[0]]=top+spd+'px';
   move.to=setTimeout(function(){ move(id,spd,mode); },20);
  }
  else {
   obj.style[m[0]]=(spd>0?0:max)+'px';
  }
 }
}

</script>
</body>

</html>