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