I noticed that Polymer "consumes" gestures on my own web components.
I have 2 web components on my page: google-map (Polymer based) and animated button (native one, written by myself, not using any frameworks).
They are imported in this way:
google-map folder has the following structure:
Angular ng-click is defined on animated button:
<animated-button-web-component ng-click="fireEvent('click');" data-src="" data-src-click="" data-src-hover="" data-text="foo" class=""></animated-button-web-component>
When I use Chrome in regular mode click event is fired as expected but when I use Chrome in the device mode the similar touch event is not fired from the animated button. If I remove google-map completely from the page it starts working.
Do you have any idea how to "isolate" Polymer so it doesn't interfere with the events in the document?
Thank you,
Alex
Related
I am new to react and I am using a modal dialog. It is visible when I am inspecting it on browser but not visible generally. What could be the issue?
(Can't paste code since it is work related)
Are you using css z-index at all ? I would use createPortal() approach see the React docs to learn how to do that https://reactjs.org/docs/portals.html
I'm creating a third-party app, which is loaded through an iframe.
The iframe creates a draggable element in side it.
On first page load (before scrolling the page), the draggable (slider) works fine.
But after scrolling the page behind the iframe, it's hard to get the slider to slide again.
(Note that this is a mobile issue, safari on iOS especially, but also chrome on iOS)
In the following demo I have used the GSAP Draggable library with react to create the draggable element but have also tried to code it in plain react with no luck.
Here is a demo: https://unfjl.csb.app/
I have tried a lot of different things (css, touchevents etc), but cannot get it to work...
What could cause this behaviour?
Update (no iframe example)
Demo no iframe: https://p5cu9.csb.app/
Same example with slider as above, but in this example the draggable is rendered directly in the DOM and not in an iframe. The problem still occurs. I suspect it has something to do with the fixed css position of the slider...
This is gonna sound really strange, but a bug in iOS Safari causes that and the only way I know of to get around it (which I discovered today via Googling) is to add a "touchstart" listener to the of the top-level page (not the iframe)!
document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
That isn't something I can add to Draggable because it wouldn't be able to access the parent document (outside the iframe) to add that properly (security restrictions in the browser).
You could also add a touchforcechange listener that prevents the default behavior (I'll be adding that to Draggable itself too):
yourDraggableElement.addEventListener("touchforcechange", function(event) {
event.preventDefault();
});
Browser bugs are fun, aren't they?! ;)
(Originally answered in the GreenSock forums at https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225)
In my single page application developed using Angular Js, I don't want to navigate in browser using browsers Back button,How to Hide or Disable or override the Back button function
You cannot control browser features using Javascript. It's as simple as that.
I found an answer here. But this code above will not work well with AngularJS because AngularJS uses URL_Hash # in the background.
Control or Disable Browser Back Button with Javascript or AngularJS
I am creating a simple app with the ionic framework, and I want to run a function on each of the swipe events or drag events.
like this :
When user swipe up/drag up arrow, it will open it ( like open notifications smarthphone ).
swipe down or drag down, it will close it.
Can anyone help provide sample HTML & JS to listen to gesture event?
Regarding gesture events handlers you can check the Ionic docs, for example:
http://ionicframework.com/docs/api/directive/onDragUp/
AFAIK no official component fits with your requirement (the most similar is ionSlides but works horizontally). However there are some 3rd party directives or demos like the following you may adapt to your needs:
https://github.com/bramus/ion-drawer-vertical
https://github.com/darylrowland/ionic-contrib-swipe-cards
http://www.idangero.us/swiper/demos/#.VrxDjfnhC71
Bootstrap3 and Angular are supposed to play nicely together.... and with Bootstrap being "mobile first" I never thought I'd run into this, but I have.
I have a modal window being popped up from a button (via a standard modalService), which works just fine across the desktop browsers I've tested with (IE 10, 11, Edge, Chrome, Opera, Safari, and Firefox) but fails on mobile. Every mobile I have access to (IOS Chrome, IOS Safari, Android Internet Browser, and Android Chrome).
It also displays the same failure on Chrome emulation of mobile browsers.
In all cases on mobile, the radio buttons and checkbox fail to recognize a tap/click event.. unless I hold for a long long time (much longer than the 300ms I've seen mentioned in articles). In a couple mobile browsers that do capture it - the Angular actions which result from the change are not being executed on the mobile clients (but are on the desktops)
<input type="radio" class="form-control" ng-Model="modalOptions.rScope.selectedItem" name="purchase" ng-value="selectedItem=item" ngClick="modalOptions.rScope.selectedItem=item">
ngTouch is being added to the page to facilitate the faster ngClick event.
I have stripped out all the relevant code and created a plunk showing this : http://plnkr.co/edit/iZV6JRnHHHRwAKO2JJ06
Is this a function of how the radio buttons were defined? And if so, why is the checkbox displaying the same behaviour (I know it doesnt currently have an ngClick on it - but the behaviour is the same):
<input type="checkbox" class="form-control" width="20px" ng-model="modalOptions.rScope.xgiftfor" />
I get no errors indicating the ngTouch module is not being loaded...
The one thing that bothers me... the page for ngClick states:
A more powerful replacement for the default ngClick designed to be used on
touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-
release before sending the click event. This version handles them immediately,
and then prevents the following click event from propagating.
Is ngTouch preventing Angular from continuing to propagate updates on the form? That click event will have other consequences as the modalOption.rScope.selectedItem update occurs.
OR am I stretching to find a reason for this behaviour?
[EDIT]
I have updated the plunk to display the same data set (code slightly modified due to scope) on the main page, and the behaviour on the modal is NOT present on the main page. Run it in your fav desktop browser and it's good on the main page - but open the modal, and it just doesn't work.
http://embed.plnkr.co/WnxArMU9VUVjDwnvueV1
Does anyone have any clue what the modal introducing that is interfering with the processing (and how to work around it)?
I was running into the exact problem. Unfortunately, I only discovered that the ngClick directive is now deprecated with no workaround.
DEPRECATION NOTICE: Beginning with Angular 1.5, this directive is deprecated and by default disabled. The directive will receive no further support and might be removed from future releases. If you need the directive, you can enable it with the $touchProvider#ngClickOverrideEnabled function. We also recommend that you migrate to FastClick. To learn more about the 300ms delay, this Telerik article gives a good overview.