Widget:MapLocation: Difference between revisions

Revision as of 18:48, 9 August 2017

<style>

   position:relative;
   width:300px;
   height:300px;

}

   position:absolute;
   left:0px;
   top:0px;

}

   position:absolute;
   left:0px;
   top:0px;
   height:100%;
   width:100%;

}

</style> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"> RLQ.push(function () { $(document).ready(function () {

   $("#map-catcher").mousedown(function (e) {
       $("#coord").text("x:"+e.offsetX+", y:"+e.offsetY);
   });

}); }); </script>

@@ Line 1: / Line 1: @@
 <style>
-.clickable {
+#map-container{
-     border: 1px solid #333;
+     position:relative;
-     background: #eee;
+     width:300px;
-     height: 200px; width: 200px;
+     height:300px;
-    margin: 15px;
-    position: absolute;
 }
-.display {
+#map-svg{
-     display: block;
+     position:absolute;
-     height: 16px;
+     left:0px;
-     position: absolute;
+    top:0px;
-     text-align: center;
+}
-     vertical-align: middle;
+#map-catcher{
-     width: 100%;
+     position:absolute;
-     top: 50%; margin-top: -8px;
+     left:0px;
+     top:0px;
+     height:100%;
+     width:100%;
 }
@@ Line 21: / Line 22: @@
 <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
 RLQ.push(function () {
-$('.clickable').bind('click', function (ev) {
+$(document).ready(function () {
-     var $div = $(ev.target);
+     $("#map-catcher").mousedown(function (e) {
-    var $display = $div.find('.display');
+        $("#coord").text("x:"+e.offsetX+", y:"+e.offsetY);
+    });
-    var offset = $div.offset();
-    var x = ev.clientX - offset.left;
-    var y = ev.clientY - offset.top;
-    $display.text('x: ' + x + ', y: ' + y);
 });
 });
 </script>