Mouse Drag Resizing of Iframe

I have table data on an Iframe, which I would love to enable it to be resizable.  A reg browser window is resizable by every corner you put the mouse on when it is not maximized.  If I could get an iframe to do the same the would be wonderful.  Possibly by clicking on an object on the page and dragging..  Thanks!!
LVL 6
dgelinasAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NetGrooveCommented:
How about this:

<HTML>
<HEAD>
<script>
var w = 100;
var h = 100;
var x;
var y;
var reSize = false;
function resizeIframe(){
  if (event.button==1){  
    w += (event.clientX-x)/20;
    h += (event.clientY-y)/20;
    if(w<100) w = 100;
    if(h<100) h = 100;
    oFrm = document.getElementById('iFrame');
    oFrm.style.width = w
    oFrm.style.height = h
  } else {
    document.onmousemove = null;
  }
}
function reSizeStart(){
  x=event.clientX;
  y=event.clientY;
  document.onmousemove = resizeIframe;
}
function reSizeDone(){
  document.onmousemove = null;
}
</script>
</HEAD>
<BODY onMouseDown="reSizeStart()" onMouseUp="reSizeDone()" bgcolor="whitesmoke">
<iframe name="iFrame" style="position:absolute;top:140; left:100; width:100; height:100">
</iframe>
</BODY>
</HTML>


0
superslamwichCommented:
Here's a little bit more functional version of NetGroove's script, however it's still not perfect.  It is extremely hard to reduce the size of the iframe in either one, because the mouse goes off of the "document" object and moves onto the iframe, so the mousemove isn't recorded.

<HTML>
<HEAD>
<script>
var w = 100;
var h = 100;
var x;
var y;
var q;
var reSize = false;
function resizeIframe(){
 if (event.button==1){  
   if(q=='h'||q=='d') w += (event.clientX-x)/20;
   if(q=='v'||q=='d') h += (event.clientY-y)/20;
   if(w<100) w = 100;
   if(h<100) h = 100;
   oFrm = document.getElementById('iFrame');
   oFrm.style.width = w
   oFrm.style.height = h
 } else {
   document.onmousemove = null;
 }
}
function reSizeStart(dir){
 x=event.clientX;
 y=event.clientY;
 q=dir
 document.onmousemove = resizeIframe;
}
function reSizeDone(){
 document.onmousemove = null;
}
</script>
</HEAD>
<BODY bgcolor="whitesmoke">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td onMouseDown="reSizeStart('d')" onMouseUp="reSizeDone()" style="cursor:nw-resize;overflow:hidden;height:2;width:2;background-color:blue;"></td>
    <td onMouseDown="reSizeStart('v')" onMouseUp="reSizeDone()" style="cursor:n-resize;overflow:hidden;height:2;background-color:blue;"></td>
    <td onMouseDown="reSizeStart('d')" onMouseUp="reSizeDone()" style="cursor:ne-resize;overflow:hidden;height:2;width:2;background-color:blue;"></td>
  </tr>
  <tr>
    <td onMouseDown="reSizeStart('h')" onMouseUp="reSizeDone()" style="cursor:e-resize;overflow:hidden;width:2;background-color:blue;"></td>
    <td><iframe name="iFrame" style="height:100;width:100;"></iframe></td>
    <td onMouseDown="reSizeStart('h')" onMouseUp="reSizeDone()" style="cursor:e-resize;overflow:hidden;width:2;background-color:blue;"></td>
  </tr>
  <tr>
    <td onMouseDown="reSizeStart('d')" onMouseUp="reSizeDone()" style="cursor:sw-resize;overflow:hidden;height:2;width:2;background-color:blue;"></td>
    <td onMouseDown="reSizeStart('v')" onMouseUp="reSizeDone()" style="cursor:n-resize;overflow:hidden;height:2;background-color:blue;"></td>
    <td onMouseDown="reSizeStart('d')" onMouseUp="reSizeDone()" style="cursor:se-resize;overflow:hidden;height:2;width:2;background-color:blue;"></td>
  </tr>
</table>
</BODY>
</HTML>

{Slam}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
NetGrooveCommented:
And here the real final improvement for Slam's version :)

function reSet(){
   w = 100;
   h = 100;
   oFrm = document.getElementById('iFrame');
   oFrm.style.width = w
   oFrm.style.height = h
}
</script>
</HEAD>
<BODY bgcolor="whitesmoke" onDblClick="reSet()">

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

superslamwichCommented:
Nice touch!  That solves that problem :-)
0
dgelinasAuthor Commented:
Isn't there a way so that when you start dragging the content will drag with as well instead of after you let go of the mouse? Because with this, dragging off the screen makes the whole iframe disappear.  



function reSet(){
   w = 300;
   h = 464;
   oFrm = parent.document.getElementById('iFrame');  
   oFrm.style.width = w
   oFrm.style.height = h
}


function resizeIframe(){
if(!skip){
  var thisFrame = parent.document.frames['iframe'];                             
  var w1 = thisFrame.ButtonArea.offsetWidth+MenuDiv.offsetTop;
  var h1 = bodyStuff.offsetHeight+thisFrame.MenuDiv.offsetHeight+thisFrame.MenuDiv.offsetTop+45;      
  skip =true;         
}
 if (event.button==1){  
   if(q=='h'||q=='d') w += (event.clientX-x)/20;
   if(q=='v'||q=='d') h += (event.clientY-y)/20;
   if(w<100) w = w1;
   if(h<100) h = h1;
   oFrm = parent.document.getElementById('iFrame');            //This ends up only resizing body contents  
   oFrm.style.width = w
   oFrm.style.height = h
   parent.document.frames['iframe'].resizeTo(w,h);                //This resizes the total iframe as well
 } else {
   document.onmousemove = null;
 }
}

function reSizeStart(dir){
 x=event.clientX;
 y=event.clientY;
 q=dir
 document.onmousemove = resizeIframe;
}

function reSizeDone(){
 document.onmousemove = null;
}
0
NetGrooveCommented:
I did not understood one word what you are saying.

Please post the complete code and describe your actions and what you expect.

0
dgelinasAuthor Commented:
This is how the iframe is created.  I used your code and made one of the images located on a corner graphic of a table in the iframe to be the element which invokes the function to resize.  

function iframeOpen ( iframeUrl, iframeId ) {                      
    var iframe = document.createElement('iframe');
    document.body.appendChild(iframe);
    iframe.outerHTML = "<iframe src='"+iframeUrl+"' name='"+iframeId+"' id='"+iframeId+"' allowtransparency  frameborder='0' scrolling='no' STYLE='position:absolute; display:block; top:80; z-index:999; left:150;'></iframe>";
    if(!WindowOpened) {
    WindowOpened = true;
    TheFrameOpen = document.frames[iframeId];
    TheWindowOpen = document.getElementById(iframeId);    
    WaitForClose ();
    return TheWindowOpen;
  }
  return;
  }
0
NetGrooveCommented:


Please post the complete code and describe your actions and what you expect.


0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.