Opened 12 years ago
Last modified 4 years ago
#3176 open bug
Resizable: Buggy behavior when trying to make an iframe resizable
| Reported by: | 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 12 years ago by
| Milestone: | → 1.6 |
|---|
comment:2 Changed 12 years ago by
| Milestone: | 1.6 → 1.next |
|---|
comment:3 Changed 12 years ago by
| 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 11 years ago by
| Resolution: | wontfix |
|---|---|
| Status: | closed → reopened |
Paul clearly laid out an idea for how to handle this.
comment:6 Changed 11 years ago by
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:8 Changed 8 years ago by
| Milestone: | 1.next → 2.0.0 |
|---|---|
| Owner: | eduardo deleted |
| Status: | reopened → assigned |
comment:9 Changed 8 years ago by
| Status: | assigned → open |
|---|
comment:10 Changed 8 years ago by
| Summary: | Buggy behavior when trying to make an iframe resizable → Resizable: Buggy behavior when trying to make an iframe resizable |
|---|
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.