Comment faire pour développer automatiquement un IFrame dans un élément DIV lorsque l'utilisateur clique dessus?

Question

J'ai une source IFrame (JQuery-UI Datepicker) intégrée dans un DIV. Lorsque l'utilisateur clique à l'intérieur de l'iframe pour sélectionner une date, l'iframe devrait croître en largeur et en hauteur pour s'adapter à la taille du calendrier de datpicker. Une fois la date choisie, l'IFrame doit revenir à sa taille d'origine.

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>

Ai-je besoin de définir la taille de div ainsi que la taille iFrame? Où est-ce que je me trompe?

Answer 1

Résolu! Les fonctions de clic et de flou qui ne déclenchent pas sont le problème. A dû employer le mousenter et mouseleave avec la fonction de jquery animate pour obtenir l'iframe pour se développer et se contracter.

Voici mon 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>

Answer 2

Je pense que vous pouvez faire cela en travaillant sur divs au lieu de l'iframe. Je votre violon modifié ici: 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(); 

et

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

Donc, si vous cliquez dans le iframe div, il redimensionne, et si vous cliquez en dehors, il redimensionne. (Je ne sais pas à propos de la page jqueryui cible, datepicker ne semble pas faire exploser l'événement click.)