New wiki-page
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
<style> | <style> | ||
# | .clickable { | ||
border: 1px solid #333; | |||
width: | background: #eee; | ||
height: 200px; width: 200px; | |||
margin: 15px; | |||
position: absolute; | |||
} | } | ||
.display { | |||
position:absolute; | display: block; | ||
height: 16px; | |||
top: | position: absolute; | ||
text-align: center; | |||
vertical-align: middle; | |||
width: 100%; | |||
top: 50%; margin-top: -8px; | |||
} | } | ||
</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"> | ||
RLQ.push(function () { | RLQ.push(function () { | ||
$( | $('.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); | |||
}); | }); | ||
}); | }); | ||
Line 31: | Line 34: | ||
<h1 id="coord">asdf</h1> | <h1 id="coord">asdf</h1> | ||
<div | <div class='clickable'> | ||
<span class='display'></span> | |||
</div> | </div> |
Revision as of 18:55, 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"> RLQ.push(function () { $('.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>