How to make an iFrame inserted by Chrome Extension draggable? - javascript

In my Chrome Extension, I'm trying to add an iFrame containing some clickable buttons on web pages at fixed position. To avoid occlusion, I want to make this iFrame draggable. The reason I need an iFrame is to isolate CSS.
I have tried many hacks such as making a transparent div overlay iFrame, get mouse events and translate jQuery mousemove events to iframe parent div which is jumpy, tried using this library http://javascripttoolbox.com/lib/dragiframe/ but nothing works smoothly.
jQuery UI's draggable() does not work as expected because iFrame interferes with click events.
What should I do?

Related

prevent scrolling from iframe but still clickable javascript

Is it possible to use the parent scroll when I start the scroll from the embedded iframe? Currently I'm using pointer-event: none but the embedded iframe prevents clickable events. I tried also manipulate other events like touchmove but I failed. Feel free to answer and thank you in advance!
It's not possible to scroll the parent page from an iframe. However, you could consider using embed instead of iframe. This will give you more control over how scroll works.

Need to detect mousemove event in iframe without setting css pointer-events to none

I have an YouTube iframe in React application. On mousemove event, I want to make a component appear and make it disappear when there is no mouse movement. I have figured it out for the document but when the mouse enters the YouTube iframe specifically, it doesn't work any more.
The solution of setting "pointer-events: none" in CSS doesn't work for me since it disables YouTube features which basically works on the pointer-events. I have also tried setting event listeners on the iframe itself using "iframe.contentWindow.document", which also didn't work.

How to prevent an iframe from stealing drop event from parent container?

I have a structure like this on my web page:
<div> I have dragenter, dragover, drop, and dragleave handlers
<div> Lots of nice content
<iframe src="somethingCoolFromSomeoneElse"></iframe>
</div>
Please see a demo of this here:
https://codepen.io/glenpierce/pen/JLoJdJ?page=1&
My problem is that when a user goes to drag and drop something into the parent div, if they happen to be hovering over the iframe, the iframe steals the drop event.
How can I prevent iframes that are children of drop targets from stealing their parents' drop events?
I have tried:
1. covering the iframe with another div which has position:relative; height:100%; width:100%;.
2. bumping up the z-index of the parent.
3. Increasing the z-index of the div I was trying to conceal the iframe with.
I could try to hide the iframe when a drag event has started, but this would change the UI in a confusing fashion.
I do not use jquery.
You're going to have to disable mouse events on the iframe. You can stop them from happenning with pointer-events: none which is pretty supported: https://caniuse.com/#feat=pointer-events
I forked your demo to show you: https://codepen.io/anon/pen/dmPRqg?page=1&
I didn't wire up anything to actually toggle the mouse events, you can do that via a class or directly to the style or any other several ways.

Iframe stealing mouse events

I'm using a Javascript scroller class on a site that seamlessly takes care of adding a scrollbar to all predefined elements on the page that have overflown content. The client has recently asked that one of these elements contain an iframe so they can easily add interactive content to this area. (I know I know, iframes, but I'm a subcontractor on this job. Not much pull.) Fortunately the content of the iFram is being pulled from the same domain, so I'm able to resize the iframe once the content loads, in turn firing the Javascript scrollbar. In the end it works beautifully—in Chrome.
In Explorer and Firefox the iframe seems to be stealing mouse events as soon as the mouse is over the iframe. So the mousewheel event no longer works. You can still drag the scroll handle to scroll, or click anywhere on the scroll track, but using the mousewheel does nothing. It doesn't even fire the event.
I've seen that others have had similar issues, but haven't found a workaround. Anyone have any suggestions?
Here's the Scroll class for good measure: http://hastebin.com/xisidogiju.coffee
Appreciate any help I can get!
Mouse events are tied to windows, iframes are windows. Its a miracle this works in webkit browsers as you say.
You need to pass the eventListener and perhaps eventHandler between your parent window and the iframes when the mouse moves into them.
Some reference about passing objects between iframes: http://www.dyn-web.com/tutorials/iframes/refs.php.
I could just manage to overcome this problem. You can check the solution mentioned in the jsfiddle mentioned below.
http://jsfiddle.net/6nnMV/358/
Here, I have created a event to listen to the mouse scroll and have binded the event to the iframe.
You can then scroll the parent window or element by using the scrollTop property like
$(element).scrollTop($(element).scrollTop+(number of pixels));
This will only work when the iframe you are accessing is in the same domain.

mCustomScrollbar jQuery plugin with iFrame embedded

I'm hoping you can help!
I am using this plugin http://manos.malihu.gr/jquery-custom-content-scroller which works great. The problem I am finding is that I am embedding youtube/vimeo clips (iFrames) within the scoller, which works fine, except for the fact that the mousewheel scroll doesn't work when the mouse is over the iFrame.
I suppose the javascript scroll event isn't being fired because the browser thinks I am trying to scroll within the iFrame? Is there any way around this? Hope I have explained this well... Basically I want to scroll down the scroller whether the mouse is over an iFrame or not, but still be able to click on them.
To resolve this issue, define a mousewheel event handler inside your iframe.
<iframe src="#" onmousewheel=""></iframe>

Categories