How can this be done?

**ciscoguy24** · 01-28-2006 02:53 PM

Hey guys just wondering how this guy at this site dailysnap.com did what he did. On the top he has a + sign and you click it and a menu comes done. Is there any free scripts that I can use that does this?

thanks

adam

**ciscoguy24** · 01-29-2006 05:15 AM

Can anybody help me?

**vwphillips** · 01-29-2006 07:47 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (28-Jan-2005) http://www.vicsjavascripts.org.uk

// Application Notes
// Executed by event call to zxcCngHeight(zxcobj,zxcdir,zxcminh,zxcdly)
// where
// parameter 0 = object or object ID name               (object or string)
// parameter 1 = < 1 reduce height, > 1 increase height (digits)
// parameter 2 = the minimum height                     (digits)
// parameter 3 = the maximum height                     (digits)
// parameter 4 = (optional) delay (default 100mSec)       (digits)
// parameter 5 = (optional) true = remove element when at minimim height (true or null)

// Note: parameters 2,3 and 5 cannot be changed after the first element call

// Functional Code NO NEED to Change

var zxcOOPCnt=0

function zxcCngHeight(zxcobj,zxcdir,zxcminh,zxcmaxh,zxcdly,zxcrmv){
 if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj);}
 if (!zxcobj.oopch){ zxcobj.oopch=new zxcOOPCngHeight(zxcobj,zxcdir,zxcminh,zxcmaxh,zxcdly,zxcrmv); }
 clearTimeout(zxcobj.oopch.to);
 zxcobj.oopch.dir=zxcdir;
 zxcobj.oopch.delay=zxcdly||zxcobj.oopch.delay;
 if (zxcdir>0){ zxcobj.style.display=''; }
 zxcobj.oopch.cngheight();
}

function zxcOOPCngHeight(zxcm,zxcdir,zxcminh,zxcmaxh,zxcdly,zxcrmv){
 this.obj=zxcm.style;
 this.obj.position='relative';
 this.obj.overflow='hidden';
 this.ref='zxchs'+zxcOOPCnt;
 window[this.ref]=this;
 this.minh=zxcminh;
 this.maxh=zxcmaxh;
 this.rmv=zxcrmv;
 this.dir=zxcdir;
 if (zxcdir<0){ this.cnt=this.maxh; }
 else { this.cnt=this.minh; }
 this.delay=zxcdly||100;
 this.to=null;
 zxcOOPCnt++;
}

zxcOOPCngHeight.prototype.cngheight=function(){
 if ((this.dir<0&&this.cnt-this.dir>=this.minh)||(this.dir>0&&this.cnt+this.dir<=this.maxh)){
  this.obj.height=(this.cnt+=this.dir)+'px';
  this.setTimeOut("cngheight();",this.delay);
 }
 else if (this.dir<0){ this.obj.height=this.minh+'px'; if (this.rmv){ this.obj.display='none'; } }
 else if (this.dir>0){ this.obj.height=this.maxh+'px'; }

}

zxcOOPCngHeight.prototype.setTimeOut=function(zxcf,zxcd){
 this.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}


//-->
</script>
</head>

<body>
<table width="150" border="1">
<tbody   >
 <tr >
  <td align="center" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Up1.gif" onclick="zxcCngHeight('Row2',-1,20,100,5,true);" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Down1.gif" onclick="zxcCngHeight('Row2',1,20,100,5,true);" >
  </td>
 </tr>
 <tr height=100 id="Row2" onclick="zxcCngHeight(this,-1,20);" style="display:none;" >
  <td>1111111111111111</td>
 </tr>
 <tr >
  <td align="center" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Up1.gif" onclick="zxcCngHeight('Row3',-1,20,100,100);" >
  <img src="http://www.vicsjavascripts.org.uk/StdImages/Down1.gif" onclick="zxcCngHeight('Row3',1,20,100,10);" >
  </td>
 </tr>
 <tr height=100 id="Row3" >
  <td>1111111111111111</td>
 </tr>
</tbody>

</table>
</body>

</html>

Thread: How can this be done?

Thread Tools

Display

How can this be done?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions