I've set up a website using fullpage.js.
I have now problems on touch-devices: When autoScrolling is enabled I often can't swipe to an other section. It's like your already on the bottom of the page.
I have this issue on all touch-devices I've tried (Ipad & Iphone with Chrome and Safari, Android with Chrome). On a desktop computer i don't have this problem.
Visit www.airport-signage.com to see the issue.
My settings for fullpage.js:
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'approach', 'work', 'services', 'company', 'team', 'contact'],
menu: '#menu',
'autoScrolling': true,
'controlArrows': true,
'slidesNavigation': false,
'verticalCentered': false,
'touchSensitivity': 5,
'css3': true,
'fixedElements': '#fixedHeader',
'scrollOverflow': true,
'normalScrollElements': '#map_canvas',
'sectionsColor': ['#3df945', '#000', '#fff', '#3df945', '#000', '#fff', '#3df945'],
'onLeave': function(){
stuff
},
});
});
What could the problem be? How can I fix it?
removing
'normalScrollElements': #map_canvas',
helped me to get rid of the issue.
Just wondering if the original poster ever figured out what was up.
I recently started using fullPage.js and it's not working as intended on mobile Chrome after inserting anchors for better navigation.
Related
I'm using Ionic 4 (4.12.0) with the PhotoViewer plugin versions:
"#ionic-native/photo-viewer": "^5.21.5",
"com-sarriaroman-photoviewer": "^1.2.4",
And the code is:
public presentImage(imgSrc): void {
this.photoViewer.show(imgSrc, '', {
share: false,
closeButton: true,
copyToReference: true
});
}
The variable imgSrc is a base64. If I remove the options, the photoViewer opens with a black screen, but with the options it's crashing the app. But as the title states, it only happens on iOS.
after read the document, base64 is just supported on android. So it is what the problem.
(1.1.4) Base64 Support on Android
I have an app with Meteor React using TinyMce through react-tinymce (as per instructions at https://www.tinymce.com/docs/integrations/react/
I have a form component with TinyMCE which is called from an orderedlist to allow users to add comments. It works as expected except in the following situation:
When using either an iPad or iPhone (works fine on desktops and Android mobile).
The first instance of the form works as expected, however with subsequent attempts to add comments the cursor does not show up in TinyMCE and the user cannot enter their comments.
Without an external keyboard, when the form is opened the keyboard pops up - I have found that by manually closing the keyboard, then tapping in the textarea again it works.
With an external keyboard (on iPad), clinking the link in the menubar (I am using the link plugin) and then closing it and tapping in the textarea again it works.
I have attached code to show how TinyMCE is initiated (and removed), as well as how it is called in the form.
Any suggestions as to what I can try to get this to work properly on an iPad/iPhone would be greatly appreciated.
componentDidMount() {
tinymce.remove();
tinymce.init({
selector: '.addComments,
plugins: "autoresize link paste",
paste_as_text: true,
autoresize_bottom_margin: 10,
relative_urls: false,
link_title: false,
default_link_target: "_blank",
height: 200,
autoresize_max_height: 200,
toolbar: 'underline italic numlist link',
menubar: '',
skin: "lightgray",
statusbar: false,
content_css : '/css/content.css'
});
}
componentWillUnmount() {
tinymce.remove();
}
And it is rendered as follows:
<div className="AddComments" id={`background${this.props.meetingId}`} onChange={this.handleEditorChange}></div>
I found that others are having problems with TinyMCE on an iPad https://github.com/tinymce/tinymce/issues/2699 so I have switched to react-quill and it works fine across all platforms.
I’m taking my first step in react native land and trying to understand the layouting in regards to the soft keyboard.
I’ve created a new react project via rect-native init and written the following component:
<ScrollView style={{flex: 1}} contentContainerStyle={{flex: 1, borderColor: 'green', borderWidth: 10}}>
<TextInput/>
<View style={{flex: 1, borderColor: 'blue', borderWidth: 10}} />
</ScrollView>
The result looks as expected and when I touch the input field the keyboard covers my view.
However, if I minimise the app by pressing the square/overview button and then choose the app again the view will adapt it’s height so the keyboard doesn’t cover the view.
My findings so far is that:
- This only happens on Android
This only happens if a scrollView is present
Playing around with android:windowSoftInputMode in the android manifest doesn’t seem to affect the issue.
I’ve tried react-native: 0.39.0 / react: 15.4.1 and react-native: 0.33.0 / react: ~15.3.0 and it’s present in both
It’s however not reproducible in rnplay (0.33) : https://rnplay.org/apps/kr-OQw
I’ve tried on a sony experia z5compact (android 6.0.1), nexus 5x and samsung galaxy s6 (android 6.0.1) and it’s present in all.
I assume the resizing after minimising is an bug or am I missing something here? Is there a workaround to this issue?
The default android:windowSoftInputMode is adjustUnspecified which causes this problem.
You can have the screen resize all the time if you set android:windowSoftInputMode:"adjustResize" (This is the desired way according to the docs).
You can also follow the bug I opened for react-native.
I want converse.js such that it should work properly in mobile browser.
converse.initialize({
websocket_url: webSocketUrl, // ConnectionUrl
keepalive: true,
message_carbons: true,
message_archiving: 'roster',
//play_sounds: true,
auto_login: true,
jid: user,
password: password,
show_controlbox_by_default: false,
auto_list_rooms:true,
allow_logout: false,
allow_registration: false,
});
Can we set in config?
I finally got the answer , i removed "this.chatboxviews.trimChats();" from $(window).on("resize") function in converse.js.The main issue was when we open the chat box it opens the android keyboard on focus which resizes the window and minimize the chat box ,where as in IOS it doesnt happen like that it doesnt open keyboard on focus. So, finding the main cause of the issue solved my problem.
OK, so i've been working on an FB app that changes height on every page. I, obviously used the setAutoResize function in my app layout and i have the following:
window.fbAsyncInit = function() {
FB.init({appId: '###', status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize();
};
And it works fine in IE, Safari and Chrome but not in FF4. I also used:
window.setTimeout(function() {
FB.Canvas.setSize({height: $('body').height()});
}, 1000);
but no luck either. Does anyone experienced this before? tnx in advance.
Mark
An answer has already been provided, but I might as well post my solution to the problem. In Firefox the scrollbars are still part of the iFrame even if your page fits. They just don't have the blue scroller. This adds about 20px.
I don't think that your jQuery solution will work because height() doesn't take into account margin and padding. Maybe try this.
FB.Canvas.setSize({ height: $(document.body).outerHeight(true) + 20, width: 760 });
I added this to my css and it seemed to work (didn't have to muck with my autoresize):
body {
margin-top: -20px;
padding-top: 20px;
}
If you already have padding added to the top of your body, you will likely need to add 20px to it.
I assume it's because firefox measures the body height differently than other browsers.
Tested in ff8, chrome16 and ie9 with no negative repercussions.
This sounds like it might be a bug? Check out:
http://bugs.developers.facebook.net/show_bug.cgi?id=10889
If this is affecting you vote it up :)
FYI Warning! According to the Facebook Developer Roadmap FB.Canvas.setAutoResize will be renamed to FB.Canvas.setAutoGrow on July 5, 2012.
From the page:
We have renamed FB.Canvas.setAutoResize to FB.Canvas.setAutoGrow so
that the method more accurately represents its function.
FB.Canvas.setAutoResize will stop working on July 5th. We will
completely delete the function on August 1st.