PDA

View Full Version : Scrollable content script - Hiding arrows on start and end of Div Content



Harleyy
10-18-2012, 07:00 AM
Hello everyone,

I have been referring this script http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

It works perfect, just want to hide the up and down arrows when they reach the top and the bottom of the Div contents respectively.

Awaiting solutions,

Regards,
-harleyy.

vwphillips
10-18-2012, 08:15 AM
<!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>

Harleyy
10-18-2012, 11:07 AM
Thank you Sir. :)