I want to scroll a small div on the page, but when I use a ipad, it scrolls the full page. On a PC, I can click the scroll bar, it works well. I have used the property -webkit-overflow-scrolling:touch as the others suggested, but it didn't work. Does anyone have a good solution?
Try to add this to your section:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
That makes sure that the page stays in place and doesn't scroll when you only want to scroll a part that has an overflow. A good example where this is useful is when you want to create a map, and zoom with pinch. You only want to zoom the map, not the page around it, which would be the default behaviour.
Related
When I load local html in WKWebView with <body contenteditable="true"> I need to scroll downwards when selecting range over keyboard.
In order to do that I have added some observers for keyboardWillShowOrHide and keyboardWillShowOrHide to adjust the scrollView.contentInset and scrollView.scrollIndicatorInsets. That works fine and as expected.
The problem now I'm experiencing is flickering and broken scroll while selecting range of text.
The flickering and broken scroll can be fixed by adding to html <body contenteditable="true" style="overflow:hidden;"> But that breaks the initial scroll downwards when selecting range over keyboard.
Any hints/help would be appreciated.
Here is a link to test projects git
I've got a web app which displays a scrollable view of a 2D diagram, and I am trying to allow the user to more easily let the view always follow the finger.
The default behavior is such that most swiping motions result in either a vertical or horizontally constrained movement, which is helpful for reading text but not so much for my use case.
Writing custom touch event code to directly set scroll is one possibility but that makes it difficult to bring back scroll momentum. In addition, the native functionality is capable of doing some special things behind the scenes, like suspend JS operations and avoid re-renders, which helps overall performance.
Is there a CSS style that can control the directional control behavior?
I haven't found a way to specify the behaviour, but I've found that when I place my finger down without moving it then start moving it after a second it will allow me to scroll in all directions.
Maybe look into if iScroll or something similar will work for you, since it includes momentum and you can explicitly specify whether you want to lock the direction or not.
You can make the diagram overflow the page size:
#diagram{
width: 2000px;
}
All other parts should be fixed:
#menu, etc{
position: fixed
}
This way you can use the scroll of the page itself, that has no directional constraint.
To prevent the iPad to resize the content to fit device width you add this in <head>:
<meta name="viewport" content="initial-scale=1, user-scalable=no, width=2000px">
I'm building an iOS 5/6 app that has a UIWebView. It loads some HTML that I have embedded in my app.
Now when I rotate my device, the WebView changes its size (as I want it to fill the entire width of the screen).
And then it gets weird: some content gets scaled up and some content doesn't get scaled up. See this image with some example text in it:
As you can see, the header (H6) stays the same, while the paragraph gets scaled up. Does anybody have an idea how to prevent this? I want the html to look the same in landscape as it does in portrait mode.
I've tried setting the viewport scaling to 1: <meta name="viewport" content="initial-scale=1.0,max-scale=1.0">
but that doesn't help. The body's font-size style is set to 14px, but changing that to 14pt or a percentage also made no difference. Setting the width of the body to 100% also didn't help.
Strangely, removing the line break (<br/>) that's in the text fixes it but I need line breaks to be in there so that's no solution.
The only thing that does work is reloading the UIWebView's content after an orientation change, but that doesn't prevent it from looking wrong during rotation, and it resets any scrolling that the user may have done.
Any ideas?
Try this:
body {
-webkit-text-size-adjust: none;
}
I'm not sure, but it might be the scalesPageToFit propertie on your UIWebView.
If you are coding on XCode (I assume that because you are using UIWebView)
Choose the UIWebView on the nib.
Ultilities pane > Size inspector > in the Autosizing box, remove both double-direction arrows.
The UIWebView now has fixed size and won't automatically scale to orientation.
Is this what you want?
Hey Appcelerator Developer,
I'm just testing with an AdServer System and new kinds of Ads. The problem is, that the Ad will change its height when you click on it via JavaScript. How can I achieve that the WebView will change its height accordingly? Because I want that the WebView will only have the height of the Ad content, so that you still can click on the content behind/under the WebView. I place the WebView on top of the window with a very high zIndex. It also could be that no Ad will be delivered and the size of the Ad will be 0. Can I also change the height accordingly? It would be great when the WebView would change its height automatically accordingly to its content.
Any help would be highly appreciated :)
Include a viewport meta tag in Your page header
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I also set WebView width (I'm not sure that's necessary).
You cand find out more about the viewport meta on Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
Is the ad the only thing inside the web view? If so, give the web view a height property of
height:Ti.UI.SIZE
This will give the Web view the height of its children. Then, try adding this within the click function
webView.addEventListener('click', function(e){
webView.setHeight(Ti.UI.SIZE);
});
This should reset the height of the web view to the size of the children every time it is clicked. I have never tested this, however in theory it sounds solid. Let me know if this helps. Good luck!
The default behavior in jquerymobile when I have header, content and footer (where header/footer are fixed) is that when I scroll the content the header/footer show/hide. I mean when you start scrolling the header/footer hides and when u stop scrolling the header/footer are shown again. On devices its looks very bad/none-user friendly. I want to avoid this show/hide effects of header/footer. Is there any thing thats available in jquerymobile or some of its plugin to avoid it? If nothing then I want to apply iScroll on the content. Can someone guide me how to make data-role="content" using full-screen height?
If this is what you are referring to, then you can just remove the data-position: fixed from the headers and footers. I tried it on the iPhone, and it is still buggy (seems to flicker whenever a touch event it generated, even if it is not necessary).