Solved

Mouse Drag Resizing of Iframe

Posted on 2003-10-30
8
1,447 Views
Last Modified: 2008-02-20
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!!
0
Comment
Question by:dgelinas
  • 4
  • 2
  • 2
8 Comments
 
LVL 10

Assisted Solution

by:NetGroove
NetGroove earned 200 total points
ID: 9653306
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
 
LVL 3

Accepted Solution

by:
superslamwich earned 200 total points
ID: 9653587
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
 
LVL 10

Assisted Solution

by:NetGroove
NetGroove earned 200 total points
ID: 9653740
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
 
LVL 3

Expert Comment

by:superslamwich
ID: 9653805
Nice touch!  That solves that problem :-)
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 6

Author Comment

by:dgelinas
ID: 9657719
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9658986
I did not understood one word what you are saying.

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

0
 
LVL 6

Author Comment

by:dgelinas
ID: 9659790
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9659927


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


0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Sums of coloumns in html/java 15 68
Download a website to hdd 2 52
Angular- typeahead works but need to change 2 things 5 19
Why my select dropdown does not work? 8 28
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now