2

I am inserting a textarea to a side bar (exactly on the right to), wherever a click is made on the page. The code is:

$('#page_to_be_clicked').click(function(e){
    var offset = $(this).offset();
    var comment_box_y_coord = e.pageY - offset.top;
    alert(comment_box_y_coord);

    $("#sidebar").append('<textarea id="cmmnt" rows="4" cols="10" '+
        'style="position:absolute;top:'+comment_box_y_coord +
        'px;left:5px"></textarea>');
})

The problem with this is that, if a textarea is already present at the location, it will overlap the existing, i.e. if a click is made twice at the same point on the page, then two textareas are created on top of each other. Instead, it should be created one below the other.

Is there a way to check, if a child already exists at the required co-ordinates?

Any help will be appreciated. Thanks.

How exactly should the textareas appear on clicks in a sequence:

Click and textareas

Hardik Dave
  • 676
  • 1
  • 6
  • 17
  • to clarify, you want the above to work UNLESS the click is made inside a textarea? – webkit Jun 24 '14 at 09:34
  • it will work , when click is made on #page_to_be_clicked and the textarea will be created parallely to the clicked position in the #sidebar – Hardik Dave Jun 24 '14 at 09:40
  • You might find this post helpful: http://stackoverflow.com/questions/4230029/jquery-javascript-collision-detection – jyrkim Jun 24 '14 at 09:44

1 Answers1

1

This needs to be tested properly, but I think you need to do this:

DEMO

In your function change this line:

var comment_box_y_coord =  checkCoords(e.pageY - offset.top);

and then add this function:

function checkCoords(y) {
    if ($("textarea").length>0) {
        $ts = $("textarea");
        for (var i = 0; i<$ts.length;i++) {
            var $ti = $ts.eq(i),
                tcoords = [$ti.offset().top, $ti.offset().top+$ti.height()]
            if (y>=tcoords[0] && y <= tcoords[1]) {
                y = tcoords[1]+3;
            }
        }
    }
    return y;
}
webkit
  • 3,349
  • 1
  • 16
  • 18
  • The question now is, what is the wanted behavior if you create a few then create one under the group with a small gap, then when clicking on one of the group above.. is it supposed to go under the last one? – webkit Jun 24 '14 at 09:58
  • This does seem helpful!! I have edited the question to better explain the requirements. Also, the textarea3 (in the image) needs to be pushed down when textarea4 appears above it – Hardik Dave Jun 24 '14 at 10:15
  • You want the clicks to basically control the ORDER of the textareas but the actual margins between them to remain the same throughout? meaning, if I clicked #3 with a big gap, does my textarea appear all the way down in the y coordinates I clicked or does it pin itself upwards to the last textarea? – webkit Jun 24 '14 at 13:14
  • It should appear all the way down. i.e. if the parallel y-coord corresponding to a click is empty, then it should appear there. – Hardik Dave Jun 24 '14 at 13:23
  • Ok, so now when I click #4, you want #3 to remain with the same gap? or only make enough room for #4 to squeeze if needed? – webkit Jun 24 '14 at 13:26
  • If there is enough space available for #4 between #2 and #3, then #3 should not move, otherwise, #4 should squeeze in – Hardik Dave Jun 24 '14 at 13:28
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56247/discussion-between-zofler-and-webkit). – Hardik Dave Jun 25 '14 at 05:49