DIV要素内のIFrameをユーザーがクリックしたときに自動展開する方法

Question

DIVの内部に埋め込まれたIFrameソース（JQuery-UI Datepicker）があります。ユーザーがiframeの内側をクリックして日付を選択すると、iframeの幅と高さが増えて、datepicker-calenderの高さに合わせる必要があります。日付ピッキングが完了すると、IFrameは元のサイズに戻ります。

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>

私はIFrameのサイズと一緒にdivのサイズを設定する必要がありますか？ どこが間違っていますか？

Answer 1

解決済み！トリガーしないクリックとブラー機能が問題でした。 mousenterとmouseleaveをjqueryのanimate関数とともに使用して、iframeを拡張および縮小する必要がありました。ここで

は私のコードです：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>

Answer 2

iframeの代わりにdivで作業することでこれを行うことができます。 は、私がここにあなたのフィドルを変更：https://jsfiddle.net/bkelley13/faLeucpp/1/

var dateframe = $("#myframediv"); 

    $(document).click(function() {    
    dateframe.width(100); 
    dateframe.height(50); 
    dateframe.resize(); 
}); 

dateframe.click(function(ev) {  
    $(this).width(400); 
    $(this).height(200); 
    ev.stopPropagation(); 
}).resize(); 

と

<div id="myframediv" style="background-color:yellow"> 
    IFrame Floater Div 
    <iframe name="frame_1" src="https://jqueryui.com/resources/demos/datepicker/default.html"> 
    </iframe> 

をですから、IFRAMEのDIVにクリックした場合、それはサイズを変更し、そしてあなたはそれの外側をクリックした場合、それはサイズを変更します。 （私はターゲットjqueryuiのページについてはわかりませんが、datepickerはクリックイベントをバブルアップしないようです）