Scrollable content script III [Archive]

View Full Version : 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):

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


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


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


</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/showthread.php?p=263231#post263231

vwphillips

10-19-2011, 03:55 PM

I have added vertical and horizontal applications

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


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


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


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


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


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


</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. :)