How do I add a comment to an image using jQuery
- by marcamillion
So I am trying to replicate Facebook's picture tagging functionality, and I have the functionality that onClick, a box is created and there is a comment box.
Now the issue is that I want to be able to (without doing any back-end processing) take the input from the input field and add it in some form to the underlying image area that they have selected. I would also like to add a small image to that area, that shows that a comment is there.
How do I do that?
See the code below for what I have for the comment box:
<script type="text/javascript">
$(function() {
var tag_box = $("<div>").appendTo("body").css({
"width": "40px",
"height":"40px",
"border":"4px solid #000000",
"position":"absolute",
"display":"none",
"padding":"15px"
});
var comment_box = $("<form action='#'><input id='comment' type='text' name='comment' placeholder='Add comment'></form>").appendTo(tag_box).css({"position":"absolute"});
$("#image-wrapper").live('click', function(e){
tag_box.css({
"left": e.pageX - 40,
"top": e.pageY - 40,
"display": "block"
})
.after(comment_box.css({
"left": e.pageX - 65,
"top": e.pageY + 40
}));
});
});
</script>
Now...whenever the user presses enter, the info in the comment box is appended to the URL like so:
.html?comment=comment value#
Thanks
