How do I toggle an iframe to maximize or minimize in javascript?

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!

PS kudos to James Padolsey for the getDocHeight() function

Answer 2

         **//here is the script**

   <script src="Scripts/Jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
   jQuery(function ($) {
    $('#min1').click(function () {
        var iframeheight = $('#iframe1').width();
        if (iframeheight == 934) {
            $('#iframe1').width(462);
            document.getElementById('divFrame2').style.display = "block";
        }
    });
    $('#max1').click(function () {
        var iframeheight = $('#iframe1').width();
        if (iframeheight == 462) {
            $('#iframe1').width(934);
            document.getElementById('divFrame2').style.display = "none";
        }
    });
    $('#min2').click(function () {
        var iframeheight = $('#iframe2').width();
        if (iframeheight == 934) {
            $('#iframe2').width(462);
            document.getElementById('divFrame1').style.display = "block";
        }
    });
    $('#max2').click(function () {
        var iframeheight = $('#iframe2').width();
        if (iframeheight == 462) {
            $('#iframe2').width(934);
            document.getElementById('divFrame1').style.display = "none";
        }
    });
});
 </script>

**//style**
 <style type="text/css">
.bdr
 {
    border: 1px solid #6593cf;
 }
</style>

    **//aspx sample**
     <form id="form1" runat="server">
     <table><tr><td >
     <div id="divFrame1" class="bdr">
       <div>
        <img id="min1" src="Images/Minimize.jpg" width="13" height="14" border="0" alt="" />
        <img id="max1" src="Images/Maximize.jpg" name="Image6" width="13" height="14" border="0"
            id="Image6" alt="" />
         </div>
         <iframe name="content" id="iframe1" src="http://www.dynamicdrive.com/forums/archive/index.php/t-2529.html"
        frameborder="0" height="321" width="462"></iframe>
     </div>
    </td ><td >
      <div id="divFrame2" class="bdr">
    <div>
        <img id="min2" src="Images/Minimize.jpg" width="13" height="14" border="0" alt="" />
        <img id="max2" src="Images/Maximize.jpg" name="Image6" width="13" height="14" border="0"
            id="Image7" alt="">
     </div>
    <iframe name="content" id="iframe2" src="http://www.w3schools.com/default.asp" frameborder="0"
        height="321" width="462"></iframe>
   </div>
   </td></tr></table>
    </form>