Search jQuery

jQuery Forum

Developing jQuery UI

n_suneel

jQuery ui resizable iframeFix

Under review

Maybe later
Under review
In-progress
Implemented
Will not implement

in Developing jQuery UI • 11 years ago

Hi,

In my code i have a div which is resizable. This div contains an iframe in it. And when i resize this div it is not smooth. So i thought providing an iframeFix option to resizable, similar to Draggable would be helpful. When i added iframeFix code in my javascript for resizable , it started working fine. Now resizing is more smooth.

Here is the code i used inside by resizable, this is exactly same as draggable iframeFix.

start:function(event,ui){
    activatePortlet(jQuery(this).attr("id"));
    var o = $(this).data('draggable').options;
    jQuery("iframe").each(function() {
     jQuery('<div class="ui-resizable-iframeFix" style="background: #fff;"></div>')
     .css({
      width: this.offsetWidth+"px", height: this.offsetHeight+"px",
      position: "absolute", opacity: "0.001", zIndex: 1000
     })
     .css(jQuery(this).offset())
     .appendTo("body");
    });
   },
   stop: function(event,ui){
    jQuery("div.ui-resizable-iframeFix").each(function() { this.parentNode.removeChild(this); }); //Remove frame helpers
  }

I thought this would be helpful for everyone, so posting it here. If possible please accomodate this in future JQuery UI releases. I am using jquery ui 1.7.2 version.

Replies(5)

serkank

Re: jQuery ui resizable iframeFix

11 years ago

Same problem here too. I've applied the same idea, copying the iframeFix from draggable component to resizable. I've also copied the option too. Here's the full patch, which is against 1.8r3. Unfortunately forum does not allow me to submit the patch as an attachment.

Note that, I've noticed one-minor issue. The first time resizing is used, this patch does not work. It is the second time (that is you release resizing and re-resize..), it works smoothly.

--- ./jquery-ui-orig/development-bundle/ui/jquery.ui.resizable.js    Sat Feb 27 19:55:06 2010
+++ ./jquery-ui/development-bundle/ui/jquery.ui.resizable.js    Tue Mar 16 10:51:01 2010
@@ -28,6 +28,7 @@
         grid: false,
         handles: "e,s,se",
         helper: false,
+        iframeFix: false,
         maxHeight: null,
         maxWidth: null,
         minHeight: 10,
@@ -787,6 +788,25 @@
     }

});
+
+$.ui.plugin.add("resizable", "iframeFix", {
+    start: function(event, ui) {
+        var o = $(this).data('resizable').options;
+        $(o.iframeFix === true ? "iframe" : o.iframeFix).each(function() {
+            $('<div class="ui-resizable-iframeFix" style="background: #fff;"></div>')
+            .css({
+                width: this.offsetWidth+"px", height: this.offsetHeight+"px",
+                position: "absolute", opacity: "0.001", zIndex: 1000
+            })
+            .css($(this).offset())
+            .appendTo("body");
+        });
+    },
+    stop: function(event, ui) {
+        $("div.ui-resizable-iframeFix").each(function() { this.parentNode.removeChild(this); }); //Remove frame helpers
+    }
+});
+

var num = function(v) {
     return parseInt(v, 10) || 0;

k.sanders

Re: Re: jQuery ui resizable iframeFix

10 years ago

Regarding Serkank's idea,
If you change the width and height to 100% it will work perfectly!
eg.

    .css({
                width: "100%", height: "100%",
                position: "absolute", opacity: "0.001", zIndex: 1000,
            })

:D

Hope it helps

rwhitbeck

Re: jQuery ui resizable iframeFix

11 years ago

http://dev.jqueryui.com/ticket/5352

Jason Kel..

Re: jQuery ui resizable iframeFix

7 years ago

Instead of adding this functionality to the start and stop of resizeable, I added it to the mousedown and mouseup events of the dialogue prototype. This way the re-sizing works smoothly right away the first time you try to resize.