dgelinas
asked on
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!!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Nice touch! That solves that problem :-)
ASKER
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.getElement ById('iFra me');
oFrm.style.width = w
oFrm.style.height = h
}
function resizeIframe(){
if(!skip){
var thisFrame = parent.document.frames['if rame'];
var w1 = thisFrame.ButtonArea.offse tWidth+Men uDiv.offse tTop;
var h1 = bodyStuff.offsetHeight+thi sFrame.Men uDiv.offse tHeight+th isFrame.Me nuDiv.offs etTop+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.getElement ById('iFra me'); //This ends up only resizing body contents
oFrm.style.width = w
oFrm.style.height = h
parent.document.frames['if rame'].res izeTo(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;
}
function reSet(){
w = 300;
h = 464;
oFrm = parent.document.getElement
oFrm.style.width = w
oFrm.style.height = h
}
function resizeIframe(){
if(!skip){
var thisFrame = parent.document.frames['if
var w1 = thisFrame.ButtonArea.offse
var h1 = bodyStuff.offsetHeight+thi
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.getElement
oFrm.style.width = w
oFrm.style.height = h
parent.document.frames['if
} else {
document.onmousemove = null;
}
}
function reSizeStart(dir){
x=event.clientX;
y=event.clientY;
q=dir
document.onmousemove = resizeIframe;
}
function reSizeDone(){
document.onmousemove = null;
}
I did not understood one word what you are saying.
Please post the complete code and describe your actions and what you expect.
Please post the complete code and describe your actions and what you expect.
ASKER
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('if rame');
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(if rameId);
WaitForClose ();
return TheWindowOpen;
}
return;
}
function iframeOpen ( iframeUrl, iframeId ) {
var iframe = document.createElement('if
document.body.appendChild(
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(if
WaitForClose ();
return TheWindowOpen;
}
return;
}
Please post the complete code and describe your actions and what you expect.