PDA

View Full Version : Help with Animated Collapsible DIV v2.01 code



kujhelyi
08-19-2008, 07:04 PM
Animated Collapsible DIV v2.01

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.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?

ddadmin
08-19-2008, 10:36 PM
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:


<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>