Moving Iframe within iframe example.

[amccool]

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: http://www.moonlite.se/scripts/dom/moveiframe/
Hope someone have a bit of idees how to fix these hicks.


Best regards :D
/Adrian

[ananias]

Perhaps you have a slow machine. On my Mac G5, in Safari, they both move with total clarity as smoothly as the mouse itself.

[amccool]

Yes in Safari it's smooth. I didn't test it there.

But in FF it's still messy. Do you know a solution?

Thanks!

[JMRKER]

Works smoothly for me in FF.
I guess I don't see the problem. :o

[amccool]

What the hell...

Are you using PC or Mac? I use FF on Mac, might be that.

Ananias, please can you test it in FF on your G5? Please.

[JMRKER]

Using PC clone with Home-XP

[ananias]

Ananias, please can you test it in FF on your G5? Please.You're right. FF acts just like's it's got an advanced case of Parkinson's Disease. I reckon it's on account of the event model (http://www.quirksmode.org/js/events_compinfo.html#prop) you're using. I suspect that if you rework it to use what Peter-Paul Koch calls the traditional model (scroll up a bit on his page to see how) these problems will go away.

[amccool]

Nope didn't help that much. I did three different examples, see them on each page:

Original
http://www.moonlite.se/scripts/dom/moveiframe/index1.html

New
http://www.moonlite.se/scripts/dom/moveiframe/index2.html
http://www.moonlite.se/scripts/dom/moveiframe/index3.html
http://www.moonlite.se/scripts/dom/moveiframe/index4.html

[ananias]

If I was trying to make this work, I'd start by taking out all but the essential uses of the this object.

[klanga2049]

Sorry that I can't hint you at a solution, but here is what I get on 2 different laptops both running XP and latest Opera browser:

(Older laptop, Intel III 866MhZ, 500MB RAM) shaky issues as you describe, can't even move the iframes in index1.html (stops after moving marginally).

(Latest laptop, Dual core T2500 2GHz, 1GB RAM): very smooth, no jittering.

I hope this helps.

[amccool]

Thanks for the help, I will try some ways of fixing it.