Right now, my script adds a box to the cursor when I click on an image, as can be seen in the following code. Please note, this is jQuery.
$(function() {
var tag_box = $("<div>").appendTo("body").css({
"width": "40px",
"height": "40px",
"border": "4px solid #000000",
"position": "absolute",
"display": "none",
"padding": "15px"
});
$("#image-wrapper").live('click', function(e) {
tag_box.css({
"left": e.pageX - 40,
"top": e.pageY - 40,
"display": "block"
});
});
I would like to add a text field to appear right below that tag_box on that same click. I tried to do this, but it hasn't worked out like I thought it would:
var comment_box = $("<label> Comment: <input type='text' name='comment' autocomplete='off'></label>");
$("#image-wrapper").live('click', function() {
$("body").append(comment_box);
});
});
Any assistance you can give me, would be greatly appreciated.
Thanks.
Edit: Please note that the var comment_box is included in the document ready $(function() at the top. The trailing parens correspond to the top ones.