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.
Related
I am trying to create an effect in an HTML page whereby a link with href='#section1' when clicked, changes the URL in the address bar of the browser AND scrolls to the element #section1 smoothly.
The problem is that, as far as I have been able to test, I could accomplish only one thing. Either I could scroll to #section1 smoothly using the scrollIntoView() method or I could change the address bar of the browser (which happens automatically when a link with href='#section1' is clicked.
Is there any way to accomplish both of these things?
Another thing I have tested is explained as follows:
I prevented the default action of clicking the anchor having href='#section1' using e.preventDefault() method of the click event and then called scrollIntoView() on the element. Then I manually changed the URL on the address bar using location.hash, but doing this last thing nonetheless caused the snappy scroll jump (before the browser could smoothly scroll the element into view) which I don't want.
Is there any solution to this? Or that I have to go with only one thing out of the two?
I saw a good website template and started making a website. The link is: https://html5up.net/lens. In the process, I observed a typical UI bug, where in if a user scrolls down the page and clicks on "X" of the image (to see fullscreen image),toggles back, scrolls to the top of the page, the content which was visible before disappears though it still appears in the DOM.
I saw the js function written for the toggle, it's straightforward and works fine until we don't scroll on the web page. Please see bug screenshot.Screenshot of the bug
This is a known, ongoing issue with Chrome and CSS visibility. You can 'fix' this by updating the CSS of the affected children, ie. changing classes or simply setting the visibility of the child element manually. I believe this to be because Chrome automatically prevents the rendering of the divs because at the time they are called to be shown, they are off screen and not viewable.
I'm using AngularJS with UI Bootstrap to display a form in a modal dialog. However, any input loses focus when the scroll bar is clicked.
This happens if the scroll bar is associated with a div or with the window.
If the text input was not inside a modal then it maintains focus during scroll.
An example can be found at http://plnkr.co/edit/uaXiT1NedWjUm2DOKyrD?p=preview
There is nothing special about the input, it's as simple as can be
<input type="text" id="textinput" name="textinput"/>
Is there a way to maintain focus whilst the user scrolls?
Thanks
Chris
It's not losing focus when you scroll, it's losing focus when you click on the scrollbar. If you have a mouse wheel, for example, you can scroll the modal content without losing focus.
Basically clicking on the scrollbar is the same as clicking anywhere else on the modal that isn't in your input field.
It is true that some scrollbars won't do this (at least in Chrome). I don't know what the difference is. I have confirmed that it happens on anything set to overflow-y: auto or scroll, at least. It's not related to AngularJS.
Click on the Contact Us button and see it happen in pure Bootstrap: http://www.bootply.com/8R8QWNO6Qv
I don't expect there will be an easy solution for you to prevent this that doesn't involve tracking where focus is and such; and that will be quite complicated on multi-input forms.
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.