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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Apr 2007
    Posts
    144
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Reverse / Drop Up Style Accordion

    Howdy Community,

    I have spent the past 4 hours strait looking for and trying to modify an accordion style vertical menu who's elements slide out of the top and up instead of the normal slide out of the bottom and down action.

    I would like it in jQuery, but at this point I will take any library. Thanks for your help. I know some have wondered "What have you tried making work".. jQuery Tools, Jquery UI and about 3 other scripts that looked updateable. All I couldn't get to work.

    I also made an attempt to fake an accordion using show/hide toggles and this sorta worked, but it didnt have the nice slide as well as my data didnt move on page in the right direction. Headache!!!

    Help!! Thanks, Cesar

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 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[*/
    
    #tst {
      position:relative;width:200px;
    }
    
    .content {
      background-Color:#FFFFCC;
    }
    
    .header {
      background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    // Animate (24-June-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // The functional code size is 1.39K
    
    // **** 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;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 2 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                 (variable)
    //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
    //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype={
    
     animate:function(srt,fin,ms,scale,c){
      clearTimeout(this.to);
      this.time=ms||this.time||0;
      this.data=[srt,srt,fin];
      this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
      this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
      d=Math.max(d,s<0||f<0?d:0);
      this.data[0]=d;
      this.apply();
      if (ms<this.mS){
       this.to=setTimeout(function(){oop.cng(); },10);
      }
      else {
       this.data[0]=this.data[2];
       this.apply();
       if (this.Complete) this.Complete(this);
      }
     },
    
     apply:function(){
      if (isFinite(this.data[0])){
       if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
       else zxcOpacity(this.obj,this.data[0]);
      }
     }
    
    }
    
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    </script>
    
    
    </head>
    
    <body>
    
    </body>
     <div id="tst" >
    
      <div class="item" >
       <div class="content" >
        <div class="inner">
         Line 1<br />
         Line 2<br />
         Line 3<br />
         Line 4<br />
        </div>
       </div>
       <div class="header" >Header 1</div>
      </div>
    
       <div class="item" >
       <div class="content" >
        <div class="inner">
         Line 21<br />
         Line 22<br />
         Line 23<br />
         Line 24<br />
        </div>
       </div>
       <div class="header" >Header 2</div>
      </div>
    
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Accordion(o){
     var oop=this,obj=document.getElementById(o.ID),clds=obj.childNodes,div,oop,z0=0;
     for (;z0<clds.length;z0++){
      if (clds[z0].nodeType==1){
       div=clds[z0].getElementsByTagName('DIV')[0];
       div.style.overflow='hidden';
       div.style.height='0px';
       oop=new zxcAnimate('height',div,0);
       this.addevt(clds[z0],'mouseover','expand',oop);
       this.addevt(clds[z0],'mouseout','expand',oop);
      }
     }
     this.ms=o.AnimateDuration||500;
    }
    
    Accordion.prototype={
    
     expand:function(e,oop){
      var h=oop.obj.getElementsByTagName('DIV')[0].offsetHeight;
      oop.animate(oop.data[0],e.type=='mouseover'?h:0,this.ms,[0,h]);
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     }
    
    }
    
    new Accordion({
     ID:'tst',
     AnimateDuration:500
    });
    
    
    /*]]>*/
    </script>
    
    </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/

  • Users who have thanked vwphillips for this post:

    cesarcesar (07-16-2011)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    Hello!

    Man I just had a long detailed explanation written out for you but accidentally hit backspace when my cursor wasn't focused on this textarea... so it hit the back button and I lost everything I wrote. I'm not too happy about that right now. I wrote the script below and explained every single step along the way so that you could recreate anything similar using jQuery in the future. I'm going to go look for a plugin that temporarily saves everything I enter into textareas in Chrome lol... or make one. I would really like to know why this isn't a default setting.

    But here's the script I put together for you, and if you'd like me to explain how it works, I'll give it another go. You can just copy and paste this into a new html file:
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Test</title>
    		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    		<style type="text/css">
    			.UpMenus {
    				position:absolute;
    				top:50%;
    				left:50%;
    				width:300px;
    				height:20px;
    				margin:-11px 0px 0px -150px;
    				padding:0px;
    				border:1px solid #00f;
    				border-left:0px;
    				list-style-type:none;
    				overflow:visible;
    			}
    			.UpMenus li {
    				position:relative;
    				float:left;
    				width:99px;
    				height:16px;
    				padding:2px 0px;
    				border:0px;
    				border-left:1px solid #00f;
    				background:#fff;
    				font:normal 12px sans-serif;
    				text-align:center;
    				overflow:visible;
    				cursor:pointer;
    				cursor:hand;
    			}
    			.UpMenus li:hover {
    				background:#00f;
    				color:#fff;
    			}
    			.UpMenus li ol {
    				position:absolute;
    				bottom:21px;
    				left:-1px;
    				width:100px;
    				height:0px;
    				margin:0px;
    				padding:0px;
    				border-right:1px solid #99f;
    				list-style-type:none;
    				overflow:hidden;
    			}
    			.UpMenus li ol li {
    				color:#000;
    				border-left:1px solid #99f;
    				border-top:1px solid #99f;
    			}
    			.UpMenus li ol li:hover {
    				background:#99f;
    				color:#fff;
    			}
    		</style>
    		<script type="text/javascript">
    			$(function(){
    				$('.UpMenus > li').click(function(){
    					var ol = $(this).children('ol');
    					ol.animate({height:(ol.height()?0:ol.children('li').length*21)+'px'},800);
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<ul class="UpMenus">
    			<li>
    				Menu 1
    				<ol>
    					<li>Sub 1 for Menu 1</li>
    					<li>Sub 2 for Menu 1</li>
    				</ol>
    			</li>
    			<li>
    				Menu 2
    				<ol>
    					<li>Sub 1 for Menu 2</li>
    					<li>Sub 2 for Menu 2</li>
    					<li>Sub 3 for Menu 2</li>
    					<li>Sub 4 for Menu 2</li>
    				</ol>
    			</li>
    			<li>
    				Menu 3
    				<ol>
    					<li>Sub 1 for Menu 3</li>
    					<li>Sub 2 for Menu 3</li>
    					<li>Sub 3 for Menu 3</li>
    				</ol>
    			</li>
    		</ul>
    	</body>
    </html>
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com

  • Users who have thanked tfburges for this post:

    cesarcesar (07-16-2011)

  • #4
    Regular Coder
    Join Date
    Apr 2007
    Posts
    144
    Thanks
    5
    Thanked 0 Times in 0 Posts
    @vwpillips & @tfburges - thank you both. both are not exactly what im looking for but close.

    @vwphillips you where closest except i need the bottom element to stick to the bottom. So imagine the menu was set about 200px low on the page and everything moved up.. but keeping the bottom most element always sticks and never moves.

    @tfburges - can this menu be stacked vertically instead of horizontal? i tried to adjust the code a little but only kept breaking it.

    Thanks guys.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 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[*/
    
    #tst {
      position:relative;top:200px;left:100px;width:200px;border:solid red 1px;
    }
    
    .content {
      background-Color:#FFFFCC;
    }
    
    .header {
      background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    // Animate (24-June-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // The functional code size is 1.39K
    
    // **** 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;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 2 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                 (variable)
    //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
    //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype={
    
     animate:function(srt,fin,ms,scale,c){
      clearTimeout(this.to);
      this.time=ms||this.time||0;
      this.data=[srt,srt,fin];
      this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
      this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
      d=Math.max(d,s<0||f<0?d:0);
      this.data[0]=d;
      this.apply();
      if (ms<this.mS){
       this.to=setTimeout(function(){oop.cng(); },10);
      }
      else {
       this.data[0]=this.data[2];
       this.apply();
       if (this.Complete) this.Complete(this);
      }
     },
    
     apply:function(){
      if (isFinite(this.data[0])){
       if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
       else zxcOpacity(this.obj,this.data[0]);
      }
     }
    
    }
    
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    </script>
    
    
    </head>
    
    <body>
    
    </body>
     <div id="tst" >
    
      <div class="item" >
       <div class="content" >
        <div class="inner">
         Line 1<br />
         Line 2<br />
         Line 3<br />
         Line 4<br />
        </div>
       </div>
       <div class="header" >Header 1</div>
      </div>
    
       <div class="item" >
       <div class="content" >
        <div class="inner">
         Line 21<br />
         Line 22<br />
         Line 23<br />
         Line 24<br />
        </div>
       </div>
       <div class="header" >Header 2</div>
      </div>
    
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Accordion(o){
     var oop=this,obj=document.getElementById(o.ID),clds=obj.childNodes,bottom=o.Bottom,divs,oop,os=0,z0=0;
     for (;z0<clds.length;z0++){
      if (clds[z0].nodeType==1){
       divs=clds[z0].getElementsByTagName('DIV');
       divs[0].style.overflow='hidden';
       divs[0].style.height='0px';
       oop=new zxcAnimate('height',divs[0],0);
       this.addevt(clds[z0],'mouseover','expand',oop);
       this.addevt(clds[z0],'mouseout','expand',oop);
       os+=divs[0].offsetHeight;
      }
     }
     obj.style.top=bottom-os+'px';
     this.bottom=bottom-os;
     this.os=os;
     this.obj=new zxcAnimate('top',obj,this.bottom);
     this.ms=o.AnimateDuration||500;
    }
    
    Accordion.prototype={
    
     expand:function(e,oop){
      var h=oop.obj.getElementsByTagName('DIV')[0].offsetHeight,obj=this.obj,top=this.bottom,top=[top-h,top];
      oop.animate(oop.data[0],e.type=='mouseover'?h:0,this.ms,[0,h]);
      obj.animate(obj.data[0],top[e.type=='mouseover'?0:1],this.ms,top);
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     }
    
    }
    
    new Accordion({
     ID:'tst',
     AnimateDuration:500,
     Bottom:200
    });
    
    
    /*]]>*/
    </script>
    
    </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/

  • #6
    Regular Coder
    Join Date
    Apr 2007
    Posts
    144
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Vic, its so close, many thanks. The bottom element doesn't need any sub-content so I added a heading 3 in, but could only get it to work if i just removed the data inside "inner". Is that the best I can do. Its ok if so.

    One other thing, with my adjusted code (just adding the Header 3), the whole nave floats up and down. can this be stuck better? Here is my code below.

    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[*/
    
    #tst {
      position:relative;top:200px;left:100px;width:200px;border:solid red 1px;
    }
    
    .content {
      background-Color:#FFFFCC;
    }
    
    .header {
      background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    // Animate (24-June-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // The functional code size is 1.39K
    
    // **** 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;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 2 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                 (variable)
    //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
    //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype={
    
     animate:function(srt,fin,ms,scale,c){
      clearTimeout(this.to);
      this.time=ms||this.time||0;
      this.data=[srt,srt,fin];
      this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
      this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
      d=Math.max(d,s<0||f<0?d:0);
      this.data[0]=d;
      this.apply();
      if (ms<this.mS){
       this.to=setTimeout(function(){oop.cng(); },10);
      }
      else {
       this.data[0]=this.data[2];
       this.apply();
       if (this.Complete) this.Complete(this);
      }
     },
    
     apply:function(){
      if (isFinite(this.data[0])){
       if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
       else zxcOpacity(this.obj,this.data[0]);
      }
     }
    
    }
    
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    </script>
    
    
    </head>
    
    <body>
    
    </body>
     <div id="tst" >
    
      <div class="item" >
       <div class="content" >
        <div class="inner">
         Line 1<br />
         Line 2<br />
         Line 3<br />
         Line 4<br />
        </div>
       </div>
       <div class="header" >Header 1</div>
      </div>
    
       <div class="item" >
       <div class="content" >
        <div class="inner">
         Line 21<br />
         Line 22<br />
         Line 23<br />
         Line 24<br />
        </div>
       </div>
       <div class="header" >Header 2</div>
      </div>
    
       <div class="item" >
       <div class="content" >
        <div class="inner">
        </div>
       </div>
       <div class="header" >Header 3</div>
      </div>
    
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Accordion(o){
     var oop=this,obj=document.getElementById(o.ID),clds=obj.childNodes,bottom=o.Bottom,divs,oop,os=0,z0=0;
     for (;z0<clds.length;z0++){
      if (clds[z0].nodeType==1){
       divs=clds[z0].getElementsByTagName('DIV');
       divs[0].style.overflow='hidden';
       divs[0].style.height='0px';
       oop=new zxcAnimate('height',divs[0],0);
       this.addevt(clds[z0],'mouseover','expand',oop);
       this.addevt(clds[z0],'mouseout','expand',oop);
       os+=divs[0].offsetHeight;
      }
     }
     obj.style.top=bottom-os+'px';
     this.bottom=bottom-os;
     this.os=os;
     this.obj=new zxcAnimate('top',obj,this.bottom);
     this.ms=o.AnimateDuration||500;
    }
    
    Accordion.prototype={
    
     expand:function(e,oop){
      var h=oop.obj.getElementsByTagName('DIV')[0].offsetHeight,obj=this.obj,top=this.bottom,top=[top-h,top];
      oop.animate(oop.data[0],e.type=='mouseover'?h:0,this.ms,[0,h]);
      obj.animate(obj.data[0],top[e.type=='mouseover'?0:1],this.ms,top);
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     }
    
    }
    
    new Accordion({
     ID:'tst',
     AnimateDuration:500,
     Bottom:200
    });
    
    
    /*]]>*/
    </script>
    
    </html>
    Last edited by cesarcesar; 07-16-2011 at 06:14 PM. Reason: atrocious spelling!

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    425
    Thanks
    3
    Thanked 62 Times in 61 Posts
    Is this what you want?

    It's a little trickier but still very easy to modify.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Test</title>
    		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    		<style type="text/css">
    			.UpMenus {
    				position:absolute;
    				bottom:50%;
    				left:50%;
    				width:102px;
    				height:63px;
    				margin:31px 0px 0px -50px;
    				padding:0px;
    				border:0px;
    				border-bottom:1px solid #00f;
    				list-style-type:none;
    				overflow:visible;
    			}
    			.UpMenus li {
    				position:relative;
    				float:left;
    				width:100px;
    				height:16px;
    				padding:2px 0px;
    				border:1px solid #00f;
    				border-bottom:0px;
    				background:#fff;
    				font:normal 12px sans-serif;
    				text-align:center;
    				overflow:visible;
    				cursor:pointer;
    				cursor:hand;
    			}
    			.UpMenus li:hover {
    				background:#00f;
    				color:#fff;
    			}
    			.UpMenus li ol {
    				position:absolute;
    				bottom:21px;
    				width:98px;
    				height:0px;
    				margin:0px;
    				padding:0px;
    				border:1px solid #00f;
    				border-top:0px;
    				border-bottom:0px;
    				list-style-type:none;
    				overflow:hidden;
    			}
    			.UpMenus li ol.Up {
    				border-top:1px solid #00f;
    			}
    			.UpMenus li ol li {
    				color:#000;
    				border:0px;
    				border-bottom:1px solid #99f;
    			}
    			.UpMenus li ol li:hover {
    				background:#99f;
    				color:#fff;
    			}
    		</style>
    		<script type="text/javascript">
    			$(function(){
    				$('.UpMenus > li').click(function(){
    					var ol = $(this).children('ol');
    					var h = ol.height()?0:ol.children('li').length*21;
    					var d = 0;
    					ol.parent().parent().children('li').each(function(){
    						if (d) {
    							$(this).children('ol').animate({height:'0px'},800,function(){$(this).removeClass('Up');});
    							$(this).animate({top:'0px'},800);
    						} else if (!$(this).is(ol.parent())) {
    							$(this).children('ol').animate({height:'0px'},800,function(){$(this).removeClass('Up');});
    							$(this).animate({top:(h?-h:'0')+'px'},800);
    						} else {
    							if (h) ol.addClass('Up');
    							ol.animate({height:h+'px'},800);
    							$(this).animate({top:'0px'},800,function(){if(!h){ol.removeClass('Up')}});
    							d = 1;
    						}
    					});
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<ul class="UpMenus">
    			<li>
    				Menu 1
    				<ol>
    					<li>Sub 1 for Menu 1</li>
    					<li>Sub 2 for Menu 1</li>
    				</ol>
    			</li>
    			<li>
    				Menu 2
    				<ol>
    					<li>Sub 1 for Menu 2</li>
    					<li>Sub 2 for Menu 2</li>
    					<li>Sub 3 for Menu 2</li>
    					<li>Sub 4 for Menu 2</li>
    				</ol>
    			</li>
    			<li>
    				Menu 3
    				<ol>
    					<li>Sub 1 for Menu 3</li>
    					<li>Sub 2 for Menu 3</li>
    					<li>Sub 3 for Menu 3</li>
    				</ol>
    			</li>
    		</ul>
    	</body>
    </html>
    Edit:
    I got bored and added 3 more menus with one giant sub menu on menu 5 just to see it in action with a bunch of menus. Took about 20 seconds to add the extra menus.

    In case it isn't obvious, all you have to do to modify the menus' structure is add/edit/remove something like this from any ul or ol element with the "UpMenu" class:
    Code:
    			<li>
    				Some Menu
    				<ol>
    					<li>A sub menu!</li>
    					<li>And another!</li>
    				</ol>
    			</li>
    And here's the code with a bunch of menus.
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Test</title>
    		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    		<style type="text/css">
    			.UpMenus {
    				position:absolute;
    				bottom:50%;
    				left:50%;
    				width:102px;
    				height:126px;
    				margin:63px 0px 0px -50px;
    				padding:0px;
    				border:0px;
    				border-bottom:1px solid #00f;
    				list-style-type:none;
    				overflow:visible;
    			}
    			.UpMenus li {
    				position:relative;
    				float:left;
    				width:100px;
    				height:16px;
    				padding:2px 0px;
    				border:1px solid #00f;
    				border-bottom:0px;
    				background:#fff;
    				font:normal 12px sans-serif;
    				text-align:center;
    				overflow:visible;
    				cursor:pointer;
    				cursor:hand;
    			}
    			.UpMenus li:hover {
    				background:#00f;
    				color:#fff;
    			}
    			.UpMenus li ol {
    				position:absolute;
    				bottom:21px;
    				width:98px;
    				height:0px;
    				margin:0px;
    				padding:0px;
    				border:1px solid #00f;
    				border-top:0px;
    				border-bottom:0px;
    				list-style-type:none;
    				overflow:hidden;
    			}
    			.UpMenus li ol.Up {
    				border-top:1px solid #00f;
    			}
    			.UpMenus li ol li {
    				color:#000;
    				border:0px;
    				border-bottom:1px solid #99f;
    			}
    			.UpMenus li ol li:hover {
    				background:#99f;
    				color:#fff;
    			}
    		</style>
    		<script type="text/javascript">
    			$(function(){
    				$('.UpMenus > li').click(function(){
    					var ol = $(this).children('ol');
    					var h = ol.height()?0:ol.children('li').length*21;
    					var d = 0;
    					ol.parent().parent().children('li').each(function(){
    						if (d) {
    							$(this).children('ol').animate({height:'0px'},800,function(){$(this).removeClass('Up');});
    							$(this).animate({top:'0px'},800);
    						} else if (!$(this).is(ol.parent())) {
    							$(this).children('ol').animate({height:'0px'},800,function(){$(this).removeClass('Up');});
    							$(this).animate({top:(h?-h:'0')+'px'},800);
    						} else {
    							if (h) ol.addClass('Up');
    							ol.animate({height:h+'px'},800);
    							$(this).animate({top:'0px'},800,function(){if(!h){ol.removeClass('Up')}});
    							d = 1;
    						}
    					});
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<ul class="UpMenus">
    			<li>
    				Menu 1
    				<ol>
    					<li>Sub 1 for Menu 1</li>
    					<li>Sub 2 for Menu 1</li>
    				</ol>
    			</li>
    			<li>
    				Menu 2
    				<ol>
    					<li>Sub 1 for Menu 2</li>
    					<li>Sub 2 for Menu 2</li>
    					<li>Sub 3 for Menu 2</li>
    					<li>Sub 4 for Menu 2</li>
    				</ol>
    			</li>
    			<li>
    				Menu 3
    				<ol>
    					<li>Sub 1 for Menu 3</li>
    					<li>Sub 2 for Menu 3</li>
    					<li>Sub 3 for Menu 3</li>
    				</ol>
    			</li>
    			<li>
    				Menu 4
    				<ol>
    					<li>Sub 1 for Menu 4</li>
    					<li>Sub 2 for Menu 4</li>
    					<li>Sub 3 for Menu 4</li>
    					<li>Sub 4 for Menu 4</li>
    					<li>Sub 5 for Menu 4</li>
    				</ol>
    			</li>
    			<li>
    				Menu 5
    				<ol>
    					<li>Sub 1 for Menu 5</li>
    					<li>Sub 2 for Menu 5</li>
    					<li>Sub 3 for Menu 5</li>
    					<li>Sub 4 for Menu 5</li>
    					<li>Sub 5 for Menu 5</li>
    					<li>Sub 6 for Menu 5</li>
    					<li>Sub 7 for Menu 5</li>
    				</ol>
    			</li>
    			<li>
    				Menu 6
    				<ol>
    					<li>Sub 1 for Menu 6</li>
    					<li>Sub 2 for Menu 6</li>
    				</ol>
    			</li>
    		</ul>
    	</body>
    </html>
    Last edited by tfburges; 07-17-2011 at 04:09 AM.
    I'm the founder of Loggur, a place to build and share web apps focused on maximizing efficiency and productivity:
    http://www.loggur.com

    My personal site and blog:
    http://www.tfburgess.com

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 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[*/
    
    #tst {
      position:relative;top:200px;left:100px;width:200px;border:solid red 1px;
    }
    
    .content {
      background-Color:#FFFFCC;
    }
    
    .header {
      background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    // Animate (24-June-2011)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on specified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // The functional code size is 1.39K
    
    // **** 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;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 2 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                 (variable)
    //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
    //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                (string, default = 'liner')
    //                 'sin' progression starts fast and ends slow.
    //                 'cos' progression starts slow and ends fast.
    //
    //  Note 1:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype={
    
     animate:function(srt,fin,ms,scale,c){
      clearTimeout(this.to);
      this.time=ms||this.time||0;
      this.data=[srt,srt,fin];
      this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
      this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime,s=this.data[1],f=this.data[2],d=Math.floor(this.c=='s'?(f-s)*Math.sin(this.inc*ms)+s:this.c=='c'?f-(f-s)*Math.cos(this.inc*ms):(f-s)/this.mS*ms+s);
      d=Math.max(d,s<0||f<0?d:0);
      this.data[0]=d;
      this.apply();
      if (ms<this.mS){
       this.to=setTimeout(function(){oop.cng(); },10);
      }
      else {
       this.data[0]=this.data[2];
       this.apply();
       if (this.Complete) this.Complete(this);
      }
     },
    
     apply:function(){
      if (isFinite(this.data[0])){
       if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
       else zxcOpacity(this.obj,this.data[0]);
      }
     }
    
    }
    
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    </script>
    
    
    </head>
    
    <body>
    
    </body>
     <div id="tst" >
    
      <div class="item" >
       <div class="content" >
        <div class="inner">
         Line 1<br />
         Line 2<br />
         Line 3<br />
         Line 4<br />
        </div>
       </div>
       <div class="header" >Header 1</div>
      </div>
    
       <div class="item" >
       <div class="content" >
        <div class="inner">
         Line 21<br />
         Line 22<br />
         Line 23<br />
         Line 24<br />
        </div>
       </div>
       <div class="header" >Header 2</div>
      </div>
    
       <div class="item" >
       <div class="content" >
       </div>
       <div class="header" >Header 3</div>
      </div>
    
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Accordion(o){
     var oop=this,obj=document.getElementById(o.ID),clds=obj.childNodes,divs,oop,z0=0;
     for (;z0<clds.length;z0++){
      if (clds[z0].nodeType==1){
       divs=clds[z0].getElementsByTagName('DIV');
       divs[0].style.overflow='hidden';
       divs[0].style.height='0px';
       if (divs[0].getElementsByTagName('DIV')[0]){
        oop=new zxcAnimate('height',divs[0],0);
        this.addevt(clds[z0],'mouseover','expand',oop);
        this.addevt(clds[z0],'mouseout','expand',oop);
       }
      }
     }
     this.top=obj.offsetTop;
     this.obj=new zxcAnimate('top',obj,this.top);
     this.ms=o.AnimateDuration||500;
    }
    
    Accordion.prototype={
    
     expand:function(e,oop){
      var h=oop.obj.getElementsByTagName('DIV')[0].offsetHeight,obj=this.obj,top=this.top,top=[top-h,top];
      oop.animate(oop.data[0],e.type=='mouseover'?h:0,this.ms,[0,h]);
      obj.animate(obj.data[0],top[e.type=='mouseover'?0:1],this.ms,top);
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     }
    
    }
    
    new Accordion({
     ID:'tst',
     AnimateDuration:500
    });
    
    
    /*]]>*/
    </script>
    
    </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/

  • Users who have thanked vwphillips for this post:

    cesarcesar (07-17-2011)

  • #9
    Regular Coder
    Join Date
    Apr 2007
    Posts
    144
    Thanks
    5
    Thanked 0 Times in 0 Posts
    @tfburges - perfect! thank you soooo much.

    @vwphillips - thanks to you as well. Your script still cause the menu to float around after a few click, but it was a great attempt.

    Thank you both. problem SOLVED!


  •  

    Posting Permissions

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