I have a script in an iframe that listens for movements of the mouse from document.body as follows:
$(document.body).addEvent('mousemove',this.refresh.bind(this));
This works fine from within the IFrame, but I want to also track that the mouse is being moved outside of the Iframe. Anyway to do this? I am using MooTools.
The script in your iframe may or may not be allowed access to the parent. If the parent is in the same domain, it will.
In that case, you should be able to use something like this:
$(parent.document.body).addEvent('mousemove',this.refresh.bind(this));
This would capture any mouse movement within the parent window. "parent" is a property of "window" that is a reference to the "window" object of the parent iframe.
Related
I'm developing a chrome extension. It is basically a toolbar standing at the upper part of the visible screen, added to the page as an Iframe.
My problem is that I set it a high z-index to make sure the bar appears; and then the elements below it (below the Iframe) gets not clickable (lets say I got a piece of the iFrame that is transparent, what allows the user to see the elements below it). Other Stack Overflow questions doesn't address my problem, since they suppose I have control at both the upper and the lesser elements, and I don't have at the lesser one.
If only certain parts of the iframe should let the clicks pass through then in the iframe's onclick handler send a message to the content script of the page via postMessage with the click point coordinates and in the content script's document.addEventListener for that message use querySelectorAll(':hover') or document.elementFromPoint while temporarily hiding the iframe to find the clicked element and then dispatch a new click event to that element via dispatchEvent (plus the iframe's top-left corner offset in the original document).
You can do this simply by using CSS
pointer-events: none
height: 0px;
overflow: visible;
I included a FilterControl inside an iframe popup. When I open the column selector (or any other DevExpress combobox) the popup does not 'overflow' outside of the frame. What I want is to be able to see the contents of the popup outside of the frame, instead of having to scroll down to see the whole option list.
Basically this is how it looks like (obviously not actual code):
<iframe>
<dx:ASPxFilterControl/>
</iframe>
Is this possible? All of our popups in the site are created in the same way and we wouldn't want to use different popups just because of this.
It's impossible. This is how iframes work. Check the following threads:
How to show HTML element outside iframe boundaries
Is there a way to have content from an IFRAME overflow onto the parent frame?
I have an HTML document with an iframe in it. Now, if you click a certain button/link in the iframe, I want the parent document to scroll back to the top.
I'm not sure how to make that work. When I put an anchor at the top of the parent document, and have the button do something like window.parent.location = '#anchorname';, then the browser opens the iframe document itself, having the parent one vanish.
First of all, I suggest the usage of JQuery scrollTop (see here) to scroll on top. This is not enough, however, you need to call your function from the page in the iFrame, so, supposing that your function which scrolls your document is called 'foo', you can call your function from the page in the iFrame this way:
window.parent.foo();
Hope this helps.
So, I have a component based on canvas, and within that component I have two images. I have the component listen for a click and when that event occurs one image goes transparent and the other becomes visible.
This part works perfect.
Now, on clicking that component, I also want to do something to the parent canvas, I already have this working for more basic types (image, canvas, text, etc) but the problem with my component is that the click event has the internal image as the target, so what I want to happen to the outside canvas is happening to the canvas of the component.
How do I make my component as a whole the target of any clicks on it?
3.5 SDK
You can make the outer component the target of the clicks by setting mouseChildren = false on the outer component. Clicking anywhere within the component (including on any of the sub-components) will then set the event target to the outer component. Hope that helps.
I handled this by adding a click handler to the children that would stop immediate propagation, then dispatch a click event from the outer component. Wade's solution is much better.
I have a asp.net page (page1.aspx), inside that I have a iframe, Inside the iframe I am loading another page(page2.aspx). Inside that page(page2.aspx) I have a button. When I click on that button jqModal pops up. It comes up covering the iframe which is in page2.aspx. How can i make the jqModal div to allocate parent page(page1.aspx) full space.
Presumably you have to pass through the identifier for the parent page all the way through to the jqModal div and use that as the anchor point.