I wonder how I do that the scroll PhoneGap does not have this
in my application when I drag the mouse on the application, it will go
up or down, as I do Ileave it fixed? I posted pictures of what is
happening, thanks!
http://postimage.org/image/pa2kyvvwb/
http://postimage.org/image/gf8cnrjsx/
You can use this script, but then you'll have to handle scrolling yourself if you page is bigger than the screen:
//Prevent dragging of canvas on iOS
$(document.body).bind('touchmove', function(event) {
event.preventDefault();
});
This seems to be on every apple device the same. This is not an PhoneGap feature. When draging a website on my mac mini the same happens. So you'll have to do it programmatically in objectiv-c. Maybe this works
CGSize scrollableSize = CGSizeMake(320, myScrollableWidth);
[myScrollView setContentSize:scrollableSize];
Related
I am having issues with the default "refresh" scrollbar in IOS. I have created my own scrollbar in a div and i cant seem to access it without using the default scrollbar in IOS. I have fixed the problem on both web and android but i cant seem to figure out how to remove the "default" scrollbar on IOS devices (phone and Ipad).
To prevent user from scrolling the screen you need to redefine touch move event
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, { passive: false });
I have made simple website surajcreator.com/indermenschen . But the problem is in mobile device while scrolling page automatically refreshes itself. It has some scripts for background image slide. I don't understand where the problem is. Please help me.
Whoever stumbles upon this question could try to suppress the touchstart and touchend events, like
document.addEventListener('touchstart', function(e) {
console.log('touchstart');
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation();
});
In my case it was a manual page refresh, triggered by the window resize event, as I wanted to calculate dimensions etc. Turns out the resize event might be triggered by appearing control bars on mobile devices.
I have an application using jQuery Mobile.
When testing on Chrome (on Android), when the keyboard is opened, some inputs located at the bottom of the page are automatically moved to the top. That the behavior I expect.
When I add this website into the Home Screen of my android, this behavior does not work, and all text inputs are hidden by the keyboard.
I have also remarked that when I open again the same application on Chrome, and after retry the Webview-based app, everything is now OK. The inputs are not hidden anymore.
Do you already seen this kind of error ?
Thanks by advance
I created a demo for you, as an alternative
I had to append a blank box to create some space at the bottom and then move the input up to the header when you focus on the input because its at the bottom so no scroll space.
Demo
https://jsfiddle.net/fyom081o/
Code
$(document).on("focus", "#text-basic", function(event){
var boxheight = $(window).height() - 40;
$("#mycontntent").append("<div id='blank' style='height:"+boxheight+"px;'"+"></div>");
$('html, body').animate({scrollTop: $('#text-basic').offset().top - 100}, 500);
});
$(document).on("focusout", "#text-basic", function(event){
$('#blank').remove();
});
Please see the answer from when I raised this same question...
Jquery Mobile 1.4.5 virtual keyboard in the device hides the form inputs at the bottom of the page
I opened an issue with JQM and this is the response I got. Turns out it's a Chrome fullscreen browser bug, nothing to do with JQM...
The only way i could think to attempt to work around this would be something like http://jsbin.com/kagidi/9/edit?html,css,output which fixes the issue on chrome homescreen however this is not really a complete fix it has a few issues that cant really be solved.
There is no way to know the keyboard size, and there for how much height to add to the body, on a particular device even more so when you keep in mind custom keyboards.
It requires a lot of userAgent sniffing to make it work properly
Because of these issues this is not really something we would add to the library i don't think. However this may solve your issue
I want to disable the bounce effect(elastic scrolling) ipad/iphone safari browser. And tried using preventing default on touchmove but that is preventing the whole scrolling. I want to be able to scroll the content but just prevent the bounce. My header and footer are fixed.
An ideas?
With Mobile Safari on iOS8 (AppleWebKit/600) you can detect if scroll bounce occurs at the top (swiping down) using the following:
window.onscroll = function() {
if (document.body.scrollTop < 0) {
// do something
}
}
I had a play to see if I could find a clean way to "interrupt" the bounce, but didn't find anything nice.
Note the window.onscroll solution won't work in UIWebView because I think the onscroll event is not fired in UIWebView, however that isn't a problem because UIWebView doesn't have bounce! You can detect if using UIWebView versus WKWebView using https://stackoverflow.com/a/30495399/436776
I was using this code to test (must clone and open fullscreen to test on iOS): http://jsbin.com/tocako/edit
Im making a mobile optimised website that has fullscreen dialog windows that open when you 'click' certain elements on the page. These windows are actually just divs that are animated into position.
If the user presses the browser back button when one of these dialoge windows is open I want the dialoge box to close, not for the page to be left all together.
I can do this with iPhone. If I make the element you click a link fragment, then on the window.onpopstate event I can use window.location.href to check the url and hide the dialoge box if appropriate.
However I cant get this to work on Android as window.onpopstate isn't supported (at least with the phone im testing with which is quite old). How can I get round this? jQuery Mobile can do this, so I know it must be possible somehow.
Thanks
I havnt looked extensibly into the level of support of this, but window.onhashchange works for my pretty old Android.