I have a web app based on angular-js and openlayers3
I have an overlay (popup) with "stopEvent : false"
I have set an ng-click on an element inside that overlay
The event is correctly fired on desktop (even with smartphones resolution, so the css and the possible overlap of html elements is not a problem), but on android phones that event is not fired.
Do you have suggestions about this problem?
Related
I’m working on a page where we have no access to the platform code (think page builder).
I’ve used jquery to launch some tooltip targets when a trigger is clicked, and because of the limited platform access I use jquery to traverse up the DOM and bump the parent div’s z-index up high so the tooltip sits over the button.
On either second click or timeout the z-index goes back to 1 and tooltip goes away. All this works fine on desktop.
iOS however, shows the tooltip and if you scroll down it almost immediately drops the z-index down so it goes behind the buttons.
Has anyone encountered this annoying behaviour? And is there a workaround?
I’ve tried forcing !important on the tooltip, no luck. I also tried applying transform 3D 0, transform-z, with no luck.
Load this page on an iPhone, you will see a video player with a cog icon on the control bar. Directly touching this button will not register anything, but if you touch a bit outside to the right, it will fire a hover event. The popup radio list is not selectable either.
All of these work on an iPad. Any idea why?
Well I found out that the <video> element on iPhone Safari will block all touch events. The workaround I use is to reduce its dimension to 1px*1px and always show the poster image, giving the illusion of an actual video. Youtube employs the same workaround.
P/S: the link above may change over time.
I am building a mobile web app that uses jQuery and hammer.js for touch controls. hammer.js has a feature called "prevent_default" which turns off Safari's scrolling/zooming/prettymucheverything. I have a page with a form using < input > for text fields, and a javascript listener that calls .focus() when you tap the form.
This all works well up until a point. The page is fixed in place and looks real pretty, and when you click on a form field it zooms in and the iOS keyboard appears. The problem is that when the user is done entering text, there is no way to zoom out. The browser is so zoomed in from .focus() that the browser bar is gone and you have to close the browser tab and re-type in the URL instead of refreshing.
I am looking for a way to force the browser to zoom out back to the initial view. I've looked all over the internet for some solution but have yet to find anything.
I have the viewport meta tags in the header to disable zooming from the beginning, but is not useful in solving this issue
A hacky solution is to focus and blur an inputfield after you have changed the viewport attributes.
function refreshViewportZoom(){
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=0.5, maximum-scale=0.5, scale=0.5, user-zoom=0.5, zoom=0.5');
document.getElementById('myInputField').focus();
setTimeout(blurLater,2000);
}
function blurLater(){
document.getElementById('myInputField').blur();
}
The blurLater is needed as a function, because Safari seems to look ahead and ignore it otherwise.
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');