I have a page with a form that built with react and on the inputs, while the user start to write something, the autocomplete open but if the user scrolling up/down the autocomplete stay at the position that it open (Like a fixed position).
**
I can't inspect this of course...
This happens on all browsers (CH, FF, IE)
Any idea...?
All these auto complete are browser specific. It depends on browsers how they have styled and positioned their autocomplete. For some browser it is also possible to not have auto-complete feature. You can not changed it from your project you can disable them from your browsers if you want.
Related
I am trying to use the <datalist> as an autocomplete populated via ajax. This works fine on desktop browsers including Safari. (There are some older posts on stackoverflow which indicate that Safari does not support the datalist, but current versions do.)
iOS Safari does not display the options by default and will only display once the user clicks the down arrow icon on the right of the input.
It is unintuitive to the user that there are options to choose from in the datalist and it is awkward that clicking the down arrow has the negative effect of closing the keyboard.
Is there a way to trigger the display of the list while the user is typing?
I ran across the same issue. To update a datalist in safari, you have to replace the datalist node completely. Safari otherwise does not seem to force a render update for the datalist. I wasn't able to trick Safari into updating it with a redraw.
From the solution provided Force DOM redraw/refresh on Chrome/Mac you can do this
document.getElementById('datalistID').replaceWith(document.getElementById('FirdatalistID').clone(true));
If you have events bound they will be lost. You have to attach your event listeners higher up in the node and then target the child. Such example is provided here Attach event to dynamic elements in javascript
However after this, Safari doesn't auto-open the data list. You have to manually expand the list. I haven't found a workaround for that.
While trying to tweak some scrolling script to perform "jump to" links on some pages, I noticed that if you have a page with contains a hash tag in the URL, the behavior is different depending on the browsers when you press enter on the address bar, after the page is loaded.
For example, if you load a page with an has in the URL and then scroll away from the target element, I noticed that on Firefox and IE, if you put your cursor on the address bar and press enter, the page will move back to the HTML element having the same id attribute as the hashtag but the page will not be reloaded.
I also noticed that neither popstate nor hashchange events are triggered in such scenario. The scroll event will most likely be triggered but how can we know this is not the user scrolling but the browser reseting back its position?
Is there any was to detect this type of event in the browsers? Given this is outside the viewport I'm a bit curious. But I have a scenario where I would like to reposition the menu depending is the page is scrolling up or down.
To try to explain what I'm looking for:
Page with hashtag #test and element <div id="test">
Press F5, the page posisition itself right where the <div> is
Scroll up or down
Go on the address bar and press enter
---- Looking for an event to detect the previous action ---
the page posisition itself
right where the <div> is
Example in JSBin (open in Firefox):
http://jsbin.com/rifikereze/1/edit?html,js,output
Output:
http://output.jsbin.com/rifikereze/1#test2
Open your console in Firefox
Make sure in the Firefox setting you enable "persistent logs" to keep logs after page reloads
Press F5 (you should see a console message "reloaded")
Now try to move the page, put your cursor in the address bar and press enter
You will see the page does not reload
How can we detect these events (other than scroll events)?
Make sure to use Firefox on Windows if trying to reproduce. It looks like other OSes have other behaviors.
Given the lack of answer, my presumed answer is No.
There is no way to detect re-positioning of browsers using fragment identifiers (aka hash) in URLs and the address bar.
On top of this, browsers seems to have inconsistent behaviors:
Firefox on Linux behave differently than on Windows (it reloads the page).
Chrome seems to be ignoring re-positioning unless the page's position is set back to the top position before unloading.
There seems to be no standard across browsers on whether the normal behavior is to reload or re-position.
The only safe way to detect fragment identifiers repositioning is when loading the page.
I am making use of an external JavaScript library qTip. My application has a feature of 'StarRating' and 'Comments', which is provided through this plugin.
After providing a rating through the stars, one can enter the Comments(optional), which opens up in a dialog.
This scenario works well across all the major browsers i.e. Chrome FF and IE but not in IE (touch devices) and Edge browser (touch devices). As soon as the stars are clicked and on focus inside the input box, the dialog box disappears in the touch devices with IE and Edge only, but works well in Chrome and FF (touch enabled).
I don't know whether there is an issue with the library or with the touch events.
Microsoft Edge doesn't support touch events by default. It has an alternative system called pointer events. Sometimes 3rd party libs implement touch based widgets that don't play well with pointers. A quick way to determine if this is the case is to switch on touch events inside of Edge. Put about:flags in the address bar then go to the setting enable touch event and change it to always.
If the site now works, then I suspect it's an issue with the library. If that is the issue then I'd raise the issue with qTip they can probably help identify the issue specifically so that it can be fixed in the library.
When I select text in Chrome 43 on my Android device I get the "Touch to Search" popup. We're currently using text selection for a feature on our site and this new Chrome feature interferes with some of our UI.
In the long run, we'll be working out new UI/UX to work side-by-side with this feature, but in the interim, we want to disable it on our web app.
Is there some sort of meta tag or JavaScript we can add to turn this off? Does anyone know if this is currently possible?
This can be manipulated in a number of ways. The user can turn it off in flags as PaulI suggested, and you can control it.
Developer control, right now there are a couple of options but the basic summary is if we think it is an user interactable element then it won't be enabled:
CSS: -webkit-user-select: none;
HTML:
Anything with an aria-role will not have the touch to search enbabled
Anything with a tabindex of -1 or > 0
Possible workaround could be to wrap text in <button> tag. This obviously wouldn't work if talking about big blocks of text, but for other elements like titles, icons and other small stuff this works fine.
As of 2021, it isn't possible to disable touch-to-search (when this is triggered by a long-press for text selection) in chrome mobile. The article that Kinlan is referencing is apparently concerned only with touch-to-search triggered through a tap gesture.
Quoting donnd, from bugs.chromium.org:
Regarding #2 -- developer control: The 2015 article that you mentioned (https://developers.google.com/web/updates/2015/10/tap-to-search) focuses on triggering through the tap gesture. As you correctly point out, it does not address the long-press gesture triggering. Touch to Search responds to both tap and long-press but treats them differently. As I'm sure you know, the long-press gesture activates a whole set of features which can include copy, translation, smart text selection, and Web Search. A site developer can markup their page text as non-selectable in order to disable the long-press gesture entirely, but currently there's no way to disable only the Touch to Search response to long pressing. If you'd like to work with us to add such a feature, let us know and we'll file a separate feature request.
If you want disabled "touch to search" in a menu that has an action open / close (toggle), it is necessary to javascript :
event.preventDefault();
Navigate to about:flags or chrome:flags and look for Enable Contextual Search
Then toggle to Disabled and hit restart at the bottom.
If a user opens page in new a tab in the background, Css animations are played before he/she switches to the page. Is there any way to show css-animation after user selects the tab ?
You might try using Page Visibility API - http://www.html5rocks.com/en/tutorials/pagevisibility/intro/
might not be supported in older browsers, though
I have a feeling this isn't possible with pure CSS, since CSS is just in charge of displaying the webpage. I think it could be possible with Javascript using onblur and onfocus events. Take a look at http://www.thefutureoftheweb.com/blog/detect-browser-window-focus which has the information and a demo (that does work in Chrome).
Your milage may vary since I could see some security issues with knowing if a user is actively viewing a page or not. I haven't tested this in all browsers