search

crimx / blog-comments

utterancesđź”® comments on https://blog.crimx.com.
0 stars 0 forks source link

/2017/04/06/position-and-drag-iframe-en/ #15

Open utterances-bot opened 4 years ago

utterances-bot commented 4 years ago

Position and Drag iframe | CRIMX BLOG

Position in iframes I wrote a Chrome extension Saladict, an inline translator, which involved such requirement: When user makes a text selection, something will pop up nearby the cursor. It looks…

https://blog.crimx.com/2017/04/06/position-and-drag-iframe-en/

sumeetbajra commented 4 years ago

It is not smooth at all in Firefox.

crimx commented 4 years ago

@sumeetbajra I would recommend using a translucent layer to track mousemove instead. Maybe another post when I have time.

sumeetbajra commented 4 years ago

Thanks. It was helpful though. Do you know what might be causing the issue in Firefox? I am trying to implement something similar as well.

crimx commented 4 years ago

Not sure. Possibly because Firefox is too slow on handling iframe messages.

Cappuuuu commented 4 years ago

Excuse me , Can u give me the source code ? Thanks !

crimx commented 4 years ago

Everything is in this post. If you need source code of the demo just view source of this page.

Cappuuuu commented 4 years ago

thanks , can it also works on moible device with touchstart event ? i thinks all mouse event change to touch events XDD ex. mousedown ---> touchstart

crimx commented 4 years ago

Yes, and it works in mobile now.

Cappuuuu commented 4 years ago

Hi ~~ I got stuck on the problem in mobile device. When i touchmove iframe (small round button) , the outer document also scroll .... Is there any solution can prevent outer document scroll ??

crimx commented 4 years ago

https://github.com/crimx/blog-2019/blob/49074145db83c496f0b6127b1b1ac58e11c9918a/static/img/post/drag-iframe.html#L44

https://github.com/crimx/blog-2019/blob/49074145db83c496f0b6127b1b1ac58e11c9918a/static/img/post/drag-iframe.html#L52

Cappuuuu commented 4 years ago

Hello , i drag button smoothly in my iPhone X ( iOS 14 ) by all kinds brower :)) But on a Android 6.0 device , drag not smooth on all kinds brower .... Furthermore , i drag normal div tag is Ok on that Android 6.0 device. So , drag iframe is not support completely on android ? Do you have any idea ?

crimx commented 4 years ago

6.0 device is just too slow for this type of iframe commucation. I would recommend using an translucent mask on parent window for calculation. Haven't got the time to write a post on this trick.

Mohammad-Khavari commented 3 years ago

Hi I found this project very useful I tried to use it in my project but I could not make it work it seems I have to create 3 different file like selection.js, parent.js and iframe.js and you didnt explain how to use the minifest.json file in the project it is a little bit complicate to get use it in the project by the way I am working with .NET.