StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I just finished implementing this on android(2.2 and 3.2) and on iphone (not ipad) for scrollview to work properly, you need to include the <a href="http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.css" rel="nofollow">css</a> file, and the <a href="http://gsgd.co.uk/sandbox/jquery/easing/" rel="nofollow">jquery easing</a> script.</p> <p>Scripts must be included in this order:</p> <ol> <li>jquery</li> <li>jquery.mobile</li> <li>jquery.easing</li> <li>jquery.mobile.scrollview</li> <li>scrollview</li> </ol> <p>The css file gives you the scroll bars, <a href="http://gsgd.co.uk/sandbox/jquery/easing/" rel="nofollow">jquery.easing</a> gives the smooth animation (an impressive project by itself), jquery.mobile.scrollview does the heavy lifting, scrollview scrapes the page and adds enough markup for the scrollview to take over.</p> <p>I am sure I don't need to tell you that it's is 'Experimental' for a reason (bizarre behaviour while scrolling through a listview, it also breaks the ability to click on buttons and in text areas on chromium-browser - I haven't tested other browsers), however I have found very few problems with it on mobile devices. I really like that it enables me to keep the tabs at the top of the page all the time. Nesting many scrollviews is pretty cool as well.</p> <p>I can't say that I have noticed any problems with toggleClass function, however that might have something to do with scrollview going through and adding markup.</p> <p>NOTE: As of the most recent version of jQuery mobile rc2, the buttons and text inputs should work.</p> <p><strong>EDIT</strong></p> <p>As of jQuery Mobile 1.1.0, it is <a href="http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/" rel="nofollow">recommended</a> to use the <a href="http://jquerymobile.com/test/docs/toolbars/bars-fixed.html" rel="nofollow">fixed headers</a> using the <code>data-position="fixed"</code> attribute in the header (or footer) and completely remove scrollview.</p> <p>I have tried this myself and it works much better (for Android 2.2+ and iOS5 - BlackBerry OS not tested by me, but the blog claims it should work for BB7). It runs faster and smoother than the js solution and has fewer graphical bugs. Be sure to remove all the extra js, css and all references to <code>data-scroll</code> as it interferes/breaks everything.</p> <p>For unsupported versions and OS's you might still need the scrollview js/css etc, but in my experience the places that don't support the fixed headers were too slow to run the js version anyway.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload