Animated Collapsible DIV's in an Iframe: getting height with Iframe SSI script II

[dan_gva]

1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem: How to get Iframe SSI script II's dynamic Height retrieving feature to work alongside with an iFrame containing Animated Collapsible DIV's.

I display pages, which contain animated collapsible divs, through an Iframe.
This Iframe must have a height and an overflow declaration set in HTML/CSS in order to avoid its scrollbars to display.

Now, if a collapsible DIV is expanded, the Iframe container doesn't dynamically increase its height,
causing either the content to be clipped or iframes' scrollbars to appear.

The Iframe SSI script II dynamically adjusts an Iframe's height to its content.
But what if the content's height itself is adjusted upon a script run ?

Then it won't work, because the Iframe SSI script II calculates the Iframe height upon
the starting state of the content page, i.e. unexpanded DIV's.

To have a clearer view of this issue, see the 2 examples below:
1. On this page, click on the "Formations" root link on the left-hand side navbar; this leads to a page with a static height. Iframe SSI script II works as intented.
2. Now click any of the sublinks under "Formations"; these directly open one specific animated collapsible DIV upon page load (thank you for this, ddadmin!).

The Iframe SSI script II gets the unexpanded page's height, but too early (before the DIV is expanded).
The animated opening of the DIV modifies the global page height, making the iframe "too short" and scrollbars to appear (in FF) and the content to be clipped (in IE6).

Would there be an "easy" way to base Iframe SSI script II height calculations on Animated Collapsible DIV ones,
or on an on-the-fly height modification detection method, in order that the resulting Iframe's height is sufficient,
definitely ensuring that the Iframe scrollbars will never ever display ?

Any help most welcome!
Dan

PS: I have tried to remove the contents out of the iframe, and to write them directly inside the page.
It works, but then my nav (which is JS/CSS UL list-based) doesn't anymore: when enclosing the nav itself in a small Iframe
on the left column, the subsections can't be seen because they outreach the iframe width limit.

A JavaScript "client-side include" could do the trick, but I don't wan't the main nav to rely exclusively on JS.
Putting the nav in a SSI would work, but I'd like to avoid this too.

Therefore dynamically getting height seems to be the only workable solution.
At least as far as I see. Any clues ?

[ddadmin]

The Iframe SSI script wasn't designed to resize itself past the initial page load, so this may or may not work. What you can try to do is modify Animated Collapsible DIV so the resizeCaller() function is called each time a DIV finishes animating. Inside animatedcollapse, add the additions in red:

	else{ //if animation finished
		this.divObj.style.height=(direction=="down")? this.contentheight+"px" : 0
		this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or not
		this.runtimer=null
		resizeCaller()
	}

May work, but then again, I wouldn't be surprised if it doesn't quite.

[dan_gva]

Thank you for your answer.

It doesn't work.

What do you think about this idea: since Animated Collapsible DIV calculates the height of each DIV, create a loop that sums the height of all DIVs and stores it in a variable.

Then, pass the value of this variable to Iframe SSI script II (which will probably be located on another page, so store it in the script's cookie).

If a DIV is slided, recalculate the global height and repass it to Iframe SSI script II.

Last but not least, tell Iframe SSI script II to reexecute each time it gets a fresh new variable value...

[dan_gva]

Just in case someone else would like to try the same approach, here are my conclusions and how I solved my problem:

- The approach of dynamically setting the iframe height is far too complex; I gave up
- I rebuilt my layout without an iframe, hence solving the height problem:
now it's the page height itself which changes, and this solves the scrollbars problem
(since it's the page, the scrollbar adapts beautifully whenever a div is expanded)
- This was possible thanks to SSI, which allowed me to store my nav in an include.

You may have a look at this implementation of the animated collapsible divs script to see the result: www.h2osa.com

Cheers!
Dan