dgelinas
asked on
onMousedown and drag, resize Iframe simultaneously
This code works well for dragging and resizing a div. I have an iframe inside of a div and I'm having trouble getting it to work..
There's a couple DIVs defined inside there.. I added the moveable = true to mine and I get 0 for my element when I click on my iframe.
<html>
<style>
DIV {cursor: hand}
</style>
<body style="font-family: verdana">
<H2>Simple Drag and Resize Example</h2>
<h4>Use alt-click to multi-select</h4>
<input type=button value="Moving, click to resize"
onclick="toggleMoveResize( this); return false">
<div moveable=true style="position: absolute;
top: 150px; left: 100px;
width: 100px; height: 100px;
background-color: red;
border: solid 2px black">
Click and drag me
</div>
<div moveable=true style="position: absolute;
top: 150px; left: 250px;
width: 100px; height: 100px;
background-color: blue;
border: solid 2px black">
Click and drag me
</div>
<script language="JavaScript">
var activeElements = new Array();
var activeElementCount = 0;
var lTop, lLeft;
var doMove = true;
var doResize = false;
function toggleMoveResize(e) {
if (doMove) {
doMove = false;
doResize = true;
e.value = "Resizing, Click to Move";
} else {
doMove = true;
doResize = false;
e.value = "Moving, Click to Resize";
}
}
function mousedown() {
var mp;
mp = findMoveable(window.event. srcElement );
if (!window.event.altKey) {
for (i=0; i<activeElementCount; i++) {
if (activeElements[i] != mp) {
activeElements[i].style.bo rderWidth = "2px";
}
}
if (mp) {
activeElements[0] = mp;
activeElementCount = 1;
mp.style.borderWidth = "4px";
} else {
activeElementCount = 0;
}
} else {
if (mp) {
if (mp.style.borderWidth != "4px") {
activeElements[activeEleme ntCount] = mp;
activeElementCount++;
mp.style.borderWidth = "4px";
}
}
}
window.status = activeElementCount;
lLeft = window.event.x;
lTop = window.event.y;
}
document.onmousedown = mousedown;
function mousemove() {
var i, dLeft, dTop;
if (window.event.button == 1) {
sx = window.event.x;
sy = window.event.y;
dLeft = sx - lLeft;
dTop = sy - lTop;
for (i=0; i<activeElementCount; i++) {
if (doMove)
moveElement(activeElements [i], dLeft, dTop);
if (doResize)
resizeElement(activeElemen ts[i], dLeft, dTop);
}
lLeft = sx;
lTop = sy;
return false;
}
}
function moveElement(mp, dLeft, dTop) {
var e
e = mp;
e.style.posTop += dTop;
e.style.posLeft += dLeft;
}
function resizeElement(mp, dLeft, dTop) {
var e;
e = mp;
e.style.posHeight += dTop;
e.style.posWidth += dLeft;
}
function findMoveable(e) {
if (e.moveable == 'true')
return e;
if (e.tagName == "BODY")
return null;
return findMoveable(e.parentEleme nt);
}
function findDefinedMoveable(e) {
if ((e.moveable == 'true') || (e.moveable == 'false'))
return e;
if (e.tagName == "BODY")
return null;
return findDefinedMoveable(e.pare ntElement) ;
}
function rfalse() {
return false;
}
document.onmousemove = mousemove;
document.onselectstart = rfalse;
</script>
</body>
</html>
THE BELOW CODE IS WHAT I USED TO CREATE MY DIV AND IFRAME
function iframeOpen ( iframeUrl, iframeId ) {
if(listBoxOpen){
clearTable();
}
parentSelected = true;
var iframe = document.createElement('if rame');
var divId = "d"+iframeId;
document.body.appendChild( iframe);
iframe.outerHTML = "<div id='"+divId+"' moveable='true' STYLE='position:absolute; top:80; z-index:999; left:150;'> <iframe WIDTH=100% HEIGHT=100% src='"+iframeUrl+"' name='"+iframeId+"' id='"+iframeId+"' allowtransparency frameborder='0' scrolling='no' STYLE='position:absolute; display:block;'></iframe>< /div>";
if(!WindowOpened) {
WindowOpened = true;
TheFrameOpen = document.frames[iframeId];
TheWindowOpen = document.getElementById(if rameId);
WaitForClose ();
return TheWindowOpen;
}
return;
}
function iframeClose( iframeId ) {
document.getElementById(if rameId).st yle.displa y='none';
document.body.removeChild( parent.doc ument.getE lementsByN ame(iframe Id)[0]);
}
There's a couple DIVs defined inside there.. I added the moveable = true to mine and I get 0 for my element when I click on my iframe.
<html>
<style>
DIV {cursor: hand}
</style>
<body style="font-family: verdana">
<H2>Simple Drag and Resize Example</h2>
<h4>Use alt-click to multi-select</h4>
<input type=button value="Moving, click to resize"
onclick="toggleMoveResize(
<div moveable=true style="position: absolute;
top: 150px; left: 100px;
width: 100px; height: 100px;
background-color: red;
border: solid 2px black">
Click and drag me
</div>
<div moveable=true style="position: absolute;
top: 150px; left: 250px;
width: 100px; height: 100px;
background-color: blue;
border: solid 2px black">
Click and drag me
</div>
<script language="JavaScript">
var activeElements = new Array();
var activeElementCount = 0;
var lTop, lLeft;
var doMove = true;
var doResize = false;
function toggleMoveResize(e) {
if (doMove) {
doMove = false;
doResize = true;
e.value = "Resizing, Click to Move";
} else {
doMove = true;
doResize = false;
e.value = "Moving, Click to Resize";
}
}
function mousedown() {
var mp;
mp = findMoveable(window.event.
if (!window.event.altKey) {
for (i=0; i<activeElementCount; i++) {
if (activeElements[i] != mp) {
activeElements[i].style.bo
}
}
if (mp) {
activeElements[0] = mp;
activeElementCount = 1;
mp.style.borderWidth = "4px";
} else {
activeElementCount = 0;
}
} else {
if (mp) {
if (mp.style.borderWidth != "4px") {
activeElements[activeEleme
activeElementCount++;
mp.style.borderWidth = "4px";
}
}
}
window.status = activeElementCount;
lLeft = window.event.x;
lTop = window.event.y;
}
document.onmousedown = mousedown;
function mousemove() {
var i, dLeft, dTop;
if (window.event.button == 1) {
sx = window.event.x;
sy = window.event.y;
dLeft = sx - lLeft;
dTop = sy - lTop;
for (i=0; i<activeElementCount; i++) {
if (doMove)
moveElement(activeElements
if (doResize)
resizeElement(activeElemen
}
lLeft = sx;
lTop = sy;
return false;
}
}
function moveElement(mp, dLeft, dTop) {
var e
e = mp;
e.style.posTop += dTop;
e.style.posLeft += dLeft;
}
function resizeElement(mp, dLeft, dTop) {
var e;
e = mp;
e.style.posHeight += dTop;
e.style.posWidth += dLeft;
}
function findMoveable(e) {
if (e.moveable == 'true')
return e;
if (e.tagName == "BODY")
return null;
return findMoveable(e.parentEleme
}
function findDefinedMoveable(e) {
if ((e.moveable == 'true') || (e.moveable == 'false'))
return e;
if (e.tagName == "BODY")
return null;
return findDefinedMoveable(e.pare
}
function rfalse() {
return false;
}
document.onmousemove = mousemove;
document.onselectstart = rfalse;
</script>
</body>
</html>
THE BELOW CODE IS WHAT I USED TO CREATE MY DIV AND IFRAME
function iframeOpen ( iframeUrl, iframeId ) {
if(listBoxOpen){
clearTable();
}
parentSelected = true;
var iframe = document.createElement('if
var divId = "d"+iframeId;
document.body.appendChild(
iframe.outerHTML = "<div id='"+divId+"' moveable='true' STYLE='position:absolute; top:80; z-index:999; left:150;'> <iframe WIDTH=100% HEIGHT=100% src='"+iframeUrl+"' name='"+iframeId+"' id='"+iframeId+"' allowtransparency frameborder='0' scrolling='no' STYLE='position:absolute; display:block;'></iframe><
if(!WindowOpened) {
WindowOpened = true;
TheFrameOpen = document.frames[iframeId];
TheWindowOpen = document.getElementById(if
WaitForClose ();
return TheWindowOpen;
}
return;
}
function iframeClose( iframeId ) {
document.getElementById(if
document.body.removeChild(
}
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.
I will leave the following recommendation for this question in the Cleanup topic area:
Split: NetGroove {http:#9658834} & sciwriter {http:#9661954}
Please leave any comments here within the next four days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!
jAy
EE Cleanup Volunteer