Menu
Hello all
Thanks for all the help!
I’ve wrote a script which moves an iframe when pressing it and moving it around. Anyhow, for now this is only a FF solutions so IE is left off.
My problem is that the iframe does not have the flow I would like when moving it. It jumps a bit and this couses a unprofessional look.
Here’s the code. Very simple stuff.
Javascript:
window.onload = function (){
var iframe = document.getElementById(‘myiframe1’);
iframe.contentDocument.body.innerHTML = ‘Move me, but i have a hangover..’
iframe.contentDocument.parent = iframe;
iframe.contentDocument.addEventListener(‘mousedown’, movetoolbox, false);
var iframe = document.getElementById(‘myiframe2’);
iframe.contentDocument.body.innerHTML = ‘Move me, but im a bit shaky..’
iframe.contentDocument.parent = iframe;
iframe.contentDocument.addEventListener(‘mousedown’, movetoolbox, false);
}
function movetoolbox(event) {
if(event.type == ‘mousemove’){
this.addEventListener(‘mouseout’, movetoolbox, false);
this.addEventListener(‘mouseup’, movetoolbox, false);
this.parent.style.top = (parseInt(this.parent.style.top) – (-parseInt(event.clientY))) – this.firstposY + ‘px’
this.parent.style.left = (parseInt(this.parent.style.left) – (-parseInt(event.clientX))) – this.firstposX + ‘px’
}
if(event.type == ‘mousedown’){
this.firstposY = event.clientY
this.firstposX = event.clientX
this.addEventListener(‘mousemove’, movetoolbox, false);
}
if (event.type == ‘mouseout’ || event.type == ‘mouseup’){
this.removeEventListener(‘mousemove’, movetoolbox, false);
}
}
HTML
<iframe id=”myiframe1″ style=”position:absolute; top:300px;left:300px;width:400px;height:350px;border:1px dotted red;background:white;z-index:1;”></iframe>
<iframe id=”myiframe2″ style=”position:absolute; top:100px;left:300px;width:200px;height:150px;border:1px dotted green;background:white;z-index:2;”></iframe>
Here’s a live example: [url]http://www.moonlite.se/scripts/dom/moveiframe/
Hope someone have a bit of idees how to fix these hicks.
Best regards ?
/Adrian