Adding tag in photo

2

I'm trying to add tags to a photo (like the facebook identification system), the error I'm having is the following:

When I click on an image to place the tags the form first appears in the corner of my computer, not in the coordinates of the image. I already worked with these functions and it still does not work

  $('body .jcontent').on('click', '.imgpost', function(e){
       var imgvalue = $(this).parent();
       valueX = e.pageX //- $(imgvalue).offset().left;
       valueY = e.pageY //- $(imgvalue).offset().top;
       var idimg = this.id;
       $('#tagit').css({top:valueY,left:valueX})
       $(imgvalue).append('<div id="tagit"><div class="box"></div><div class="name"><input type="text" name="txtname" class="w3-input" id="tagname" placeholder="Comente..." /><input type="button" name="w3-btn" value="Save" id="btnsave" /><input type="button" name="btncancel" value="Cancel" id="btncancel" /></div></div>');
       $('#tagname').focus(); //puts the cursor inside text-field

})
    
asked by anonymous 19.05.2016 / 05:27

1 answer

0

You can do with a relative div and the one of the tag becomes absolute, so it can be floating inside the relative div, which in this case would be the image.

In your code you are reporting the top and left before the element exists, you have to add the html element first and then tell it what the position is.

Here based on your code: link

    
09.06.2016 / 19:44