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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Slidein/slideout left pane

    what im trying to achieve is a single frame content area that has a 250px wide slide in/slide out left frame that will hold any content that hovers OVER the main page using mouse activity to trigger it

    I've search around and found quasi appropriate solutions but nothing that actually works that way i want it

    im open to any suggestions
    IF I DID GOOD THROW ME A REP POINT

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    AZ, USA
    Posts
    685
    Thanks
    6
    Thanked 46 Times in 46 Posts
    You're talking about HTML frames, as in the <frame> element, right? If so, you're going to have a hard time finding a "slide in/slide out" frame. I've never seen a <frame> element animated like that, and on top of that, <frame>s are deprecated by the w3c. Many current javascript coders like to adhere to the current web standards, and some (like me) won't consider participating in something that goes against our holy doctrine (the w3c) .

    However, having said that, here's a nice solution that does what you want, I think. I've actually used it before: http://www.mibhouse.org/pokemon_jojo...bbsidebar.html. If needed, you could have it dynamically load AJAX content depending on what you need, making it function like an iframe but much better.

  • #3
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    actually... a div that is positioned off screen could be made to slide in and out like he wants. give it the right z index to be on top and you're done.

    i'm trying to remember where i saw it done... i'll see if i can look it up. it had some good examples.

  • #4
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @ohgod: thats what im thinking
    IF I DID GOOD THROW ME A REP POINT

  • #5
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @binaryweapon: the only issue with that solution is that the DIV is created with a class and not an ID so it's a real PITA to add content to it
    IF I DID GOOD THROW ME A REP POINT

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 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>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (13-March-2008) DRAFT
    // 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.
    
    // **** 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.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** 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 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     if (zxcsrtfin[0]==zxcsrtfin[1]) return;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  this.opacity(this.data[0]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this), 10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else  this.opacity(this.data[0]);
     }
    }
    
    zxcBAnimatorOOP.prototype.opacity=function(zxcopc){
     if (zxcopc<0||zxcopc>100){ return; }
     this.obj.style.filter='alpha(opacity='+zxcopc+')';
     this.obj.style.opacity=this.obj.style.MozOpacity=this.obj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function zxcSlide(zxcid,zxcspd,zxcud){
     var zxcobj=document.getElementById(zxcid);
     if (!zxcobj.leftoop){
      zxcobj.srt=zxcobj.offsetLeft;
      zxcBAnimator('left',zxcobj,zxcobj.srt,0,zxcspd);
     }
     else {
      zxcBAnimator('left',zxcobj,zxcobj.leftoop.data[0],zxcud?0:zxcobj.srt,zxcspd);
     }
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <div id="tst" style="position:absolute;z-Index:101;left:-230px;top:50px;width:250px;height:250px;background-Color:red;"
    onmouseover="zxcSlide('tst',1000,true);"
    onmouseout="zxcSlide('tst',500,false);"
    
    ></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/

  • #7
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    this is actually what im looking for to the 'T'

    http://statsdemo.smartertools.com

    i had to use site id is 2, login and pw are demo (http://www.smartertools.com/SmarterStats/Demo.aspx)

    you see how the left side collapses but has a 'gripper' on it so to speak
    IF I DID GOOD THROW ME A REP POINT


  •  

    Posting Permissions

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