Develop Reference

How to trigger an event whenever the user enters a url with a fragment although the same url is loaded already?

I have a simple website in HTML where there are several sections tagged with ids, so it is possible to jump directly to the specified section with URI fragments (e.g. https://example.org/index.php#header1). I use JavaScript to scroll a bit further when the hashchange event is triggered. However, if the user already is on e.g. https://example.org/index.php#header1, scrolls around and then presses enter in the URL bar, the browser will jump to the specified section but the event will not be triggered as the fragment did not actually change. Is there any way I can still make my event trigger?

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.

Trigger click on div so it will scroll on pagedown and pageup

When I physically use the mouse to click on my div, then pageUp and pageDown scroll the div. However, when I programmatically trigger a click on the div, then pageUp and pageDown fail to scroll the div. How can I get pageUp and pageDown to scroll the div without the user having to physically click in the div?
Details:
What I am trying to do is to let the user pageDown to the bottom of the div, then one more pageDown loads the next set of content into the div and auto-scrolls to the top; and vice versa for pageUp. It works great as long as the user has clicked inside the div. I am trying to make it so they don't have to actually click in the div to be able to scroll via pageDown or pageUp.
I am certain that the programmatic click is happening because the click event listeners get triggered. My pageUp listener also works to load the previous set of content (because the scroll bar starts out at the top).
I am developing within Node-Webkit (Chrome) and angular.js, but cross-browser support is also necessary.
Things I have tried:
$('#div').click();
$('#div')[0].click();
$('#div').trigger('click');
$('#div').focus();
$('.focusableThingInsideDiv').focus();
$('#div').scroll(); //just trying random things at this point
I have also tried stopping the default browser behavior and implementing the scroll myself (via setting scrollTop). This technically works. However, I would prefer not to override the default behavior if possible.

The page up and page down work, after you click on the div, because it gains focus. So, although it does not show as a focused element after clicking, you still want the $('#div').focus() line.
The tricky part is that to be able to focus on a div programatically you need to give it a tabindex. Something like <div tabindex="0">...</div> will make the focus suddenly work in Chrome.
Other browsers (IE and Firefox) do not seem to required this. The focus() will work from the start but adding tabindex=0 will not hurt.

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

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.