Results 1 to 10 of 10

Thread: Animated Collapsible DIV

  1. #1
    Join Date
    Sep 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Animated Collapsible DIV

    Anyone know if this script can be modified so the expanded content is revealed "upwards". Eg, the "expand" link sits at bottom of a container - when clicked on the expanded div is revealed above it as if being "shoved up" from below?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    demonstration of concept
    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[*/
    .p {
      position:relative;left:100px;top:200px;width:100px;height:20px;background-Color:red;
    }
    
    #tst {
      position:absolute;overflow:hidden;left:0px;top:0px;width:100px;height:0px;background-Color:#FFFFCC;
    }
    
    /*]]>*/
    </style>
    <script src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript"></script>
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function Test(id,ms){
     this.obj=document.getElementById(id);
     this.maxh=this.obj.getElementsByTagName('DIV')[0].offsetHeight;
     this.top=this.obj.offsetTop;
     this.hoop=zxcBAnimator('height#',this.obj,this.maxh,0,10);
     this.hoop=zxcBAnimator('top#',this.obj,this.top-this.maxh,this.top,10);
     this.ms=ms||1000;
    }
    
    Test.prototype.Toggle=function(){
     this.hoop=zxcBAnimator('height#',this.obj,this.maxh,0,this.ms);
     this.hoop=zxcBAnimator('top#',this.obj,this.top-this.maxh,this.top,this.ms);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body onload="T=new Test('tst');">
    <div class="p" onclick="T.Toggle();">
    <div id="tst" >
     <div >
      Line 0 <br />
      Line 1 <br />
      Line 2 <br />
      Line 3 <br />
      Line 4 <br />
      Line 5 <br />
      Line 6 <br />
      Line 7 <br />
      Line 8 <br />
      Line 9 <br />
     </div>
    </div>
    Toggle
    </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. The Following User Says Thank You to vwphillips For This Useful Post:

    JimWormold (09-04-2009)

  4. #3
    Join Date
    Sep 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Wow Vic. That's exactly what I was looking for!

    Thanks very much. You've saved me a heap of trouble.

  5. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    better

    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[*/
    .p {
      position:relative;left:100px;top:200px;width:100px;height:20px;background-Color:red;
    }
    
    #tst {
      position:absolute;overflow:hidden;left:0px;top:0px;width:100px;height:0px;background-Color:#FFFFCC;
    }
    
    /*]]>*/
    </style>
    <script src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript"></script>
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function Test(id,ms){
     var obj=document.getElementById(id);
     this.maxh=obj.getElementsByTagName('DIV')[0].offsetHeight;
     this.top=obj.offsetTop;
     this.hoop=zxcBAnimator('height',obj,1,0,10);
     this.toop=zxcBAnimator('top',obj,this.top-1,this.top,10);
     this.ms=ms||1000;
    }
    
    Test.prototype.Toggle=function(){
     var ud=this.hoop.data[2]==0;
     this.hoop.update([this.hoop.data[0],ud?this.maxh:0],this.ms,[0,this.maxh]);
     this.toop.update([this.toop.data[0],ud?this.top-this.maxh:this.top],this.ms,[0,this.maxh]);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body onload="T=new Test('tst');">
    <div class="p" onclick="T.Toggle();">
    <div id="tst" >
     <div >
      Line 0 <br />
      Line 1 <br />
      Line 2 <br />
      Line 3 <br />
      Line 4 <br />
      Line 5 <br />
      Line 6 <br />
      Line 7 <br />
      Line 8 <br />
      Line 9 <br />
     </div>
    </div>
    Toggle
    </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/

  6. The Following User Says Thank You to vwphillips For This Useful Post:

    Renzo (09-24-2009)

  7. #5
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks vic, I'm using this script in my website, I know it's a prototype, but I must tell you that works fine in Firefox but in Explorer does not work, you might do something?

    Thanks

    PS: sorry for my english

  8. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    wgat version of IE are you using?
    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/

  9. The Following User Says Thank You to vwphillips For This Useful Post:

    Renzo (09-24-2009)

  10. #7
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    IE 7 is installed on my computer, I've got to try on other versions.

    Thank you for your speedy response

  11. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    just retested the code above in IE7 and it works for me.


    popst any modified code or your application or link to your application
    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/

  12. #9
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank you Vic, but I discovered the problem.
    I have the lightbox script that problem.
    Remove link to the lightbox js your script works perfectly.

    Ligtbox several problems apparently is not the first time I had trouble with this script.

    Thanks anyway for your interest.

  13. #10
    Join Date
    Sep 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Sorry if you have trouble, I discovered that the problem is only on IE and Firefox is fine with lightbox enabled.

Bookmarks

Posting Permissions

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