Touch events do not get triggered on SVG document when a USE element has been used to draw a shape(via, xlink:href). The USE element references another element and indicates that the graphical content of the element is drawn here. However, touch events get triggered on the document in the absence of USE element.
Can anyone help me if am doing anything wrong?
This example shows the working touch events: http://jsfiddle.net/qGWQj
This examples doesn't work: http://jsfiddle.net/5gAPn/1
The problem happens on the iPad using iOS 4.3.5.
Related
I've added a controlled tour in my app using ReactJoyride. At a particular step, the tour will progress only when the 'Ongoing' tab/button is clicked (see image).
This 'Ongoing' button is inside the spotlight.
I've tested this manually and it works perfectly. However, while testing this using Selenium, I can't seem to find a way to click on this button.
I'm getting the following error :
It says that react-joyride__overlay will receive the clicks. But react-joyride__spotlight is a child element of react-joyride__overlay and i've enabled spotlightClicks.
The current code that i'm using is this : (test.rb)
the commented lines of code are the other ways that i've tested. All of them failed.
If you can point me in the correct direction, I would really appreciate it!
The problem here is, your desired element is overlay-ed by other element, so this other element is hiding your element. All you have to do is, you have check whether this overlay is permanent or temporary. If it's temporary, you have to write the code to wait until the other element gets disappeared, If it's permanent, then you have to issue the click on top of the other element so that your desired element would receive the click.
Let me assume your overlay is permanent so try this code
find(xpath: "//div[#class='react-joyride__overlay']").click
I have the example code in my Angular.Dart component:
<paper-input bind-value="value" label="MyLabel" floatingLabel></paper-input>
The paper input shows the value that is in my Angular.Dart component, but the floatingLabel does not appear. However, upon clicking the input, the label appears with the standard animation as if it was hidden. It seems as though this is a bug with the "constructor" of the paper-input element. I expected the floating label to appear above the input field when text is in the input field regardless if it was newly created or not. Is there a way to fix this glitch?
Progress: (github.com/Polymer/paper-input/issues/117)
I am looking intensively at the issue listed above, however implementing the fix accordingly is not as easy. As suggested by #GünterZöchbauer, I can use the dart:js library. However it appears that the solution was designed specifically for PolymerJs and not particularly for PolymerDart. Maybe I am overthinking things, but I am unable to perform a simple port.
But the issue does bring up a good point. The element is unable to detect the change (for what ever reason). So something needs to poke it to trigger an update. I currently have the dart context to the Element, however the class (paper-input is the class) does not contain the method inputAction upon inspection with WebStorm. However assuming that the inputAction method was firing an event, I can simply use the dispatchEvent method. However which event will trigger the event without modifying the object itself? And not crashing the browser would be great (I have been crashing the webpage with Chrome's Aw, snap! blue screen of death with some event tests).
I'm using jQuery UI Sortable behavior and have come upon a situation in which I needed to start the sortable drag behavior from interaction with another element other than the original handle (which is not visible at the time).
I have managed to put together a way to achieve this thanks to suggestions in some posts and the use of jquery.simulate.js (used to run official jQUI tests) and I can procedurally start the sortable drag process in pretty much all browsers except IE8 and below, simulating the events like so:
item.simulate('mousedown',pos).simulate('mousemove',{ clientX: pos.clientX+1, clientY: pos.clientY});
Problem: In IE8 (or below), after the interaction with the outside 'handle' and simulation of mousedown and mousemove events, the drag is indeed correctly started, but as soon as the user really moves his mouse in any way/shape/form, the drag stops or cancels as if the 'mouseup' event had ocurred to finalize it.
I highly think this is due to some fundamental difference in the old fireEvent (IE8-) method vs the dispatchEvent that everything else uses, but cannot quite figure out how to, or if it's possible to prevent it.
What I'm looking for are snippets of what may be done to correct this or suggestions as to why this is happening and if it can have a workaround of some sort to prevent the cancelling (such as is the behavior that occurs in any other browser using dispatchEvent instead of fireEvent).
Have put together a small example for you of the success (any recent browser) or failure of the situation described: demo
TL;DR: Have put together a small way to procedurally start a jQUI sortable drag (through jquery.simulate.js, link above), but it fails to work or cancels itself in IE8-. Need some guidance or suggestions about how to overcome that. Check above demo
I'm using iOS 5.0.1, and Sencha Touch 2-rc1. I have a search input field where the focus event is getting triggered, as well as the submit event when I press 'Search' on the on-screen keyboard. The blur event doesn't get triggered when I expect it to, which would be when the 'Done' key is pressed, or the viewable area is tapped.
Note that the blur event IS getting triggered on my laptop in Chrome.
Not every element is focusable. At least <div> is not.
onblur is not firing because when a user taps on a div element, the focus doesn't go to the <div>.
Based on this post:
http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex
tabindex on the correct div element can make a div focusable.
This is likely to be related to the event not "bubbling" up through the DOM. Or perhaps the code you've used includes an event.preventDefault(), but that would have killed more than just blur. I've also had this issue with clicking away from items which appear via javascript.
http://www.quirksmode.org/dom/events/blurfocus.html
We have code that loads SVG via Ajax and then interacts via Javscript. Under Mozilla, and under Safari 5, running on a PC we get click events as expected in SVG. Running Safari iPad we don't get click events. According to the Safari developer guide:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
it looks probable we should be 'Making Elements Clickable.' Apple's guide suggests one does this by adding an onclick handler. The problem is all our SVG elements already have a click handler set up via jQuery - and they still don't click.
Maybe this is because SVG is not HTML, and SVG's DOM access is not HTML DOM's access? (We've been here before.)
How do we get the iPad to listen for events on SVG elements?
To my knowledge, there is a problem with safari according this javascript - which handles canvas/SVG
It seems that click and touch is not the same.
https://github.com/kangax/fabric.js/blob/master/dist/all.js
And SVG 1.1 does not have other than click events
http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty
I have the same interest, therefore I seek the same information ...
I was able to get click events working on Ipad using jquery and javascript. but my issue is that the svg blurs on an iPad.
My svg is embedded in an html object, then I just access it by calling a normal click event referenced to a function that access the svg component through:
window.top.document.getElementById('elementId');