Question

I have several apps inside iframes in the page that consolidates the apps (it acts as an app container).

I want to add a button somewhere that can expand and collapse the iframes to full size of the page.

The app now has a menu, header, footer, etc. and the application in iframe. When the user clicks say “+” button I want to expand the iframe to the full page and make everything else invisible. When they click it again I want to return to original size.

Maybe there is already something written that can make this happen, I tried to do some js on iframes and it seems hard to write browser independent code.

I can’t use HTML5 since we need to support IE7.

Answer 1

An example.

Basically, just give your expanded iframe these CSS attributes,

position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;

and it will fill its (relative) parent.