Ticket #3176 (reopened bug)

Opened 2 years ago

Last modified 4 months ago

Buggy behavior when trying to make an iframe resizable

Reported by: zibaldon@… Owned by: eduardo
Priority: major Milestone: 1.next
Component: ui.resizable Version: 1.5.2
Keywords: resizable iframe handle resize Cc:

Description

When you create an iframe and make it resizable, it has a strange behavior when you try to make it bigger and then smaller. I'll post a code example to make it clear.

You have to create 2 files

Main.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Resizable iframe example</title>
        <script src="http://code.jquery.com/jquery-latest.js">
        </script>
        <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js">
        </script>
        <script src="jquery.ui.all.js">
        </script>
    </head>
    <body>
        <div id="divFrame" style="width:250px; height:200px">
            <iframe id="ChildFrame" name="ChildFrame" src="child.htm" style="width:100%; height:100%">
            </iframe>
        </div>
        <script type="text/javascript">
            $("#divFrame").resizable({
                handles: 'all'
            })
        </script>
    </body>
</html>

and Child.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Child</title>
    </head>
    <body>
        <div id="justAnElement" style="background-color:yellow; width:150px; height:100px; border-style:solid; border-color:black;">
            <div id="HeaderTitle" style="background-color:red; ">
                Try to resize the iframe
            </div>
            Make it bigger and then smaller
        </div>
    </body>
</html>

Now try to resize the iframe, make it bigger and then smaller moving the mouse quite fast. You'll notice that the handle of the iframe keep being dragged even if you release the mouse button, besides when trying to make the iframe smaller the handle isn't dragged if the pointer is on the iframe's surface. This happens on Firefox 3.0.1, IE 7 and Safari 3.1.2

Change History

Changed 2 years ago by Cloudream

  • milestone set to 1.6

Changed 21 months ago by paul

  • milestone changed from 1.6 to 1.next

This is something that can only be fixed with a transparent overlay in top of the iframe during resizing, and such a helper is planned for a release > 1.6.

Changed 20 months ago by eduardo

  • status changed from new to closed
  • resolution set to wontfix

When you are over an iframe you loose the focus of the parentWindow. We have no fixes for this now.

Changed 20 months ago by scott.gonzalez

  • status changed from closed to reopened
  • resolution wontfix deleted

Paul clearly laid out an idea for how to handle this.

Changed 20 months ago by rdworth

Also, until have a fix for something, it should stay open.

Changed 8 months ago by rodolfo

I solved it with the eduardo's solution. My code: 

  start: function(){
    ifr = $('iframe');
    var d = $('<div></div>');

    $('#content').append(d[0]);
    d[0].id = 'temp_div';
    d.css({position:'absolute'});
    d.css({top: ifr.position().top, left:0});
    d.height(ifr.height());
    d.width('100%');
  },
  stop: function(){
    $('#temp_div').remove();
  }

Changed 4 months ago by watanabe

See Ticket #4903

Note: See TracTickets for help on using tickets.