2012-08-23 2 views
2

J'utilise la fonction resizable() de jQuery pour redimensionner un div contenant un iframe dont la largeur et la hauteur sont définies sur 100% (pour remplir l'espace de la div). Le problème que je rencontre est que lorsque je redimensionne vers l'intérieur (rétrécissant la div) dans les deux sens - si je bouge la souris trop vite, elle perd le graphe (rendant la div fixe) et ne redimensionne plus jusqu'à ce que je repositionne ma souris sur le coin.jQuery redimensionner iframe s'arrête lors de la contraction rapide

Cela fonctionne très bien lors de l'expansion de la div, je peux le faire en déplaçant rapidement la souris, mais il est ennuyeux d'avoir à déplacer soigneusement la div pour s'assurer qu'il ne reste pas bloqué.

Des idées?

Merci beaucoup.

EDIT:

J'ai téléchargé l'exemple sur mon site: http://stefandunn.co.uk/concepts/drag&drop/

simplement cliquer sur le widget "page Web" et redimensionnez.

Répondre

8

Dans le passé, j'ai le même problème et la solution/bidouille que j'ai trouvé est la suivante:

$("yourObjectToResize").resizable({ 
    //containment: 'parent', 
    minWidth: 400, 
    minHeight: 200, 
    start: function() { 
     $(".widget_box").each(function (index, element) { 
      var d = $('<div class="iframeCover" style="zindex:99;position:absolute;width:100%;top:0px;left:0px;height:' + $(element).height() + 'px"></div>'); 
      $(element).append(d); 
     }); 
    }, 
    stop: function() { 
     $('.iframeCover').remove(); 
    } 
}); 
+0

cela ne semble pas avoir n'importe quel effet :( –

+0

Essayez maintenant J'ai changé le sélecteur où la couverture de cadre est insérée à la classe dans votre échantillon –

+0

merci qui fonctionne maintenant un régal :) –

0

Sans un exemple en direct, c'est difficile à dire, mais je suppose que c'est à cause d'autres événements de survol/souris dans l'iframe lui-même. Vous pouvez essayer de regarder les options suivantes lorsque le redimensionnement se produit:

.preventDefault(); 
.stopPropagation(); 
.stopImmediatePropagation(); 

Ok avait un coup d'œil, je pense que si vous utilisez l'événement start: sur .resizeable(), pour définir le z-index de la page web div au-dessus de l'index z de l'iframe et ensuite le remettre ci-dessous sur l'événement stop: vous devriez être bon. Hmm Je ne pense pas que l'index z fonctionnera, essayez les options ci-dessus dans l'événement de démarrage de .resizable();

Si j'ai le temps plus tard, je vais essayer de mettre en place un test approprié et de jeter un œil sur vous.

+0

ive a ajouté un lien vers la réponse mise à jour démo –

+0

... – Zac