CODEWITHSUNDEEP
javascriptjqueryiframejquery-mobile
Sheehan Alam
Sheehan Alam

Reputation: 60909

How can I maximize/minimize an iFrame?

I have a page that has 2 iFrames. I want to add a button that maximizes or minimizes both iframes. This button should be on each iframe. I'm using jQuery but not sure how to go about doing this.

Upvotes: 1

Views: 7990

Answers (4)

SHAURAJ SINGH
SHAURAJ SINGH

Reputation: 517

  **//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>

Upvotes: 0

SeanCannon
SeanCannon

Reputation: 78006

If it's right in the body, you can scale it to match the parent: 

$('resizeBtn').click(function(){
    $('#iframe1').css('position','absolute').animate({
        height: $(this).parent().height() + 'px',
        width:  $(this).parent().width()  + 'px'
    },500);
});

Upvotes: 2

Grego
Grego

Reputation: 2250

Look theres not a way to do that cross browser, but what you can do, is set a new bigger Height of an Iframe to maximize. To minimize, you are gonna have to use display: none in it, and create a div shaped like a bar and an onclick event attached to it, that when its clicked, hide itself and set display: static/block to your IFrame.

$("#iframe_div").hide(); in the minimize button next to your iframe and the $(this).remove(); $("#iframe_div").show(); in the bar div to Maximize.

Upvotes: 0

David Houde
David Houde

Reputation: 4778

Something like this will toggle the invisibility of the iframe. 

$('#button-id').click(function() {
  $('#iframe-id').toggle();
});

This has to be done by the parent DOM, as the iframe does not have permission to manipulate elements outside of itself.

Upvotes: 0

Related Questions