Develop Reference

How to do independently scrolling rows and columns (a la Netflix app) on Android in a WebView?

In Netflix's Android app, there is a WebView that covers almost the entire app's area. When you drag a row left to right, it will scroll only that row, and do so using nice inertial scrolling. If you drag up and down, it will scroll the whole page up and down.
I've managed to duplicate this functionality on iOS (in a uiWebView as well as in Safari proper), but not on Android. On Android devices, anything I do is either painfully slow to scroll, or you have to be very careful scrolling vertically to start by touching in the background area between rows. Neither of which are acceptable. Obviously, I don't want to do the scrolling animation in javascript, as that will be too slow.
I know Netflix does it using a WebView, so....what is the trick they are using?
I have tried using the css properties (for the row div):
overflow-y: hidden;
-webkit-overflow-scrolling-x: touch
to no avail.

If you can't get the css Android compatible for your particular WebView, why not create server-side functionality that outputs only requested rows into seperate WebViews?
I would do the following:
* Query the web server to determine how many rows there are.
* Programmatically add the amount of rows that the web server says it has. For example, if the server reports that there are 5 rows, create 5 WebViews, each with their own URL params (ex: the first WebView would query mydomain.com/wv?row=1).
* Put each WebView row in a HorizontalScrollView, and put all HorizontalScrollViews in a VerticalScrollView.
* On URL change, go to a full-page WebView that displays the details of the clicked tile.
* On back pressed, close full page WebView and reload rows.
Not the cleanest of solutions, but should work fine.

Try to use iScroll in your HTML.
In the link you can find the source code, examples and javascript libs.
Also it has some useful callbacks.
I use it a lot when I'm working with WebViews.

Netflix could have used custom gesture detection and have seen if the scroll was more horizontal then vertical or more vertical than horizontal, and then based on how far the scroll was, scrolled the webview horizontally or vertically

How to split EPUB XHTML pages dynamically in Android?

I extracted EPUB files to XHTML and showed them on WebView. But when I want to show them on WebView, it shows whole page. So it is not look like a book. I want to split pages specify according to screen size. Is it possible? Or how can EPUB viewers parse the pages and show only a part of it?
Thanks.

The most common way to implement ebook pagination in a web browser is to use CSS3 columns, make each column the width of the viewport, and slide the content back and forth across the viewport as the user pages right or left. The open-source ereader Readium is an example of this implementation.

Forcing a webpage to fit into a webview

I'm in need of two things:
I need to display a webview that shows the entire webpage (horizontally), and automatically shrinks it to whatever width necessary to display the entire page edge to edge. I'm curious if this
a) can be done at all
b) if so, is this something I can control with JUST the WebView or
c) if I need to modify the HTML of the page to squeeze into whatever the container happens to be.
I have a situation where I need to display Facebook (and Twitter and Pinterest) in WebViews that scale to the size of the device and I want to make sure the WebViews show the entire page rather than creating Horizontal scrollbars.
Then, I'm curious if there's some way I can auto scroll down to a specific coordinate from the WebView so that I can scroll down beneath the massive banners that Twitter and Facebook have at the top and display the users' content without them having to scroll down manually.
Can this be done?

In order to have the WebView shrink the page to the width of the screen, use the following settings in your code.
WebView webView = (WebView)findViewById(R.id.webView);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
you can use:
int x = 0, y = THE_NUMBER_YOU_WANT;
view.scrollTo(x,y);
to scroll to any position on the webpage, determining how far you have to scroll down will be challenging though.

Need to show HTML page (with CSS) as a book with page flipping

So I have a local HTML file with CSS and I need to display this file in the form of a book (scroll left/right to view previous/next content, not up and down). I've thought of a really complicated ways to achieve this:
A Gallery of WebViews
Disable scrolling in the WebView
On swipe, scroll the WebView down the height of the WebView
There's a couple of problems with this approach:
I'd have to have the HTML content loaded for each WebView (extremely inefficient)
There exists the possibility that at the bottom of the page, there would be some content partially hidden
I'm looking for some suggestions on how to approach this problem, as the only thing I've came up with sounds dreadful. Thanks!

You could use two frames or iframes side by side and load odd page numbers in the left frame and even page numbers in the right frame. Put some fancy control buttons on each page, or a javascript scrollbar under the frames, and a div with a page-flipping animation that you can turn on or off when pages are loaded into the frames. I think it's totally doable, and could actually be pretty slick.

I can't help you totally, but here is a good example for page curl animation with custom view.
https://github.com/harism/android_page_curl/tree/master/src/fi

webview scrolling issue android

hi how to set scroll length to web view in android?
i wanted to scroll web screen for fixed length. I'm displaying a web page in web view and i adjusted web content using div tag to scroll horizontally. till here no problem and i want to add feature to webview that once user tap the screen horizontally it should move up to fixed length to the right.

Do you know how to do it with JavaScript? When handle a tap on Android side, and then use
WebView.loadUrl("javascript:....")
to adjust scroll offset of browser window.