I'm building an mobile app with Meteor. Now if the phone changes orientation, the page no longer renders correctly. So I need to refresh the page after orientation change.
Is there a way to detect the orientation change in Meteor cordova app?
Thanks.
A good point to start is this post that actually covers both Android and iOS platforms:
Detect rotation of Android phone in the browser with JavaScript
We currently have two handlers added with window.addEventListener in
Template.template_name.created. resize event is used on Android and orientationchange event is used on iOS.
Related
I need splash screen animation before entering the main page in android and iOS. but I unable to find this type of animation. tell me anyone knows this means, kindly give me an idea. I attach the below reference. its in developed in native android. how to develop this process in xamarin forms cross-platform(android & iOS).
Reference : https://demonuts.com/splash-screen-animation/
You can set the animation on a ContentPage and set it as MainPage firstly to let it looks like an illusory splash screen. Then you can change the MainPage use Timer Task.Delay(1000);
And you can use the library Lottie from Nuget. Lottie is a library, designed for iOS, Android that allows you run animations. These animations are defined in a JSON file, containing all the details of colors, shapes, transforms and more.
Usage
First install the following Nuget package to your native and share projects.
Com.Airbnb.Xamarin.Forms.Lottie
In your native projects, after the Xamarin.Forms.Forms.Init line, add the following, into each project.(AppDelegate.cs in iOS and MainActivity.cs in Android)
AnimationViewRenderer.Init();
In order to show an animation, you first need the after effects JSON file. Put this in your Assets (Android) or Resources (iOS) folder.
<forms:AnimationView x:Name="AnimationView"
Animation="LottieLogo1.json"
Loop="True"
AutoPlay="True"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
There is a sample maybe can help you.
When using aframe on mobile and going from page to page I want it to stay in VR mode after the user clicks the VR icon in aframe.
However at the moment whenever you go from one page to another it kicks the user out of vr and the address bar appears so you have to manually click the VR button everytime you want to enter fullscreen again.
Is there a solution to this?
You can check out my aframe application below:
https://www.360belfast.com/app/options.html
I've read desktop solutions online but not much for mobile.
It's not possible. On mobile, A-Frame relies on fullscreen mode that doesn't persist on navigation. It has to be triggered by user gesture on each individual site. It's a browser policy that cannot be worked around. In-VR navigation is only available with a supported headset on Firefox and Supermedium on desktop, and Oculus Browser and Samsung Internet on standalone headsets.
I am making a simple iOS application with two Views using gluon. In one of the views I need to be able to keep screen alive indefinitely, prevent it from rotating and have it full screen without the status bar showing. The other View should have the default behaviour(rotating normally, let screen go off when there is no touch input by the user and status bar should be showing).
I have seen some tutorials on how to do this on Android binding an interface to native code. Is this possible to do in iOS? I have looked around everywhere online and no one seems to have done this. Any pointers ? Thank you.
I want to use fullcalendar plugin (http://fullcalendar.io/wiki/Support/). It only support click event. Will it work on mobile with touch events/swipe gestures. Also can we make it responsive for Mobile and tabs?
I use it on mobile successfully. The docs offer a couple different ways to determine rendering size, my app is responsive and it displays correctly on iphone, ipad and desktop of all sizes. I use jquery touch punch to map click to touch events and it works swimmingly. For phone size devices I like to use 'orientationchange' event: in landscape I show agendaWeek and on portrait I show agendaDay views.
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.