I have an issue with iScroll4 when I change the orienatation from portrait to landscape. It is working on AppMobi XDK, but on iPhone, it is not rendering properly. I have tried to trap the orientationchange event and called the refresh method of iScroll with different timeout values, but no luck.
please use jq.scroller.js from the link:
https://github.com/appMobi/jQ.Mobi/tree/master/plugins
It is easy to use with like this:
var options={
verticalScroll:true, //vertical scrolling
horizontalScroll:false, //horizontal scrolling
scrollBars:true //display scrollbars
vScrollCSS : "scrollBarV", //CSS class for veritcal scrollbar
hScrollCSS : "scrollBarH", //CSS class for horizontal scrollbar
refresh:true, //Adds 'Pull to refresh' at the top
refreshFunction:updateMessage //callback function to execute on pull to refresh
}
var scroller = $("#my_div").scroller(options);
Replace #my_div with your Div ID.It will work perfectly.
Thanks
This is a bug with iScroll. I'm a developer at appMobi, and lead developer of jqMobi and our scrolling library does not have this problem.
Related
I use privacy-screen plugin to hide content when app is in the background, but it shows just gray background. I need to set splashScreen instead. Any suggestions?
I tried splashScreen plugin, but it is not working for me.
I don't know if it's the best way but I think that using Capacitor appStateChange from #capacitor/app (documentation) you could show and hide a screen with your logo when app is in background or foreground.
import { App } from '#capacitor/app';
App.addListener('appStateChange', ({ isActive }) => {
console.log('App state changed. Is active?', isActive);
if(!isActive) showLogoScreen();
else hideLogoScreen();
});
I hope it helps :)
For iOS, I did it simply in native code: just find the "applicationWillResignActive" method in AppDelegate and insert a view on top of the window.
For Android, sadly I couldn't find a better solution. The "gray background" you described is likely the implementation of Hide screen in 'Recent Apps List', but allow screenshots
I have WebView inside the LazyColumn. It shows up fine. The thing is when I try to navigate back by calling navController.popBackStack(), I got fatal crash (Fatal signal 11 (SIGSEGV)).
I ran it on the emulator. It works fine when click the "Back" button in the emulator.
Also, it works fine when I replace LazyColumn with Column.
Any idea or thought?
I had the same issue and you can fix this in some ways that I've found:
destroying your WebViev webView.destroy() or making it invisible webView.visibility = View.INVISIBLE when your screen disappears.
adding alpha = 0.99F (any value but less than 1) to WebView. webView.alpha = 0.99F
When using WebView inside LazyColumn try using the remember function to retain the state across rebuilds. Alternatively, you can try a different layout component like VerticalScroller to wrap the WebView.
LazyColumn{
items(items){
// ...
remember {
WebView(/* ... */)
}
}
}
I recently worked out a solution to another problem involving carousels on another post, but I found one issue when it comes to restarting the auto transitions from panel to the next on iPhones and iPads. (They won't restart.)
Here's a link to my original post and solution: Vanilla JS carousel next/prev button killing mouseover event pause
Here's a link to a JSFiddle containing my solution: https://jsfiddle.net/npzu90do/
After posting that solution I found that everything worked as it should accept the auto transition from one panel to the next stopped if you ever clicked the 'Prev' and 'Next' buttons on the sides. So I added this code to help restart the auto panel movement if you clicked outside the carousel.
document.getElementsByTagName("body").onclick = function(e) {
if(e.target != document.getElementById('carousel')) {
intervalID=setInterval(carouselPlus,speed,1)
}
}
Which works perfectly on all browsers except if you are on an iPad or iPhone.
I tried adding the following but that stopped the carousel from auto-starting due to errors in all browsers.
let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
document.getElementsByTagName("body").addEventListener(touchEvent, function(e) {
if(e.target != document.getElementById('carousel')) {
intervalID=setInterval(carouselPlus,speed,1)
}
});
Any suggestions?
I'm having an issue with textfields in Sencha Touch 2, this is only occurring in iOS 7 and working fine in iOS 6 and Android.
The issue is when you tap a field the keypad opens but the cursor disappears, it should be focus on selected textfield but it does not. You have to tap the textfield again to focus.
I have checked this issue on iOS 6 and android (on devices as well as on simulators), working fine but not on iOS 7 only.
Is anybody having this issue...?
Is this a bug in sencha or should i missing something, please advice.
Thank you..
I have found this to be directly related to two things:
centered: true
pack: 'center'
When I removed those lines, my app started playing nice. The challenge is to find an alternative way to center your panels.
I spent days figuring this out. Actually there is a problem with Sencha understanding the ViewPort height. In your index.html add a script block with the following code
if (window.device && parseFloat(window.device.version) == 7.0) {
document.body.style.paddingTop = "20px";
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
}
This does two things for you
It Provides enough space on Top to display the activity bar
It sets the Viewport height to be that of screen height, irrespective of the keyboard being present or not.
Also, If your app works in Portrait and Landscape mode, you will need to add these lines in your Viewport.js (or Main.js)
initialize: function(){
Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, {buffer: 0 });
},
handleOrientationChange: function(){
try{
if (parseFloat(window.device.version) == 7.0) {
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
}else{
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight());
}
}catch(e){
// do nothing
}
},
And Yes, Make sure they Keyboard Bounce is TRUE in true (if you are using cordova). This will make sure your field does not get hidden.
Hope this works for you.
add height="device-height" in viewport meta tag, fixes the issue.
ios7 issues with webview focus when using keyboard html
I have a jquery mobile webpage. It looks good on desktop browsers, and also on android.
But in iphone's safari, I have a weird white space in the bottom of the page. It looks like a problem with the min-height of the .ui-page, because the white space is as height as the title-bar + url-bar of safari.
Any ideas?
EDIT:
I found the problem: It was:
html, body {
overflow-x: hidden !important;
position: relative !important;
}
I hope this code fix your problem.
Example
// Get height of the document
var screen = $(document).height();
// Get height of the header
var header = $('[data-role=header]').height();
// Get height of the footer
var footer = $('[data-role=footer]').height();
// Simple calculation to get the remaining available height
var content = screen - header - footer;
// Change the height of the `content` div
$('[data-role=content]').css({'height': content });
The problem is with min-height attribute in min.css.
change
ui-page { min-height:"400px" }
Hope it works :)
Sorry for posting on an old question, but I recently got stuck with this.
Turned out the problem was caused in some browsers by JS functions people provide for hiding the address bar.
such as
function hideAddressBar(){
if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
setTimeout(window.scrollTo(1,1),0);
}
window.addEventListener("load",function(){hideAddressBar();});
window.addEventListener("orientationchange",function(){hideAddressBar();});