I'm trying to make a photo tag plugin for my website. I have long way to go. I know there are other actual plugins but I want to create my own here. The question is I was trying to make a box appear on a image after clicking it, it is not appearing, it is not appending on the image.
<head>
<style>
#imageHolder {
position:relative;
border:dashed 2px #7E7E7E;
min-width:300px;
min-height:300px;
box-shadow:0 0 5px #000;
cursor:pointer;
float:left;
}
#tag
{
position:absolute;
top:0;left:0;
width:250px;
}
#box
{
border:solid 3px #000;
width:100px;
height:100px;
float:left;
}
</style>
<script style = "text/javascript">
$(document).ready(function(){
var mouseX = 0;
var mouseY = 0;
$("#imageHolder img").click(function(e){
var imgBox = $(this).parent();
mouseX = e.pageX - $(imgBox).offset().left;
mouseY = e.pageY - $(imgBox).offset().top;
$('#tag').remove();
$(imgBox).append('<div id = "tag"><div id="box"></div></div>');
$('#tag').css({top:mouseY,left:mouseX});
});
});
</script>
</head>
<body>
<div id = "imageHolder">
<img src = "test.jpg"/>
</div>
</body>
What is the problem with this code?
Interesting and difficult yet very simple solution
$("#imageHolder img").click(function (e) {
var offset = $(this).offset();
var position = {
left: e.clientX - offset.left - 50,
top: e.clientY - offset.top - 50
}
var append = $('<div class="tag"><div class="box"></div></div>').draggable({containment: "parent"}).css({"position":"absolute","top":position.top,"left":position.left});
$(this).parent().append(append);
});