CODEWITHSUNDEEP
javascripthtmliframe
Roman Goyenko
Roman Goyenko

Reputation: 7070

Make iframe expand/collapse

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.

Upvotes: 0

Views: 12777

Answers (2)

Yatharth Agarwal
Yatharth Agarwal

Reputation: 4564

Source: "Full screen" <iframe>

You can use either traditional JS or jQuery to achieve this. jQuery is a JS library that is meant to allow cross-browser DOM handling in a sane way.

If I were you, I might code it as (using jQuery):

$('iframe#myid').click(function() {
    $('iframe#' + current).removeClass('current');
    $('iframe#myid').addClass('current');
    var current = '#myid';
});

with the CSS code as:

body, iframe {
    margin: 0px; //to normalize the default stylesheet applied by the browser
}

iframe.current {
    position: absolute;

    top: 0; 
    left: 0;

    height: 100%;
    width: 100%;

    z-index: 999;
}

Upvotes: 1

user1080806
user1080806

Reputation:

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.

Upvotes: 2

Related Questions