Question

I’m using Prototype here and would like to build a simple toggler that toggles an iframe which contains the page the toggler is on to maximize to the browsers full size or minimize to its original size. Any ideas?

Answer 1

This works for me in IE7 & FF3.6 (only available at work).

function getDocWidth() {
    var D = document;
    return Math.max(
    Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
    Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
    Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
}
function getDocHeight() {
    var D = document;
    return Math.max(
    Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
    Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
    Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

var isFullScreen = false;
var orgDimensions = new Array();

function toggleFullScreen() {
    ifr = document.getElementById("iFrameWin");
    if (!isFullScreen) {
        orgDimensions[0] = ifr.style.width;
        orgDimensions[1] = ifr.style.height;
        ifr.style.width = getDocWidth() + "px";
        ifr.style.height = getDocHeight() + "px";
    }
    else {
        ifr.style.width = orgDimensions[0];
        ifr.style.height = orgDimensions[1];
    }
    isFullScreen = !isFullScreen;
}

Where th iframe is:

<iframe id="iFrameWin" src="http://www.google.se" width="400" height="300"/>

This ofcourse needs for you to set the padding and margin to the containing page to 0 in wich case you would need to toggle from inside the iframe, calling parent.toggleFullScreen() I think.

Hope it was what you were looking for!

P.S
kudos to James Padolsey for the getDocHeight() function