mCustomScrollbar jQuery plugin with iFrame embedded - javascript

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>

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.

How to make an iFrame inserted by Chrome Extension draggable?

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?

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.

How to detect onmousedown on iframe with external content?

I'm trying to know when an user clicks on an iframe with external content (a page not owned by me). The reason I need to do it is that my site relies heavily on keyboard navigation and when the iframe is focused I need to tell users to click outside to keep playing.
I'm using a transparent div on on top of the iframe with an onmousedown event. But it's not a great choice since the user needs to click once for the div to disappear and once again to click wherever they want on the iframe.
Are there are other ways to know when the user clicks on the iframe?
Thanks
The closest I can think of is to listen for blur on your window.
http://www.quirksmode.org/dom/events/blurfocus.html
I would put an onmousedown event on the iframe instead of the div?
you could find a way around this problem. But personally, I don't think its a good practice to capture events in an IFrame from an External Container.

Capturing mouse event data outside an iframe

I am working on a Facebook app and have run into a situation where being able to capture whether or not the mouse has left the app's iframe would be really great info to have. I've tried playing with window.blur() and window.focus() in jquery but (for reasons regarding how my content renders at the moment) this only works in Firefox. I have considered using mousemove() to capture the x and y position of the mouse but it would appear that once the mouse leaves the iframe I'm out of luck.
tl;dr I have an iframe that I have control of and a page it's embedded into that I don't. I need to capture the mouse movement/click/whatever outside my iframe and want to know if that's actually possible. Thanks!
I went with a combination of Martin and qwertymk's solution to the issue. I'd check you guys off as answering the question but since you can't approve of comments this will have to do. Thanks all.

Categories