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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    67
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Expanding and Collapsing Left Panel ... ??

    Hello:

    I have a page layout that I am trying to add functionality to, but I am stumped.

    Not sure if vanilla JavaScript is the answer of JQuery, but I am fine with either. I am not finding the solution I need in my searches on Google, so I am hoping someone here can show me how to do this.

    Please see my attached image.

    I want to have a feature that will allow a user to click a button next to the left panel and the left panel will collapse, allowing the content area to expand and take up the whole area. Then if the user clicks the button, the left panel expands back to where it was. I am thinking the panel is 25% of the main container and the content area is 75%.

    Anyone help me? I am a bit stuck ..

    I also wanted to know if I can have the default state (when the user first comes to the site) have the left panel open, and let he/she close if he/she wishes to do so. Also, is is possible to have some kind of cookie that will remember if it is opened or closed, for when he/she goes to another page?

    Thanks in advance!

    Expanding and Collapsing Left Panel ... ??-panel-expand.png

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    would have thought that changing the left position rather than width was best but

    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[*/
    
    #Container {
      position:absolute;left:0px;top:100px;width:100%;height:400px;
    }
    
    .left {
      position:absolute;left:0px;top:0px;width:200px;height:400px;background-Color:#FFCC66;
    }
    
    .right {
      position:absolute;left:200px;top:0px;width:700px;height:400px;background-Color:#FFFFCC;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="Container" >
      <div class="left" >
       <input id="b1" type="button" name="Toggle" value="Toggle"/><br />
       <input id="b2" type="button" name="Toggle" value="In" onmouseup="zxcAccordian.InOut('Container',false);"/><br />
       <input id="b3" type="button" name="Toggle" value="Out"/>
      </div>
      <div class="right" ></div>
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // by: Vic Phillips - http://www.vicsjavascripts.org/  - (24-Febuary-2014)
    
    
    var zxcAccordian={
    
     InOut:function(id,io,ms){
      var o=this['zxc'+id],ms,z0=0;
      if (o){
       io=typeof(io)=='boolean'?io:!o.io;
       o.io=io;
       ms=typeof(ms)=='number'&&ms>20?ms:o.ms;
       ms=ms*Math.abs((o.a[1][4]-o.a[1][io?2:3]+.1)/(o.a[1][2]-o.a[1][3]));
       for (z0=0;z0<3;z0++){
        this.animate(o,o.a[z0],o.a[z0][4],o.a[z0][io?2:3],new Date(),ms);
       }
       document.cookie=o.id+'='+io+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path/;':';');
      }
     },
    
     init:function(o){
      var id=o.ParentID,max=o.LeftMax,min=o.LeftMin,ms=o.Animate,io=o.InOut,add=o.AddEvents,days=o.Persistence,p=document.getElementById(id),clds=p?p.childNodes:[],days=(isFinite(days*1)&&days>0)||days=='session'?days:-1,ck=this.cookie(id),io=days!=-1?ck=='true'?true:ck=='false'?false:io:io,a=[],n,i,z0=0,z1=0,z2=0;
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        a.push(clds[z0]);
       }
      }
      if (a.length==2&&typeof(max)=='number'&&max<100&&typeof(min)=='number'&&min>=0){
       a[0].style.left='0px';
       o.id=id;
       o.p=p;
       o.psz=p.offsetWidth;
       o.max=max/100;
       o.min=min;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.io=io!==false;
       o.a=[[a[0],'width',o.psz*o.max,o.min],[a[1],'width',o.psz*(1-o.max),o.psz-o.min],[a[1],'left',o.psz*o.max,o.min]];
       o.days=isFinite(days*1)?days*1:days;
       for (z1=0;z1<3;z1++){
        this.animate(o,o.a[z1],o.a[z1][io?2:3],o.a[z1][io?2:3],new Date(),20);
       }
       for (;z2<add.length;z2++){
        if (add[z2]&&add[z2][0]){
         n=document.getElementById(add[z2][0]);
         i=add[z2][1];
         if (n&&this[add[z2][2]]){
          this.addevt(n,i=='click'||i=='mouseover'||i=='mouseout'||i=='mousedown'?i:'mouseup',add[z2][2],o.id,add[z2][3]);
         }
        }
       }
       this.addevt(window,'resize','resize',o);
       this['zxc'+id]=o;
      }
     },
    
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[4]=Math.max(0,n);
       a[0].style[a[1]]=a[4]+'px';
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[4]=t;
       a[0].style[a[1]]=t+'px';
      }
     },
    
     resize:function(o){
      o.psz=o.p.offsetWidth;
      o.a=[[o.a[0][0],'width',o.psz*o.max,o.min,o.a[0][4]],[o.a[1][0],'width',o.psz*(1-o.max),o.psz-o.min,o.a[1][4]],[o.a[1][0],'left',o.psz*o.max,o.min,o.a[2][4]]];
      this.InOut(o.id,o.io,50);
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'=[^;]+','i');
      return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    
    }
    
    zxcAccordian.init({
     ParentID:'Container',   // the unique ID Name of the parent DIV.                                                (string)
     LeftMax:25,             // the maximum width of the left panel as a percentage of the parent DIV.               (number)
     LeftMin:100,            // the minimum width of the left panel.                                                 (number)
     Animate:1000,           //(optional) the animation duration in millisec.                                        (number, default = 1000)
     InOut:true,             //(optional) the initial in/out state, true = out, false = in.                          (boolean, default = true = out)
     AddEvents:[             //(optional) an array defining the event call to add to elements to control the script. (array, see Script Functions, default = inline event calls)
      // field 0 = the unique ID name of the element.
      // field 1 = the event type.
      // field 2 = the script function name.
      // field 3 = the control parameter to pass to the function.
      ['b1','mouseup','InOut'],
      ['b3','mouseup','InOut',true]
     ],
     Persistence:'session',  //(optional) restore the last step position for the browser session.                    (string, default = no persistence)
     Persistence:1           //(optional) the number of days to restore the step position.                           (number, default = no persistence)
    });
    /*]]>*/
    </script>
    </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/

  • Users who have thanked vwphillips for this post:

    spacepoet (02-25-2014)

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    67
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Hi.

    Thanks for posting this. I will give it a whirl.

    Someone told me I might be able to do this with JQuery Animate To() as well ... not sure.


  •  

    LinkBacks (?)

    1. 02-24-2014, 11:04 AM

    Posting Permissions

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