I am using This Plugin taggd to create an app which on click on any part of body creates a tag so far i have managed everything just this coordinates not getting right its creating dots on document sometimes and sometimes near my click on picture if i click on left top corner . So the problem is its not creating the point where i click on the picture unable to understand thats whats wrong with my coordinate not much help on documentation .
It takes scale 0-1 or in pixels but that's also not understood
Question How to make it work properly to take exact coordinates and put tag exactly where i click.
<html>
<head>
<link href='css/taggd.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.taggd.js"></script>
</head><body>
<img id="mytag" class="taggd" src="img/front.jpg"/>
<script type="text/javascript">
var data = [];
var settings = [];
$(document).ready(function() {
$('.taggd').click(function(e) {
var offset = $(this).offset();
var x = (e.pageX - offset.left);
var y = (e.pageY - offset.top);
console.log(x);
console.log(y);
data.push([
{ x:x/100, y:y/100, text: 'Huey This is a text' }
]);
settings.push({
align: { 'y': 'top' },
offset: { 'top': 100 },
'handlers': {
'mouseenter': 'show',
'mouseleave': 'hide'
}
});
$('.taggd').each(function(i, e) {
var $e = $(e);
console.log(e);
$e.taggd(settings[i]);
$e.taggd('items', data[i])
});
});
});
/*
$(document).ready(function() {
var settings = {
'align': {
'x': 'center',
'y': 'center'
},
'handlers': {},
'offset': {
'left': 0,
'top': 0
}
};
$('#mytag').click(function(e) {
$('#mytag').taggd(settings);
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
console.log(x);
console.log(y);
$('#mytag').taggd('items', {x: x, y: y, text: 'This is a test'})
});
});
*/
</script>
</body></html>