How to trigger aframe's orientation modal? - aframe

I am working on an aframe project, and I would like to trigger the orientation modal when the screen is vertical for iOS.
Is this a default aframe behavior?
If this is a default aframe behavior, then I must have disabled it. How do I re-enable this behavior?

Looks like the orientation modal is on by default, and it was turned off in my project.
// Issue
this.element.nativeElement.setAttribute('vr-mode-ui', 'enabled', 'false');
// Fix
this.element.nativeElement.setAttribute('vr-mode-ui', 'enabled', 'true');

Related

Aframe how to adjust canvas in vr mode

hello guys I have a problem in aframe vr mode using android webbrowser.. I dont know how to hide all buttons from the right.. it looks like the fallowing.
screenshot
I already tried adding code like document.body.requestFullscreen(); but it doest not work.. any help?

How to reload the CSS file after orientation change (phone)?

For the gallery on my website I use media queries to readjust the image sizes depending on the screen width (I use the folio theme by galleria) and the image size is supposed to change when you tilt your phone - but that only happens after you reload it manually. (Adding orientation landscape or portrait doesn't do anything).
So basically, I want to avoid reloading the whole page because it involves reloading the images - the information is in the CSS file, can I reload that file individually?
Thanks a bunch!
Use e.g. jQuery mobile and catch orientationchange event.
$(window).bind('orientationchange', function(e) {
if(e.orientation === 'landscape'){
//edit you CSS
// or reload image
}else{
// roll back
}
});
All recent smartphone and tablet browsers definitely support media queries based on orientation, see article here. It is mentioned there that it is supported from iOS 4.0 upwards. If you scroll down the Bonus: iPhone support section it also provides a workaround for phones that are quirky about triggering automatically.
If you specify the media query as part of the CSS include it shouldn't be loaded until it becomes applicable, automatically solving your problem.
If you still run into platforms that have problems, you can use the Javascript onOrientationChange event as a fallback, using for example Mootools Utility/Asset to load images and stylesheets at runtime, or its jQuery counterpart.

My simulator is going crazy. Simulator scale is different then ViewController and text is corrupted

Why?
And sometimes there's this:
Is it a bug? Is there a fix? I just dragged a button and a textfield to the view controller.
That's odd, few things that come to my mind
Check if you're using autolayout or 'auto resize subviews'
Check if you programmatically do any layout
Check if you're working with portrait/landscape orientation
I doubt it's a bug, such an obvious problem would have been fixed by now

Soft keyboard causes view to bounce in flex mobile app

Have a flex mobile app with a couple of text inputs set up in a login form. When the soft keyboard appears the view pans up but then "un-pans" and "re-pans" giving this strange bounce effect.
Does anyone know how or why?
I am having the same issue. I ended up resolving it by changing the softKeyboardBehavior property in my app.xml to none instead of pan. I prefer the look of the default pan, but none works too, and without the bouncing.

Sencha Touch 2 & webkit-overflow-scrolling: touch

Has anyone had any luck with working out a solution to get -webkit-overflow-scrolling: touch to work in Sencha Touch 2?
Although the performance is quite good on iPhones, Sencha's scroller is still too choppy on Android Phones. Meanwhile the CSS3 Solution would seem to be the choice to go for now on Android.
Anyone any luck?
To apply native style scrolling to a panel given as;
Ext.create('Ext.Panel', {
style: 'overflow-y:scroll;-webkit-overflow-scrolling:touch;',
id: 'scroll-panel',
items:[...]
});
overwrite touch move event to prevent Sencha Touch to control over scrolling on that panel
var scrollPanelDom = Ext.get("scroll-panel").dom;
scrollPanelDom.addEventListener("touchmove", function(e){
e.stopPropagation();
}, false);
so you can get rid of choppy scrolling and have it native style instead on IOS devices (and according to my tests better scrolling experience on Android devices)
At the moment, -webkit-overflow-scrolling is exclusive to Mobile Safari on iOS 5 and later. So no Android anyway.

Resources