I am trying to open child dropdown on its parent dropdown change event, In my form, I have 10 dropdowns which I need to open one-by-one on dropdown change event of its parent Select.
I tried lots of jquery snippets but those are working on desktop browsers only, NOT in mobile like http://jsfiddle.net/XE73h/444/
I have also tried size attribute as $("#sel").attr("size", 10); but it is also not working in mobile. (tried in Chrome for Andriod and Safari for iPhone devices)
To trigger the function with click or touch, you could change this:
$(document).click( function () {
To this:
$(document).on('click touchstart', function () {
Or this:
$(document).on('click touch', function () {
The touchstart event fires as soon as an element is touched, the touch event is more like a "tap", i.e. a single contact on the surface. You should really try each of these to see what works best for you. On some devices, touch can be a little harder to trigger (which may be a good or bad thing - it prevents a drag being counted, but an accidental small drag may cause it to not be fired).
For reference you can see this link
Related
I have an application where elements inside of a SVG element can be drag and dropped (thanks to d3-drag and d3-zoom, see https://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084 as an example for such a page) which can be also used on touch-enabled devices but what happens is that after a long press a context menu pops up (at least in IE11, Edge and Firefox) and is in the way, therefore I want to prevent the context menu from showing up in this case.
I could just disallow showing the context menu in general by handling the contextmenu event and doing .preventDefault() on the event object but I wonder whether a solution exists where the context menu is just blocked from showing in the touch case and it would still show up for e.g. right-clicks or when the menu key is pressed while the element has focus.
I thought at first I could look at the .button and .buttons properties of the event object but it seems like those values are arbitrarily 0 or 2 and it looks like it can be found in any combination when testing in various browsers on different systems.
The element already has touch-action: none.
Is there some working way to make the context menu just not show up a result of a touch long-presses?
It looks like .preventDefault() on the relevant touch events wouldn't be an option.
jQuery UI Touch Punch just solves it all.
It's a Touch Event Support for jQuery UI. Basically, it just wires touch event back to jQuery UI. Tested on iPad, iPhone, Android and other touch-enabled mobile devices. I used jQuery UI sortable and it works like a charm.
http://touchpunch.furf.com/
I am having trouble getting something wo work in Safari (and on ios devices) that works fine on Firefox, Chrome, Edge and IE.
On my page there is an input field that sends input back to the server and adds an element to the dom after the server created this element (think of it as a complex combobox with server side rendering of search results).
This dom element that's added to the page contains clickable links like this one
Search result 1
Since nobody knows how many of these links will be present on a page, I register a a click handler on the document like this:
$(document).on("click touchstart tap", function(evt) {
if ($(evt.target).hasClass("stampOption")) {
some code...
});
While this is fine in all Browsers I've tested so far, the click handler is never called in Safari.
I've tried several alternatives like delegated events (which also seem to have problems on Safari/iOS) like so:
$(document).on("click touchstart tap", ".stampOption", function(evt) {
. And I applied the cursor:pointer CSS trick as well as the onclick="" trick that is suggested here on SO and elsewhere.
I also made sure no other click event handler prevents bubbling or such.
So any ideas what else I could try?
Nevermind. The problem was a blur handler on the same page that used relatedTarget, which, on Safari, was always Null, so some if()-statement never came to the right conclusion on Safari, while all was well in other Browsers.
Let's say some handler ate away the click event on Safari. A typical case of ignorance towards Browser incompatibilities...
We are facing an issue in our shopify website in mobile devices. On clicking a category, it opens and child menu items dropped down. But it doesn't get closed on clicking back. Only it gets closed, when we click on another category menu.
Could anyone help here.
Thanks in advance.
Its better to show code you are trying.
Main problem is OnClick Event does not register on mobile devices that
is because you don't click on anything you generally tap on menu. So
it will be better if you add mobile event along with it. like you can
use touchstart event as give in code below
$(document).ready(function() {
$('ul li').on('click touchstart', function() {
// Show Menu Item
});
});
Another Alternative Option
you can also detect touch devices and manipulate things -
$(document).ready(function() {
/* Detect Mobile Device As Below */
if(is_touch_device()) {
// Code Here to handle for Mobile
}
});
In my Rails site, I have an element that I want to act as a link when clicked by a mouse (e.g. on a desktop), but not when touched on a touch-screen device (because there is also a hover behavior).
My understanding is that the JQuery .click event should not get triggered on a touch.
My coffeescript for setting the click handler is simply
...
$(this).click ->
location.href = url
...
(where "this" is the element in question)
I know this code works, because the click action works with the mouse. To ensure that it doesn't get triggered on a touch device, I use the device emulation in Chrome's Developer Tools to emulate a touch. However, when I do this, the method still fires and follows the link.
Is this a problem with the Chrome emulation or with my code? I want to know whether it will behave this way on real touch devices.
edit: Same thing happens with Firefox, so I'm thinking it's my code...
I realized that touch events trigger click events as well, later on in the event chain. To get the functionality I wanted, I kept the .click handler, but added a .touchstart handler where I called event.preventDefault() to short-circuit the rest of the event chain. This way, the .click handler fires for mouse clicks, but not for touches.
I'm trying to implement a "custom" combobox options popup, so that near each option on the list i can place an icon / image.
My goal is to make this as unobtrusive as possible and make it look as close to a regular combo as possible, so, for Chrome and IE, the solution of grabbing the mouse and keyboard events that cause the standard popup to appear works fine:
#el.bind 'mousedown keydown keyup click', (e) =>
(...)
e.stopPropagation()
e.preventDefault()
This basically makes it so that the control is still there, looking native, and whenever the user clicks or focuses it, it shows up the "custom" list instead of the native one.
However, in firefox, as soon as the user clicks the combobox control (< select >), a popupshowing event is triggered, but i can't find a way to cancel it before the popup with the < options > shows up, covering up my "custom" options display implementation.
The only information regarding this event i was able to find, was on the Mozilla XUL documentation.
Thanks in advance.
I looked at the source code and it doesn't appear to be possible to cancel either the mouse event that opens the drop down or the popupshowing event (I don't even know why that event is generated). However I think you might be able to capture the mouse event on a parent element and stop its propagation.