Develop Reference

Fire event when user scroll reach an anchor-element

Is there a way to fire event when user manually scrolls to an anchor element? Actually detecting the anchor and not using distance from top.

Receiving touchmove events when scrolling a child iframe

I'm developing a mobile-designed webapp which loads content into an internal iframe. This frame updates its height every time new content is loaded to avoid scrolling inside the iframe. In that way I have a long iframe which is scrolled in the context of the main webapp. This is currently working well in Safari and Chrome for iOS. The most simple example of the app structure is:
<div id="header">
<p>Scroll: <span id="scroll"></span></p>
<p>Touchmove: <span id="touchmove"></span></p>
</div>
<iframe src="https://developer.android.com/about/dashboards/index.html" class="frame-style" id="uframe"></iframe>
In order to trigger certain visual effects I need to know the current Y-axis position of the application's content. I'm using Jquery's bind function to receive touchmove events from touch devices. Scroll events are not very useful since on mobile devices they are only triggered at the end of the scrolling, I need to know the position of the Y-axis every time it has been changed by scrolling. Unfortunately I discovered touchmove events aren't triggered when scrolling starts touching the iframe's contents. I'm using these statements:
$(window).bind('touchmove',
function(){
console.log('touchmove='+window.pageYOffset); //Show in console
$('#touchmove').html(window.pageYOffset); //Update value in document
});
So the question is: Is there any way to receive touchmove events when scrolling a child iframe?
The running example can be checked on: http://jsfiddle.net/badger_cl/b9322/1/
To try it on a mobile device you can access: http://fiddle.jshell.net/badger_cl/b9322/1/show/light/
The red stripe is a div element, when the touch-scrolling starts from this element, it updates the touchmove value. When the scrolling starts at the iframe content (The Android dashboard in this case), it doesn't update the touchmove value. Scroll updates are shown just to demonstrate it only updates at the end of the scrolling.

You can listen to touchmove event both on parent page and on page loaded into the iframe.
Next you will need to communicate from iframe to parent window that touchmove event happened. You can use Window.postMessage method for this.
Send message from iframe:
window.parent.postMessage(messageObj);
Receive message in parent window:
window.addEventListener('message', function (event) {
var messageObj = event.data;
});
Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

It is possible to detect a click on an ad loaded via iframe?

Having ads loaded via iframe, it is possible to detect a click with the left mouse button? A normal click?
I thought of another question, I saw a code that worked for me but it is not secure, since it monitors the activeElement, and has a flaw in it, if the user clicks with the right mouse button, the function triggers TRUE and triggers the alert.
capture click on div surrounding an iframe

If the advertisement is located on a different domain it is impossible because of security.
What you could attempt to do however, is to have a transparent element over the advertisement and detect the click there.
Then you would hide the element, and wait for the user to click a second time shrugging off the first click. If the user is actually interested in clicking the banner they will click a second time (when your transparent invisible element is gone).
Update
Have a look at this: HTML "overlay" which allows clicks to fall through to elements behind it
Apparently you can allow click through with pointer-events css.

Detect mouse over iframe?

I'd like call a function every time a user drags their mouse over an iframe (which points to a different domain). Is this possible?

I'm guessing you already tried setting a mouseover event on the actual iframe and it didn't work. If so, you can try wrapping the iframe inside a div and set the mouseover event on that div. This has to work. In the worst case scenario make the div a little big bigger (1-2px padding) than your iframe.

Load a file into the iframe set the mouseover event on that file.

IE not firing (window|document).onclick event when clicking on a child iFrame

I've got a simple dropdown menu that I want to hide whenever you click anywhere on the page (not on the menu). This works fine in FF and IE until you add iFrames into the page. The menu doesn't hide in IE when you click on the iFrame. Works fine in FireFox.
I tried using document.onclick and window.onclick.
Any ideas?
Edit:
I would prefer not to have to add anything to the iframe. The page is dynamic, and different iframes could be loaded after the menu has already been created. It would be a hassle/undesirable to have to constantly watch for new iFrames and attach events to them.
Yes I am aware of jQuery.live, but we don't use jQuery.
I assume this behaviour is possible since it works on FireFox, I just feel as though I may just be attaching the listener to the wrong event type or the wrong element.

On the parent page, you can search for iFrames in the page and add an onfocus event for them. That event will be fired when the user clicks within the frame.

An alternative would be to have the drop-down menu disappear after a set period of time has elapsed since the mouse or focus was on it rather than requiring a click to dismiss it.

click events bubble up to the owner window and no further. If you want the parent window to find out about clicks on the content inside another frame, you must catch events on its window/document (or have the child document catch clicks and inform its parent document). Yes, it will be a hassle, and jQuery live wouldn't work anyway since it relies on event bubbling.
Alternative approach: when you open a dropdown, also open a transparent ‘shade’ div behind it (but in front of everything else on the page including the iframes), and catch clicks on the shade to close the dropdown.