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> 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>
<!--END CONTENT-->
</div></div>
<table width="175px"><td><p align="right">
<a href="#" onMouseover="move('container',5)" onMouseout="clearTimeout(move.to)"><img id="containerUp" src="http://www.dynamicdrive.com/dynamicindex11/up.gif" border=0></a> <a href="#" onMouseover="move('container',-5)" onMouseout="clearTimeout(move.to)"><img id="containerDown" 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>- 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>
<!--END CONTENT-->
</div></div>
<table width="175px"><td><p align="right">
<a href="#" onMouseover="move('container2',5)" onMouseout="clearTimeout(move.to)"><img id="container2Up" src="http://www.dynamicdrive.com/dynamicindex11/up.gif" border=0></a> <a href="#" onMouseover="move('container2',-5)" onMouseout="clearTimeout(move.to)"><img id="container2Down" 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),up=document.getElementById(id+'Up'),down=document.getElementById(id+'Down');
if (up&&spd<0){
up.style.visibility='visible';
}
if (down&&spd>0){
down.style.visibility='visible';
}
if ((spd>0&&top<=0)||(spd<0&&top>=max)){
obj.style.top=top+spd+"px";
move.to=setTimeout(function(){ move(id,spd); },20);
}
else {
top=(spd>0?0:max)
obj.style.top=top+"px";
if (up&&top==0){
up.style.visibility='hidden';
}
if (down&&top==max){
down.style.visibility='hidden';
}
}
}
</script>
</body>
</html>
Junior Coders
Scrollable content script - Hiding arrows on start and end of Div Content
Posting Permissions
Reply With Quote
Bookmarks