Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <title>hScroll Failure</title>
- <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
- <script src="https://raw.github.com/cubiq/iscroll/master/src/iscroll.js"></script>
- <script src="https://raw.github.com/watusi/jquery-mobile-iscrollview/master/lib/jquery.mobile.iscrollview.js"></script>
- <style>
- table {
- width: 1000px;
- }
- table tr td {
- height: 1000px;
- width: 100px;
- border: 1px solid black;
- background-color: red;
- vertical-align: top;
- font-size: 40px;
- }
- </style>
- <script>
- // allow browser chrome to be scrolled to so you can refesh the page on iPhone
- $.mobile.iscrollview.prototype.options.preventPageScroll = false;
- $.mobile.iscrollview.prototype.options.scrollTopOnResize = false;
- </script>
- </head>
- <body>
- <header data-role="header">
- <h1>Header</h1>
- </header>
- <div data-role="content" class="content">
- <div id="iscrollified" data-iscroll='{"zoom": true, "zoomMin": 0.25, "hScroll": true, "preventPageScroll": false}'>
- <!-- <div id="iscrollified" > -->
- <ul data-role="listview">
- <li>
- <div id="container">
- <table id="really-wide-content" width="1000">
- <tr>
- <td>
- 1
- </td>
- <td>
- 2
- </td>
- <td>
- 3
- </td>
- <td>
- 4
- </td>
- <td>
- 5
- </td>
- <td>
- 6
- </td>
- <td>
- 7
- </td>
- <td>
- 8
- </td>
- <td>
- 9
- </td>
- <td>
- 10
- </td>
- </tr>
- </table>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement