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.
Related
I have the following code
<div onmousemove="myFunction()">
<iframe src="www.someotherdomain.com"/>
</div>
I want myFunction to be executed when user moves his mouse over the iframe. Is it possible to bubble up the events on iframe to the parent element in cross domain scenario? How will I do this?
PS:-
I can't use the solution provided in
Iframe obstructing the mousemove event from occuring
or
How do you send a mousemove event from an iframe back to the parent using jquery?
because I want the user to be able to interact with the content in the iframe.
I can see only one way.
Disable the session timer when mousing into the iframe and enable it when mousing out.
To do this, add a margin in the div and use mouseenter plus mouseleave from the outer div and vice versa on the way out.
If the window loses focus you may also want to enable the timer
In Google slides we interact with the document using div elements that are pretending to be buttons.
<div role="button" id=".." ..>...</div>
For example, we click on the present button using the mouse in the top right hand side of the page then the presentation begins (slide goes full screen etc...).
However, when firing a click event (with either javascript or jquery), the click is detected but the presentation is not started. So this action isn't initiated when click event is fired (note, it is not the mouseup / mousedown events either).
How can I determine what event is actually causing the presentation to start?
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.
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.
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.