Opened 14 years ago

Last modified 7 years ago

#3176 open bug

Resizable: Buggy behavior when trying to make an iframe resizable

Reported by: [email protected]… Owned by:
Priority: major Milestone: 2.0.0
Component: ui.resizable Version: 1.5.2
Keywords: resizable iframe handle resize Cc:
Blocked by: Blocking:

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 (11)

comment:1 Changed 14 years ago by Cloudream

Milestone: → 1.6

comment:2 Changed 14 years ago by paul

Milestone: 1.6 → 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.

comment:3 Changed 14 years ago by eduardo

Resolution: → wontfix
Status: new → closed

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

comment:4 Changed 14 years ago by Scott González

Resolution: wontfix
Status: closed → reopened

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

comment:5 Changed 14 years ago by rdworth

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

comment:6 Changed 13 years 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();
  }

comment:7 Changed 13 years ago by watanabe

See Ticket #4903

comment:8 Changed 10 years ago by Scott González

Milestone: 1.next → 2.0.0
Owner: eduardo deleted
Status: reopened → assigned

comment:9 Changed 10 years ago by Scott González

Status: assigned → open

comment:10 Changed 10 years ago by mikesherov

Summary: Buggy behavior when trying to make an iframe resizable → Resizable: Buggy behavior when trying to make an iframe resizable

comment:11 Changed 7 years ago by Scott González

#14929 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.