ansaurus

Question

How do I add a comment to an image using jQuery

Answer 1

A:

This may not be the best solution, but do give it a try :)

<script type="text/javascript">
    $(function() {

        var tag_box = $("<div class=\"comment-box\"></div>").css({
                "width": "40px",
                "height":"40px",
                "border":"4px solid #000000",
                "position":"absolute",
                "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){
            if($(this).parent().find('.comment-box').length === 0) {
                $(this).parent().append(tag_box).css('top',182).find('input#comment').focus();
            }
            return false;
        });
        $(".comment-box").
            live('mouseenter mouseleave', function(event) {
                if(event.type == 'mouseout') {
                    $(this).remove();
                }
            })
            .find('form').live('submit',function() {
                var comment = $(this).find('input#comment').val();
                var wrapperOffset = $("#image-wrapper").offset();
                var commentBlock = '<div class="comment-block" style="position:absolute;color:white; display:block; float:left; clear:both; height:auto; width:760px; background:red;">' + comment + '</div>';
                var posTop = wrapperOffset.top;
                $(commentBlock).css({
                    'width' : 760,
                    'top' : posTop,
                    'left' : wrapperOffset.left,
                    'z-Index' : 100
                });

                if($("#image-wrapper").parent().find('.comment-block').length > 0) {
                    var lastBlock = $("#image-wrapper").parent().find('.comment-block:last');
                    var lastBlockOffset = $(lastBlock).offset();
                    $(commentBlock).insertAfter($(lastBlock)).css('top', lastBlockOffset.top + $(lastBlock).height() + 4);
                } else {
                    $(commentBlock).insertBefore('#image-wrapper');
                }

                $(this).parent().parent().find('.comment-box').remove();
                $(this).get(0).reset();
                return false;
            });
    });
</script>
<style>
#image_container { display:block; height:auto; width:760px;margin:0 auto; background:yellow;}
</style>
<body>
<div align="center">
    <div id="image_container">
        <img src="/images/image1.jpg" width="760" height="182" alt="test" id="image-wrapper">
    </div>
</div>
</body>

Update :

<style>
#image_container { display:block; height:auto; width:760px;margin:0 auto; background:yellow;}
</style>
<body>
<div align="center">
    <div id="image_container">
        <img src="/images/image1.jpg" width="760" height="182" alt="test" id="image-wrapper">
    </div>
</div>

Puaka 2010-04-28 02:15:43

Hrmm....Puaka...this is an interesting implementation.I tried it as is, and see what you did. Nicely done.I will have to dissect it and see how it can apply to mine. Thanks for the suggestion.

marcamillion 2010-04-28 02:29:21

Also as an aside...this doesn't do what I was hoping. It adds the commet to the <div>, but it doesn't place the text on top of the image (i.e. at some z-index value greater than 0).

marcamillion 2010-04-28 02:54:56

maybe you can update your question with html code for content to append so that i can try it here

Puaka 2010-04-28 02:58:33

You are absolutely right Puaka...I have updated the question. My bad :|

marcamillion 2010-04-28 03:08:08

i've updated my sample code, comment should appear above the image

Puaka 2010-04-28 03:23:03

Hrmm...what I am really looking for is not for it to appear above the image...but more like a photoshop layer.Put it this way...you see how the onClick box in my example is layered on top of the image...I would like for an icon to be placed where a comment has been entered.

marcamillion 2010-04-28 03:28:28

ok, sample updated with absolute positioning, sorry took a while, was trying something..

Puaka 2010-04-28 04:32:31

Hrmm...now it doesn't work at all. I don't see the comment box at all.

marcamillion 2010-04-28 05:18:12

ahh.. sorry..my bad, forgot to add the html and css :)check the sample again. replace body from prev sample to body content in Update

Puaka 2010-04-28 05:23:00

Hrmm...still not working. When I click, still no comment box. :(

marcamillion 2010-04-28 06:57:05

does my sample code working(***check the sample again, i've changed something) ? there should be horizontal red comment box on top of that image each time you submit the form(tested on Chrome and FF)

Puaka 2010-04-28 08:13:04

Ok...it works now. Not exactly how I need it, but at least it functions. I will spend some time dissecting it and trying to apply it to mine.Thanks man :)

marcamillion 2010-04-28 08:35:04

you are welcome :)

Puaka 2010-04-28 08:53:06

Puaka....having one more problem with this. The comment box, always appears right below the image. Even before I enter a comment. I thought, that by changing the CSS value in this snippet:$("#image-wrapper").live('click', function(e){ if($(this).parent().find('.comment-box').length === 0) { $(this).parent().append(tag_box).css('top', 182).find('input#comment').focus(); } return false;...it would work, but it hasn't. Can you just show me which snippet manages the position of the comment box. Thnx

marcamillion 2010-05-01 21:30:39

ansaurus

tags:

views:

answers:

How do I add a comment to an image using jQuery

related questions