I have an app which is an Ionic Project.
in android it is working fine. But when I build and run the project in ios I have to click Every button twice (double tap) in Simulator and in Device also.
I don't know what exactly is the issue. and how to debug.
Is their someone who knows what to do ?
Edit this is happening for Buttons and a tag.
I put this CSS:
.button:hover
{background-color:red;}
and when I run my project and click on button then this :hover css is applied and click event not triggers.
On iOS devices, I believe the first touch is seen as 'hovering' in a similar way to when you hover over something with your mouse. Essentially, the first touch on iOS is seen as hover and the second is seen as a real click.
You can listen for .hover events instead of .click events based on the browser, which will be Safari on iOS and Chrome on Android. Although some iOS devices may be running chrome, this could work for the majority of the cases, assuming it is possible with Ionic.
Related
I have a button in a webpage that I want at the bottom of the page. I want this button at the bottom of page no matter where scroll is. The problem is the standard css of bottom: 0px;position:fixed; does not work when the keyboard is up.
Right now we are using ion-footer-bar but that only keeps the button on top of the keyboard on android. When the keyboard gets pulled up for ios it does not get moved up. Anyone have any workarounds for this?
For applications using Cordova you can do the following:
This is due to the fact that on Android the WebView shrinks when the keyboard and on iOS it does not (by default). So iOS is you can put the following code somewhere in the initialization of your app and it should behave the same on iOS as it does on Android.
cordova.plugins.Keyboard.shrinkView(false);
This function does not work on Android, so you don't have to worry about it there.
I have integrated PhotoSwipe 4 on my website. It works well on a desktop machine when using a mouse, but when I open on mobile nothing works, and I can scroll down (it should close like that). Any ideas why this happens?
Here's a test page with this issue:
http://d9281484.u62.c14.ixinstant.com/events/first-event-2014
Most likely it's caused by mCustomScrollbar script that you're using, which stops the propagation of all touch events on mobile.
In my asp.net project, I have written javascript functions on mouseover and mouseleave/ mouseout events of buttons and some other controls. Previously this website was used on non touchscreen devices. But now when I am trying to access the same website on Windows 8.1 , on Internet Explorer 10/11,the problem is, after touching a screen mouse click event is fired (which is ok in my case)and when I remove finger on screen, mouseleave event is fired (which is problematic e.g. dropdowns are not working properly after mouseleave events fired). This Problem arises only in Internet Explorer 10/11. And the site is working fine with all its functionality on Chrome. Is there any JQuery Plugin or some other solution for this problem? Please reply soon. I need this very urgently.
Thanks in advance.
Add aria-haspopup="true" attribute to element triggering dropdown showing/hiding.
https://msdn.microsoft.com/en-us/library/ie/jj152135(v=vs.85).aspx
I have a web application in which I have a div element with an onclick javascript action. This web application works fine on iPads and desktops alike.
When it is launched within an iFrame on an iPad, however, all of the sudden, my clicks/taps are rarely and inconsistently acted upon. When running in an iFrame on a desktop browser, I do not see this behavior.
Has anyone seen this type of behavior before?
I'm not sure about your exact situation, but I was having a similar problem when my botton had a "mouseenter" event trigger binded to it. The mouse enter would be called on the first "tap" and the button would be called on the "second". Because of the way ipad uses those two events.
My solution was to use the browser detection tool from http://detectmobilebrowsers.com/ and set a var ismolible = to true or false, depending on whether the browser was mobile or not, then I used an if statement to unbind my mouseenter immediately if the browser was mobile. You do have to modify the http://detectmobilebrowsers.com/ code for ipad.
Hope this helps!
I have a project created with canvas. This project works fine on every browser on my iMac (Safari, Chrome, Opera, IE, Mozilla). For this I have created a normal click function:
$('#canvas').click(function(e) {}
When opening this project on a Windows7 SmartBoard (with Multisync s521-p nec) it also works fine, except at Chrome, you cannot touch it. If you click with the mouse on the SmartBoard, that is not a problem at all, but you just cannot touch it with the fingers. Since my project will just be used on this SmartBoard, and preferable at Chrome I really need to fix this, but I have no idea how.
Use Javascript touch events instead of click:
https://developer.mozilla.org/en-US/docs/DOM/Touch_events#Setting_up_the_event_handlers
click is a mouse operation and because the device has "mouse" it is reserved for it.