New wiki-page
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
<div class='clickable'>
<span class='display'></span>
</div>
<style>
<style>
#map-container{
.clickable {
     position:relative;
    border: 1px solid #333;
     width:300px;
     background: #eee;
     height:300px;
     height: 200px; width: 200px;
    margin: 15px;
     position: absolute;
}
}
#map-svg{
.display {
     position:absolute;
    display: block;
     left:0px;
    height: 16px;
     top:0px;
     position: absolute;
     text-align: center;
    vertical-align: middle;
    width: 100%;
     top: 50%; margin-top: -8px;
}
}
#map-catcher{
 
    position:absolute;
    left:0px;
    top:0px;
    height:100%;
    width:100%;
</style>
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">


$(document).ready(function () {
$('.clickable').bind('click', function (ev) {
     $("#map-catcher").mousedown(function (e) {
     var $div = $(ev.target);
        $("#coord").text("x:"+e.offsetX+", y:"+e.offsetY);
    var $display = $div.find('.display');
    });
   
    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    var y = ev.clientY - offset.top;
   
    $display.text('x: ' + x + ', y: ' + y);
});
});


</script>
</script>
<h1 id="coord">asdf</h1>
<div id="map-container">
    <object id="map-svg" type="image/svg+xml" data="http://upload.wikimedia.org/wikipedia/en/9/9a/Nickelodeon_logo.svg" style="width: 300px; height: 300px; border:1px solid black; ">Your browser does not support SVG</object>
    <div id="map-catcher"></div>
</div>

Revision as of 18:42, 9 August 2017

<style> .clickable { 

   border: 1px solid #333;
   background: #eee;
   height: 200px; width: 200px;
   margin: 15px;
   position: absolute;

} .display { 

   display: block;
   height: 16px;
   position: absolute;
   text-align: center;
   vertical-align: middle;
   width: 100%;
   top: 50%; margin-top: -8px;

}

</style> <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">

$('.clickable').bind('click', function (ev) { 

   var $div = $(ev.target);
   var $display = $div.find('.display');
   
   var offset = $div.offset();
   var x = ev.clientX - offset.left;
   var y = ev.clientY - offset.top;
   
   $display.text('x: ' + x + ', y: ' + y);

});

</script>

Retrieved from "https://w.ikabodo.se/index.php?title=Widget:MapLocation&oldid=7778"