I am developing application using webview in android. i am loading a page into webview and splitting multiple columns dynamically using CSS3 webkit property. once user reach the last page/column i have to show the TOC confirmation dialog. can anyone please advice me how to do that ?

height:600px;
-webkit-column-width:600px;
-webkit-column-count:auto;

I am developing application using webview in android. i am loading a page into webview and splitting multiple columns dynamically using CSS3 webkit property. once user reach the last page/column i have to show the TOC confirmation dialog. can anyone please advice me how to do that ?

height:600px;
-webkit-column-width:600px;
-webkit-column-count:auto;

• javascript
• android
• css
• jquery-mobile

Share Improve this question Follow edited Dec 27, 2011 at 11:21 Lucifer 29.7k2525 gold badges9292 silver badges144144 bronze badges asked Sep 30, 2011 at 10:59 JegaJega 69677 silver badges1717 bronze badges 1

• 1 You need to provide the information of your paging method - if you use the native overflow scroll, try to get the value of scrollX – vincicat Commented Nov 17, 2011 at 16:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

How your TOC confirmation dialog is setup?

One possible solution could be to use the :nth-last-of-type(N) selector to select last page/column element http://reference.sitepoint./css/pseudoclass-nthlastoftype.

Try putting a small element at the end of the text, and then wait for it to appear on screen. It is easily done using jQuery with jquery-appear.

I forked @visualidiot's jsfiddle to create an example using said techniques. Haven't tested it using jQuery Mobile though.

• I put a <span> element at the end of the text. The span is floated right to make sure (most of) the last column is shown. In this example, the <span> is not empty (and highly visible), but it would be better if it was just empty.
• The javascript confirm() dialog screws up the scrolling a bit by locking mouse focus on the scroll slider (tested in Chrome 16 on Windows). Showing a confirm dialog in HTML would not.
• Since .appear() works for vertical scrolling as well, this degrades nicely when not having -webkit-column-* available (tested using IE9).

Get the total width of your element, and divide it by the width of a single column. Here's an example: http://jsfiddle/Ecp9M/