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/dynamici...nualscroll.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

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

Thread: displaying scrollbers if more content

Thread Tools

Search Thread

displaying scrollbers if more content

Bookmarks

Bookmarks

Posting Permissions