Detect soft keyboard in Meteor cordova with ratchet - meteor

Meteor now support mobile apps. That's great. However, I find that the app running as a mobile app is not the same as running in a mobile browser.
When it runs as a mobile app, if the user wants to input to a text field, a soft keyboard shows up. Then, after the user finishes and click the button (at that point, the soft keyboard is still shown), the app brings to another page. However, the new page renders as if the soft keyboard still exists so the lower portion of the screen is blank. The elements that are rendered to a fixed position (like footer) still shows up at the bottom though. Even though the lower portion of the screen is blank, the elements are still there. If I tap the blank portion, and if there is a link or button in the place I tap, the app still brings me to the new page. Since I use Meteor and ratchet, I don't know which one is the issue.
I suspect the issue is that when the user clicks the button, the Meteor renders the new page immediately, but the soft keyboard get hidden afterwords.
This situation doesn't happen when the meteor app runs in a mobile browser, however.
I use meteor, iron-router, and ratchet. The issue is identified in an android 4.X device. Any idea how to fix the mobile app specific issue? Thanks.
PS. If I delay firing the page transition by a second, I don't have the issue. So my suspicion is correct that the page transition happens before the keyboard is hidden.

Related

Can't Unmute YouTube Videos with Revolution Slider on Mobile

I'm using Revolution Slider in WordPress and I'm running into an issue where on mobile devices, I cannot unmute YouTube videos. I have videos in the slider to be muted on load in and to autoplay. I have interaction and controls both allowed. However, when I try to click the unmute button on the screen, it simply pauses/plays the video. I'm not sure if the pause/play button that appears somehow overlaps and the YT controls are underneath or something. It actually doesn't look like the controls generated from YouTube but instead the RS native controls. I tried turning controls and interaction both off but unsurprisingly, this causes absolutely zero action to happen when you click/press on the video, not even pause/play it.
You can view the issue in action at http://www.hagentertainment.com. The slide in issue is slide #2 out of 3.
Being an issue related to mobile and iframes makes it relatively difficult to diagnose with 100% efficacy. I used Browerstack to open a connection on a Galaxy S20 and noticed the issue as you described.
Using the Dev Tools, I was able to get it to allow the mute button to be clicked by changing the &enablejsapi=1 to &enablejsapi=0. You can see in this screenshot below that after doing that, it allowed it to be clicked. You also have a JavaScript parse error showing in the console - that could potentially be preventing a JS API controller (built into Revolution Slider?) from functioning correctly.
So it looks like your options (for the moment) are to fix that JS error and see if it works, or disable the JS API in the url of the videos

Visual response for loading pages in pwa

Is there a way to let PWA users know that a clicked link is being loaded. Usually in the browser we see the blue progress line indicating this but in the pwa the user is left to assume the page is loading except there is a pseudo effect on the buttons programmed by the developer. I understand the idea behind pwa includes giving users immersive visuals and if pages load faster, the users will not bother about the blue line but sometimes it's needed.
Going through the same thing but i think i found a way.
We can use bootstrap spinners to animate this. We can use javascript to detect a link click and show the spinner. We can also add this on submit button click.

Materializecss Sidenav freezes

I have been struggling a lot lately with this problem and I have not been able to debug the root cause of the problem. At first when I installed materializecss on my website it worked absoulutely fine but when I designed the <nav> with my custom CSS then it stopped working properly.
This is full screen view of the page,
This is mobile or tablet view,
And this is where the problem starts, as soon as I click on that list button the screen freezes till I click again. Here's the view of that,
Waiting for a quick response. If you need any other info, just ask :)
Do you load
$(".button-collapse").sideNav();
at least in your init.js?

Virtually click the "Back to [app]" button in iOS9 Safari

Our team is building an iOS app which links out to Safari to process a charitable donation flow. In iOS 8, we can return the user back to the app by setting document.location to the app's custom URL scheme (e.g. myappscheme://donation/success), and everything flows fine for the user.
In iOS 9, Apple appear to have tightened their security model to display a popup dialog when exercising custom URL schemes in Safari - this allows the user to click "Cancel" and not link [back] out to the app.
My question is, given that iOS 9 now has a "< Back to [app]" button in the header of Safari - is there a way to 'tap' that link via JavaScript, rather than having to resort to a custom scheme, or Apple's new Universal Links mechanism?
Virtually clicking "Back to [app]" is desirable as it makes Safari slide back away to the right (the inverse of the way Safari now slides in from the right), rather than "re-opening" our app, like it does after clicking "OK" on the popup dialog. It also would stop iOS from putting a "Back to Safari" link in the top-left of our app which, is what happens when our app is opened via a Universal Link or Custom Schema.
You can't, or at least, Apple doesn't want you to. They've precisely implemented this mechanism to avoid this kind of automatic-fly-back-to-my-app scheme. If there were any documented way to do it using the SDK, that would result in a security issue.
However, in iOS 9, there is a new way to do this, and it involves hosting the web content in a Safari View Controller (SFSafariViewController), directly inside your app. This way you get all the benefits from Safari (user experience, shared cookies, etc.) and the user remains in your app (she can simply close the Safari view by tapping the 'Done' button on the top right corner of the screen).

WatchKit Menu Items Not Displaying

I'm in Xcode 6.2 Beta 3 (Build 6C101), I've added a menu and two menu items to my Interface Controller, and created IBActions for both. I've given them titles and images, but when I run the app nothing displays.
I've read
https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/WatchKitProgrammingGuide/Menus.html
and can't see anything about need to show menu items programatically - what am I missing?
You do not need to present the menu programmatically. The only thing you need to do is wire each button to IBActions in your Watch app extension.
The most likely issue is caching of the previous Watch app storyboard. Do a clean build and try again.
Finally, as you likely know WatchKit menus only display on a "force press". They cannot be used for the main interface of the Watch app. In the Simulator, a click and hold with the mouse will simulate a force press, and the animation will make it clear when you have done one, even in contexts where it doesn't do anything.
This was solution for me- Go to Hardware->Touch Pressure->Deep Press then try tap on watch simulator.
I have recently encountered this issue on a real device, although the menu was working as expected on the watch simulator. In my case, the problem was in SF Symbol that I've used as an image.
Everything was fixed after replacing it with an image from the assets catalogue.

Resources