Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Sliding menu, any idea, please?

    hi, does anyone know where to find a script regarding this menu on the rigth titled "essentials", please!
    i am not good at javascripting but really like it. and desperate to find out how it has been made.
    help please.
    many thanks.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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>
    <style type="text/css">
    /*<![CDATA[*/
    .item {
      position:relative;height:50px;background-Color:#FFCC66;border:solid black 1px;
    }
    
    /*]]>*/
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Change Left, Top, Width, Height, Color, Opacity (06-March-2007) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height, Color, Opacity style
    // (or other 'px' style properties) of an element over a specified period of time.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    // If not assigned the style position of the element will be assigned as 'position:absolute;' by the script.
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcChangeLTWHCO('left','tst1',[20,260],2000);'
    // where:
    // parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc.             (string)
    //               Note: the first character after the hyphen must be be upper case, all others lower case.
    //                     With the exception of opacity and color the property value units is in 'px'.
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 1 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 2 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = (optional) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
    //                'sin' progression starts fast and ends slow.
    //                'cos' progression starts slow and ends fast.
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  The function may be re-executed with a different set of parameters (start/finish time, progression type or period)
    //  whenever required, say from an onclick/mouseover/out event. The original progression type and period parameters
    //  will be retained unless re-specified, the start and finish parameters must be specified.
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code (about 3.7K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    var zxcOOPCnt=0;
    
    function zxcChangeLTWHCO(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
     var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
     if (zxcoop) zxcoop.cngparameters(zxcmde,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
     else zxcobj[zxcmde.replace('-','')+'oop']=new zxcLTWHCOOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
    }
    
    function zxcLTWHCOOOP(zxcmde,zxcobj,zxcsrtfin,zxccurve,zxctime,zxcplot){
     if (zxcsrtfin[0]==zxcsrtfin[1]) return;
     if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='absolute';
     this.to=null;
     this.ref='zxcltwhco'+zxcOOPCnt++;
     window[this.ref]=this;
     this.obj=zxcobj;
     this.cngparameters(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot);
    }
    
    zxcLTWHCOOOP.prototype.cngparameters=function(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot){
     clearTimeout(this.to);
     this.mde=this.mde||zxcmde;
     zxccurve=zxccurve||this.curve||'';
     this.time=zxctime||this.time||2000;
     if (zxcsrtfin[0]==zxcsrtfin[1]) return;
     for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
      var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
      if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
      if (zxcsrtfin[zxc0]==0) zxcsrtfin[zxc0]=0.00001;
     }
     if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
     this.curve=zxccurve.charAt(0).toLowerCase();
     this.sf=[(!zxcmde.match('olor'))?[zxcsrtfin[0]]:zxcRGBSplit(zxcsrtfin[0]),(!zxcmde.match('olor'))?[zxcsrtfin[1]]:zxcRGBSplit(zxcsrtfin[1]),[]];
     this.srttime=new Date().getTime();
     this.inc=Math.PI/(2*this.time);
     this.cngltwhco();
    }
    
    zxcLTWHCOOOP.prototype.cngltwhco=function(){
     var zxcms=new Date().getTime()-this.srttime;
     for (var zxc0 in this.sf[1]){ this.sf[2][zxc0]=(this.curve=='s')?Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.sin(this.inc*zxcms)+this.sf[0][zxc0]):(this.curve=='c')?(this.sf[1][0])-Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.cos(this.inc*zxcms)):(this.sf[1][zxc0]-this.sf[0][zxc0])/this.time*zxcms+this.sf[0][zxc0]; }
     this.cngstyle(this.sf[2]);
     if (zxcms<this.time) this.setTimeOut('cngltwhco();',10);
     else this.cngstyle(this.sf[1]);
    }
    
    zxcLTWHCOOOP.prototype.cngstyle=function(zxcltwhco){
     if (this.mde.match('olor')) this.obj.style[this.mde.replace('-','')]='rgb('+zxcltwhco[0]+','+zxcltwhco[1]+','+zxcltwhco[2]+')';
     else if (this.mde!='opacity') this.obj.style[this.mde.replace('-','')]=Math.max(zxcltwhco[0],0)+'px';
     else this.opacity(zxcltwhco[0]);
    }
    
    zxcLTWHCOOOP.prototype.opacity=function(zxcopc){
     if (zxcopc<0||zxcopc>100) return;
     if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
     else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
     else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
     else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
    }
    
    zxcLTWHCOOOP.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    function zxcStyleValue(zxcel,zxcp){
     if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
     return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
    }
    
    function zxcRGBSplit(zxccol){
     if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol.substring(5,7),16); }
     zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
     return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
    }
    
    
    //-->
    </script>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // By Vic Phillips (04-July-2007) http://www.vicsjavascripts.org.uk
    
    
    // Functional Code - No Need to Change
    
    function zxcInitSlideMenu(zxcid,zxcmax){
     var zxcp=document.getElementById(zxcid);
     var zxcclds=zxcNoTxtNodes(zxcp);
     zxcp.data=[zxcclds[0],zxcclds[0].offsetHeight,zxcmax];
     zxcES(zxcclds[0],{height:zxcmax+'px'});
     for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
      zxcAddEvt(zxcclds[zxc0],'zxcSlideMenuOpen','mouseover');
     }
    
    }
    
    function zxcSlideMenuOpen(){
     var zxcp=this.parentNode;
     if (this!=zxcp.data[0]){
      zxcChangeLTWHCO('height',zxcp.data[0],zxcp.data[2],zxcp.data[1],'sin',1000);
      zxcp.data[0]=this;
      zxcChangeLTWHCO('height',zxcp.data[0],zxcp.data[1],zxcp.data[2],'sin',1000);
     }
    }
    
    
    var zxcEvt=0;
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxcp){ zxcp.appendChild(zxcele); }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    function zxcNoTxtNodes(zxcp){
     var zxcclds=zxcp.childNodes,zxcary=[];
     for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
     for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
     return zxcclds;
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    
    function zxcAddEvt(zxc,zxcfun,zxcevt){
     zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    
    /*]]>*/
    </script></head>
    
    <body onload="zxcInitSlideMenu('m1',100)">
    
    <div id="m1" style="position:relative;width:100px;border:solid black 1px;" >
    <div class="item" >Item 1</div>
    <div class="item" >Item 2</div>
    <div class="item" >Item 3</div>
    <div class="item" >Item 4</div>
    <div class="item" >Item 5</div>
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    smother

    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>
    <style type="text/css">
    /*<![CDATA[*/
    .item {
      position:relative;height:50px;background-Color:#FFCC66;border:solid black 1px;
    }
    
    /*]]>*/
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Change Left, Top, Width, Height, Color, Opacity (06-March-2007) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height, Color, Opacity style
    // (or other 'px' style properties) of an element over a specified period of time.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    // If not assigned the style position of the element will be assigned as 'position:absolute;' by the script.
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcChangeLTWHCO('left','tst1',[20,260],2000);'
    // where:
    // parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc.             (string)
    //               Note: the first character after the hyphen must be be upper case, all others lower case.
    //                     With the exception of opacity and color the property value units is in 'px'.
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 1 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 2 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = (optional) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
    //                'sin' progression starts fast and ends slow.
    //                'cos' progression starts slow and ends fast.
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  The function may be re-executed with a different set of parameters (start/finish time, progression type or period)
    //  whenever required, say from an onclick/mouseover/out event. The original progression type and period parameters
    //  will be retained unless re-specified, the start and finish parameters must be specified.
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code (about 3.7K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    var zxcOOPCnt=0;
    
    function zxcChangeLTWHCO(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
     var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
     if (zxcoop) zxcoop.cngparameters(zxcmde,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
     else zxcobj[zxcmde.replace('-','')+'oop']=new zxcLTWHCOOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
    }
    
    function zxcLTWHCOOOP(zxcmde,zxcobj,zxcsrtfin,zxccurve,zxctime,zxcplot){
     if (zxcsrtfin[0]==zxcsrtfin[1]) return;
     if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='absolute';
     this.to=null;
     this.ref='zxcltwhco'+zxcOOPCnt++;
     window[this.ref]=this;
     this.obj=zxcobj;
     this.cngparameters(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot);
    }
    
    zxcLTWHCOOOP.prototype.cngparameters=function(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot){
     clearTimeout(this.to);
     this.mde=this.mde||zxcmde;
     zxccurve=zxccurve||this.curve||'';
     this.time=zxctime||this.time||2000;
     if (zxcsrtfin[0]==zxcsrtfin[1]) return;
     for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
      var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
      if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
      if (zxcsrtfin[zxc0]==0) zxcsrtfin[zxc0]=0.00001;
     }
     if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
     this.curve=zxccurve.charAt(0).toLowerCase();
     this.sf=[(!zxcmde.match('olor'))?[zxcsrtfin[0]]:zxcRGBSplit(zxcsrtfin[0]),(!zxcmde.match('olor'))?[zxcsrtfin[1]]:zxcRGBSplit(zxcsrtfin[1]),[]];
     this.srttime=new Date().getTime();
     this.inc=Math.PI/(2*this.time);
     this.cngltwhco();
    }
    
    zxcLTWHCOOOP.prototype.cngltwhco=function(){
     var zxcms=new Date().getTime()-this.srttime;
     for (var zxc0 in this.sf[1]){ this.sf[2][zxc0]=(this.curve=='s')?Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.sin(this.inc*zxcms)+this.sf[0][zxc0]):(this.curve=='c')?(this.sf[1][0])-Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.cos(this.inc*zxcms)):(this.sf[1][zxc0]-this.sf[0][zxc0])/this.time*zxcms+this.sf[0][zxc0]; }
     this.cngstyle(this.sf[2]);
     if (zxcms<this.time) this.setTimeOut('cngltwhco();',10);
     else this.cngstyle(this.sf[1]);
    }
    
    zxcLTWHCOOOP.prototype.cngstyle=function(zxcltwhco){
     if (this.mde.match('olor')) this.obj.style[this.mde.replace('-','')]='rgb('+zxcltwhco[0]+','+zxcltwhco[1]+','+zxcltwhco[2]+')';
     else if (this.mde!='opacity') this.obj.style[this.mde.replace('-','')]=Math.max(zxcltwhco[0],0)+'px';
     else this.opacity(zxcltwhco[0]);
    }
    
    zxcLTWHCOOOP.prototype.opacity=function(zxcopc){
     if (zxcopc<0||zxcopc>100) return;
     if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
     else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
     else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
     else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
    }
    
    zxcLTWHCOOOP.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    function zxcStyleValue(zxcel,zxcp){
     if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
     return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
    }
    
    function zxcRGBSplit(zxccol){
     if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol.substring(5,7),16); }
     zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
     return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
    }
    
    
    //-->
    </script>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // By Vic Phillips (04-July-2007) http://www.vicsjavascripts.org.uk
    
    
    // Functional Code - No Need to Change
    
    function zxcInitSlideMenu(zxcid,zxcmax){
     var zxcp=document.getElementById(zxcid);
     var zxcclds=zxcNoTxtNodes(zxcp);
     zxcp.data=[zxcclds[0],zxcclds[0].offsetHeight,zxcmax];
     zxcES(zxcclds[0],{height:zxcmax+'px'});
     for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
      zxcAddEvt(zxcclds[zxc0],'zxcSlideMenuOpen','mouseover');
     }
    }
    
    function zxcSlideMenuOpen(){
     var zxcp=this.parentNode;
     if (this!=zxcp.data[0]){
      zxcChangeLTWHCO('height',zxcp.data[0],parseInt(zxcStyleValue(zxcp.data[0],'height')),zxcp.data[1],'sin',1000);
      zxcp.data[0]=this;
      zxcChangeLTWHCO('height',zxcp.data[0],parseInt(zxcStyleValue(zxcp.data[0],'height')),zxcp.data[2],'sin',1000);
     }
    }
    
    
    var zxcEvt=0;
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxcp){ zxcp.appendChild(zxcele); }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    function zxcNoTxtNodes(zxcp){
     var zxcclds=zxcp.childNodes,zxcary=[];
     for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
     for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
     return zxcclds;
    }
    
    function zxcStyleValue(zxcobj,zxcp){ //  pass object and property, returns property value
     if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
     return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    
    function zxcAddEvt(zxc,zxcfun,zxcevt){
     zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    
    /*]]>*/
    </script></head>
    
    <body onload="zxcInitSlideMenu('m1',100)">
    
    <div id="m1" style="position:relative;width:100px;border:solid black 1px;" >
    <div class="item" >Item 1</div>
    <div class="item" >Item 2</div>
    <div class="item" >Item 3</div>
    <div class="item" >Item 4</div>
    <div class="item" >Item 5</div>
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks a lot Vic for your help, does images i want to use for the menu have to be the same size as the extended menu item or not.
    also, what's the best site according to you for learning javascripts?
    many thanks again vic...

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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>
    <style type="text/css">
    /*<![CDATA[*/
    .item {
      position:relative;height:50px;background-Color:#FFCC66;border:solid black 1px;
    }
    
    /*]]>*/
    </style>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Change Left, Top, Width, Height, Color, Opacity (06-March-2007) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height, Color, Opacity style
    // (or other 'px' style properties) of an element over a specified period of time.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    // If not assigned the style position of the element will be assigned as 'position:absolute;' by the script.
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcChangeLTWHCO('left','tst1',[20,260],2000);'
    // where:
    // parameter 0 = 'left', 'top', 'width', 'height', 'color', 'background-Color', 'opacity' etc.             (string)
    //               Note: the first character after the hyphen must be be upper case, all others lower case.
    //                     With the exception of opacity and color the property value units is in 'px'.
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 1 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 2 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = (optional) there are two types of progressive change 'sin' and 'cos' plus a liner change. ('sin', 'cos' or liner, defaults to liner)
    //                'sin' progression starts fast and ends slow.
    //                'cos' progression starts slow and ends fast.
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  The function may be re-executed with a different set of parameters (start/finish time, progression type or period)
    //  whenever required, say from an onclick/mouseover/out event. The original progression type and period parameters
    //  will be retained unless re-specified, the start and finish parameters must be specified.
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code (about 3.7K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    var zxcOOPCnt=0;
    
    function zxcChangeLTWHCO(zxcmde,zxcobj,zxcsrt,zxcfin,zxccurve,zxctime,zxcplot){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
     var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
     if (zxcoop) zxcoop.cngparameters(zxcmde,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
     else zxcobj[zxcmde.replace('-','')+'oop']=new zxcLTWHCOOOP(zxcmde,zxcobj,[zxcsrt,zxcfin],zxccurve,zxctime,zxcplot);
    }
    
    function zxcLTWHCOOOP(zxcmde,zxcobj,zxcsrtfin,zxccurve,zxctime,zxcplot){
     if (zxcsrtfin[0]==zxcsrtfin[1]) return;
     if (zxcStyleValue(zxcobj,'position')=='static'&&(zxcmde=='left'||zxcmde=='top')) zxcobj.style.position='absolute';
     this.to=null;
     this.ref='zxcltwhco'+zxcOOPCnt++;
     window[this.ref]=this;
     this.obj=zxcobj;
     this.cngparameters(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot);
    }
    
    zxcLTWHCOOOP.prototype.cngparameters=function(zxcmde,zxcsrtfin,zxccurve,zxctime,zxcplot){
     clearTimeout(this.to);
     this.mde=this.mde||zxcmde;
     zxccurve=zxccurve||this.curve||'';
     this.time=zxctime||this.time||2000;
     if (zxcsrtfin[0]==zxcsrtfin[1]) return;
     for (var zxc0=0;zxc0<zxcsrtfin.length;zxc0++){
      var zxcobj=document.getElementById(zxcsrtfin[zxc0]);
      if (zxcobj){ zxcsrtfin[zxc0]=zxcStyleValue(zxcobj,zxcmde); if (!this.mde.match('olor')) zxcsrtfin[zxc0]=parseInt(zxcsrtfin[zxc0]); }
      if (zxcsrtfin[zxc0]==0) zxcsrtfin[zxc0]=0.00001;
     }
     if (this.mde=='opacity'&&(zxcsrtfin[0]<0||zxcsrtfin[0]>100||zxcsrtfin[0]<0||zxcsrtfin[0]>100)) return;
     this.curve=zxccurve.charAt(0).toLowerCase();
     this.sf=[(!zxcmde.match('olor'))?[zxcsrtfin[0]]:zxcRGBSplit(zxcsrtfin[0]),(!zxcmde.match('olor'))?[zxcsrtfin[1]]:zxcRGBSplit(zxcsrtfin[1]),[]];
     this.srttime=new Date().getTime();
     this.inc=Math.PI/(2*this.time);
     this.cngltwhco();
    }
    
    zxcLTWHCOOOP.prototype.cngltwhco=function(){
     var zxcms=new Date().getTime()-this.srttime;
     for (var zxc0 in this.sf[1]){ this.sf[2][zxc0]=(this.curve=='s')?Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.sin(this.inc*zxcms)+this.sf[0][zxc0]):(this.curve=='c')?(this.sf[1][0])-Math.floor((this.sf[1][zxc0]-this.sf[0][zxc0])*Math.cos(this.inc*zxcms)):(this.sf[1][zxc0]-this.sf[0][zxc0])/this.time*zxcms+this.sf[0][zxc0]; }
     this.cngstyle(this.sf[2]);
     if (zxcms<this.time) this.setTimeOut('cngltwhco();',10);
     else this.cngstyle(this.sf[1]);
    }
    
    zxcLTWHCOOOP.prototype.cngstyle=function(zxcltwhco){
     if (this.mde.match('olor')) this.obj.style[this.mde.replace('-','')]='rgb('+zxcltwhco[0]+','+zxcltwhco[1]+','+zxcltwhco[2]+')';
     else if (this.mde!='opacity') this.obj.style[this.mde.replace('-','')]=Math.max(zxcltwhco[0],0)+'px';
     else this.opacity(zxcltwhco[0]);
    }
    
    zxcLTWHCOOOP.prototype.opacity=function(zxcopc){
     if (zxcopc<0||zxcopc>100) return;
     if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
     else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
     else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
     else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
    }
    
    zxcLTWHCOOOP.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    function zxcStyleValue(zxcel,zxcp){
     if (zxcel.currentStyle) return zxcel.currentStyle[zxcp.replace('-','')];
     return document.defaultView.getComputedStyle(zxcel,null).getPropertyValue(zxcp.toLowerCase());
    }
    
    function zxcRGBSplit(zxccol){
     if (zxccol.match('#')){ zxccol=parseInt(zxccol.substring(1,3),16)+','+parseInt(zxccol.substring(3,5),16)+','+parseInt(zxccol.substring(5,7),16); }
     zxccol=zxccol.replace(/[rgb()\s]/g,'').split(',');
     return [parseInt(zxccol[0]),parseInt(zxccol[1]),parseInt(zxccol[2])];
    }
    
    
    //-->
    </script>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // By Vic Phillips (04-July-2007) http://www.vicsjavascripts.org.uk
    
    
    // Functional Code - No Need to Change
    
    function zxcInitSlideMenu(zxcid,zxcmax){
     var zxcp=document.getElementById(zxcid);
     var zxcclds=zxcNoTxtNodes(zxcp);
     zxcp.data=[zxcclds[0]];
     var zxcmax=parseInt(zxcclds[1].className.replace(/\D/g,''));
     var zxcmin=(parseInt(zxcStyleValue(zxcp,'height'))-zxcmax)/(zxcclds.length-1);
     for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
      zxcES(zxcclds[zxc0],{height:((zxc0==0)?zxcmax:zxcmin)+'px'});
      zxcAddEvt(zxcclds[zxc0],'zxcSlideMenuOpen','mouseover');
     }
    }
    
    function zxcSlideMenuOpen(){
     var zxcp=this.parentNode;
     var zxcclds=zxcNoTxtNodes(zxcp);
     var zxcmax=parseInt(this.className.replace(/\D/g,''));
     var zxcmin=(parseInt(zxcStyleValue(zxcp,'height'))-zxcmax)/(zxcclds.length-1);
     if (this!=zxcp.data[0]){
      for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
       zxcChangeLTWHCO('height',zxcclds[zxc0],parseInt(zxcclds[zxc0].style.height),(zxcclds[zxc0]==this)?zxcmax:zxcmin,'sin',1000);
      }
      zxcp.data[0]=this;
     }
    }
    
    
    var zxcEvt=0;
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxcp){ zxcp.appendChild(zxcele); }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    function zxcNoTxtNodes(zxcp){
     var zxcclds=zxcp.childNodes,zxcary=[];
     for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
     for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
     return zxcclds;
    }
    
    function zxcStyleValue(zxcobj,zxcp){ //  pass object and property, returns property value
     if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
     return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    
    function zxcAddEvt(zxc,zxcfun,zxcevt){
     zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    
    /*]]>*/
    </script></head>
    
    <body onload="zxcInitSlideMenu('m1',100)">
    
    <div id="m1" style="position:relative;overflow:hidden;height:300px;width:100px;border:solid black 1px;" >
    <div class="item 100" >Item 1</div>
    <div class="item 150" >Item 2</div>
    <div class="item 80" >Item 3</div>
    <div class="item 60" >Item 4</div>
    <div class="item 60" >Item 5</div>
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •