How to Auto-Expand an IFrame in a DIV element when user clicks inside it?

Question

I have an IFrame source (JQuery-UI Datepicker) embedded inside a DIV. When the user clicks inside the iframe to select a date, the iframe should grow in width and height to accomodate the height of the datepicker-calender. Once date picking is done, the IFrame should come back to its original size.

JSFiddle : https://jsfiddle.net/Jersey_Guy/yoc9jewv/

$(document).ready(function() {
    //debugger;
    var $w = $(window),
      $dateframe = $("iframe[src*='jqueryui']");

    $dateframe.blur(function() {
      console.log("Called Resize");
      $(this).width = 100;
      $(this).height = 100;
    }).resize();

    $dateframe.click(function() {
      console.log("Called Resize");
      $(this).width(200);
      $(this).height(400);
    }).resize();

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-zone tab-widget tabZoneSelected tabSuppressVizTooltipsAndOverlays tabZone-web fade-bg" id="tabZoneId1" style="z-index: 17; background-color: rgba(255, 255, 255, 0); width: 474px; height: 127px; top: 5px; left: 3px;">
  Outer Div
  <div class="tab-web tab-widget fade-in">
    Inner Div
    <div style="position: absolute;">
      IFrame Floater Div
      <iframe name="frame_1" src="https://jqueryui.com/resources/demos/datepicker/default.html" style="border: 0px none; width: 200px; height: 80px; top: 0px; left: 0px;">

      </iframe>
      End IFrame Div
    </div>
    End Inner Div
  </div>
  End Outer Div
</div>

Do I need to set the div size along with the IFrame size? Where am I going wrong?

Answer 1

Solved it ! The click and blur functions not triggering were the problem. Had to use the mousenter and mouseleave along with jquery animate function to get the iframe to expand and contract.

Here is my code: https://jsfiddle.net/Jersey_Guy/4zja94j4/

$(document).ready(function() {
  //debugger;
  var $w = $(window),
    $dateIframe = $("iframe[src*='jqueryui']"),
    $dateInnerDiv = $("#myframediv");

  $dateIframe.mouseleave(function() {
    console.log("Called Iframe Reduce");
    $(this).animate({
      width: "190px",
      height: "90px"
    }, 500);
    //Optional: slow down the exit to 500 ms in case user changes their mind
  });

  $dateIframe.mouseenter(function() {
    console.log("Called Iframe increase");
    $(this).animate({
      width: "390px",
      height: "290px"
    }, 0);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-zone tab-widget tabZoneSelected tabSuppressVizTooltipsAndOverlays tabZone-web fade-bg" id="tabZoneId1" style="z-index: 17; background-color:white; width: 500px; height: 300px; top: 5px; left: 3px;">
  Outer Div
  <div class="tab-web tab-widget fade-in" style="background-color:gray;">
    Inner Div
    <div id="myframediv" style="position: absolute; background-color:yellow;">
      IFrame Floater Div <a href="before">before</a>
      <iframe name="frame_1" src="https://jqueryui.com/resources/demos/datepicker/default.html" style="border: 0px none; width: 190px; height: 90px; top: 0px; left: 0px;  background-color:orange;">

      </iframe> End IFrame Div <a href="after">after</a>
    </div>
    End Inner Div
  </div>
  End Outer Div
</div>