PhotoSwipe not working on mobile - javascript

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.

Related

opening href by touch is not working for mobile devices

I have created some social icons using tag. To open the particular social icon ,i can either touch it or click it . It is working fine for desktop screen and in my ipad. Whereas it is not working when i tried to open the same link with touch in mobile device. Does anyone experienced this problem? if so, how to solve that?

I have to click twice to activate any button action (Ionic/Angular)

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.

JS Pan Gestures on Android Webview doesn't work

pan gesture / scrolling on a web view is not working on a WebView hosting jquery datatables table until a click on a table header is done.
Meaning, the user cannot scroll the table up and down and sideways, until he presses a table header (which sorts the table). This also happens on non-jquery-tables JS code – the WebView is not scrollable. Interesting thing to note, that when I attach a chrome debugger to the WebView, scrolling starts to work.
I’ve tested the same code on Android chrome browser with local and remote JS code – and scrolling works. So this leads me to think that there’s some kind of issue with the WebView itself.
I thought it might be a swipe gesture collision - but there is no swipe gesture defined (meaning the web view is standalone in the activity and there are no windows to swipe to).
Any ideas?
You should post your code, Android WebView has many options, I'll start testing:
webView.getSettings().setBuiltInZoomControls(true);
Also check that javascript is enable.
Hope this helps
Found out the issue.
Probably there's a bug on WebViews on KitKat (and smaller) versions on Android. On Lollipop things work fine.
My workaround for KitKat was to redraw the DOM:
setTimeout(function() {
var htmlString = $( '#content' ).html();
$('#content').html(htmlString);
}, 1000);
That somehow returned "focus" to the DOM and panning gesture works.

jQuery mobile panel not fully rendering on device

I have been creating this app for mobiles using Phonegap and jquery mobile, all has been going well until I try and run it on my actual device (HTC Flyer Android 3.2.1). There appears to be some kind of rendering issue.
Just to note this only appears to happen on device, not when using an emulator, or in a browser on my computer. When I slide right to open the settings panel it does not fully render. Pictures will show this better:
This is what is supposed to happen when the panel opens:
But this is what actually happens:
When I touch the button or heading on the panel it seems to refresh itself and render's fine, which is odd, as both of the above are screen captures form device.
Upon discovering this I added this code:
$("#SettingsPanel").trigger("create");
To see if recreating it would help. I know this isn't a great thing to do preformance wise but I had no other idea's
I wanted to test on another more powerful device to see if it was a performance thing, but I don't have any other devices to test on.
So now I'm stuck and I'd like some help please.

HTML Button in iFrame does not work properly on iPad

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!

Categories