Scrollable content script III

**vwphillips** · 10-17-2011, 01:42 PM

1) CODE TITLE: Scrollable content script II

2) AUTHOR NAME/NOTES:
the original script is so old, does not calculate the scroll hight correctly and is inflexible.

3) DESCRIPTION:
Rewrite
4) URL TO CODE:

or, ATTACHED BELOW (see #3 in guidelines below):

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

// the original script is so old, does not calculate the scroll hight correctly and is inflexible.
// 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>

the code has been modified so the top position does not need to be defined by inline style

**ddadmin** · 10-19-2011, 04:54 AM

Thanks Vic, I've updated the original Scrollable Content script II with your version instead: http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

**vwphillips** · 10-19-2011, 07:56 AM

please note the amendment of the posted script resulting from feedback from
DD scripts help

see http://www.dynamicdrive.com/forums/s...231#post263231

**vwphillips** · 10-19-2011, 03:55 PM

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,min,top;
 if (obj&&typeof(spd)=='number'){
  spd=Math.ceil(spd),m=typeof(mode)=='string'&&mode.charAt(0).toUpperCase()=='H'?['left','offsetWidth','offsetLeft']:['top','offsetHeight','offsetTop'],min=-obj[m[1]]+obj.parentNode[m[1]],top=obj[m[2]];
  if ((spd>0&&top<spd)||(spd<0&&top>min+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:min)+'px';
  }
 }
}

</script>
</body>

</html>

**ddadmin** · 10-21-2011, 02:35 AM

Thanks for the update, I'll wait until next week before implementing this, in case there are any other changes you'd like to add to the script in the meantime.

Thread: Scrollable content script III

Thread Tools

Search Thread

Scrollable content script III

Bookmarks

Bookmarks

Posting Permissions