PDA

View Full Version : displaying scrollbers if more content



darshanpm
09-15-2009, 01:08 AM
Hi,

I am using this script to have my custom scrollers - http://www.dynamicdrive.com/dynamicindex2/manualscroll.htm

But now, i would like that scroller arrows to only appear if the text in the div is higher than the div height. I am not able to get that done.....if anyone has done or have any idea how to do that, i would be really thankful.

Let me know if you have any questions.

Thanks

vwphillips
09-15-2009, 11: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>
<script type="text/javascript">
/*<![CDATA[*/

function Scroll(id,up,down){
var obj=document.getElementById(id);
this.scroll=obj.getElementsByTagName('DIV')[0];
this.max=-this.scroll.offsetHeight+obj.offsetHeight;
this.up=document.getElementById(up)||false;
this.down=document.getElementById(down)||false;
this.top=0;
this.UpDown();
this.ud=-1;
}

Scroll.prototype.Scroll=function(ud){
this.Stop();
this.ud=ud||this.ud;
this.top+=this.ud;
this.top=this.top>0?0:this.top<this.max?this.max:this.top;
this.scroll.style.top=this.top+'px';
this.UpDown();
if (this.top!=0&&this.top!=this.max){
var oop=this;
this.to=setTimeout(function(){ oop.Scroll(); },10);
}
else {
this.ud*=-1;
}
}

Scroll.prototype.Stop=function(){
clearTimeout(this.to);
}

Scroll.prototype.UpDown=function(){
if (this.up){
this.up.style.visibility=this.top!=0?'visible':'hidden';
}
if (this.down){
this.down.style.visibility=this.top!=this.max?'visible':'hidden';
}
}

Scroll.prototype.TopBot=function(ud){
this.Stop();
this.top=ud?0:this.max;
this.UpDown();
this.scroll.style.top=this.top+'px';
}

/*]]>*/
</script>
</head>

<body onload="S=new Scroll('container','up','down');S2=new Scroll('container2');" >
<div style="background-color:#FFFFDD;width:155px"><center><a id="down" href="javascript:S.Scroll(-1);">Down</a> <a id="up" href="javascript:S.Scroll(1);">Up</a>
<a href="javascript:S.Stop()">Stop</a> <a href="javascript:S.TopBot(true)">Top</a> <a href="javascript:S.TopBot()">Bottom</a></center>
</div>
<div id="container" style="position:relative;width:155px;height:160px;overflow:hidden;border:2px ridge white"
onmouseover="S.Stop();";
onmouseout="S.Scroll();";
>
<div style="position:absolute;left:0px;top:0px;" >
<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><br><br></p>
<!--END CONTENT-->
</div>
</div>
<br />
<div id="container2" style="position:relative;width:155px;height:160px;overflow:hidden;border:2px ridge white"
onmouseover="S2.Stop();";
onmouseout="S2.Scroll();";
>
<div style="position:absolute;left:0px;top:0px;" >
<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><br><br></p>
<!--END CONTENT-->
</div>
</div>
</body>

</html>