Add example showing scrolling content

walkermatt · Jun 14, 2015 · 308d2a0 · 308d2a0
1 parent 4342b97
commit 308d2a0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/examples/scroll.html b/examples/scroll.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>OpenLayers 3 - Popup - Scrolling content</title>
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="http://openlayers.org/en/v3.3.0/css/ol.css" />
+    <link rel="stylesheet" href="../src/ol3-popup.css" />
+    <link rel="stylesheet" href="popup.css" />
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="http://openlayers.org/en/v3.3.0/build/ol.js"></script>
+    <script src="../src/ol3-popup.js"></script>
+    <script src="scroll.js"></script>
+  </body>
+</html>
diff --git a/examples/scroll.js b/examples/scroll.js
@@ -0,0 +1,23 @@
+var map = new ol.Map({
+    target: 'map',
+    layers: [
+        new ol.layer.Tile({
+            source: new ol.source.OSM()
+        })
+    ],
+    view: new ol.View({
+        center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
+        zoom: 6
+    })
+});
+
+var popup = new ol.Overlay.Popup();
+map.addOverlay(popup);
+
+map.on('singleclick', function(evt) {
+    var content = '<p>If the popup content is quite long then by default it will scroll vertically.</p>';
+    content += '<p>This behaviour together with the minimum width and maximum height can be changed by overriding the rules for the CSS class <code>.ol-popup-content</code> defined in <code>src/ol3-popup.css</code>.</p>';
+    content += '<hr />';
+    content += '<p><em>This text is here to demonstrate the content scrolling due to there being too much content to display :-)</em></p>';
+    popup.show(evt.coordinate, content);
+});