Fixed problems with touch events on a scrollable page

2012-11-02 14:12:29 +01:00
parent 8d0da09454
commit a2a391d3b5
9 changed files with 266 additions and 43 deletions
--- a/examples/mobile-scroll.html
+++ b/examples/mobile-scroll.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OpenLayers Mobile</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
+        <script src="../lib/OpenLayers.js?mobile"></script>
+        <script src="mobile-scroll.js"></script>
+        <style>
+            html, body {
+                margin  : 0;
+                padding : 0;
+                height  : 100%;
+                width   : 100%;
+            }
+            @media only screen and (max-width: 600px) {
+                html, body {
+                    height  : 117%;
+                }
+            }
+            #map {
+                width    : 100%;
+                position : absolute;
+                height   : 70%;
+                top      : 500px;
+            }
+            .olControlAttribution {
+                position      : absolute;
+                font-size     : 10px;
+                bottom        : 0 !important;
+                right         : 0 !important;
+                background    : rgba(0,0,0,0.1);
+                font-family   : Arial;
+                padding       : 2px 4px;
+                border-radius : 5px 0 0 0;
+            }
+            
+        </style>
+    </head>
+    <body>
+        <h1 id="title">Scroll down to the map</h1>
+        <div id="tags">
+            mobile
+        </div>
+        <p id="shortdesc">
+            A basic full-screen map for mobile devices.
+        </p>
+        <div id="map"></div>
+        <script>
+            init();
+        </script>
+    </body>
+</html>