Results 1 to 2 of 2

Thread: Help with Animated Collapsible DIV v2.01 code

  1. #1
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Help with Animated Collapsible DIV v2.01 code

    Animated Collapsible DIV v2.01

    http://www.dynamicdrive.com/dynamici...edcollapse.htm

    I used the code and it's works great.

    I would like just ask if is any possibilities when i press the buttons it will collapse in its own table. Not to push the whole page down.

    Meaning if is any info under just push that instead push the whole page down.

    Like if you see yahoo.com, and you have a collapsable window for "sign in". When you put your mouse on it the whole page goes down, with the collapsable window. I want to avoid that and open the collapse in a certain size. Can I?

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You could assign the contents you're expanding/ contracting a CSS position of absolute, so they do not push down the rest of the page themselves. Then, manually add line breaks on the page based on how how you wish the gap to be:

    Code:
    <p><b>Example 1 (individual):</b></p>
    
    <a href="javascript:animatedcollapse.toggle('jason')"><img src="http://i25.tinypic.com/wa0img.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('jason')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('jason')">Slide Up</a>
    
    <div id="jason" style="width: 300px; background: #FFFFCC; display:none; position: absolute;">
    <b>Content inside DIV!</b><br />
    <b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
    </div>
    
    <br />
    <br />
    
    <p>Rest of page here</p>
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    kujhelyi (08-25-2008)

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
  •