create div where i click within the container

Question

Here's a sample of creating a div next to the cursor position on click: view sample

It creates a div where i click inside the container div but clicking too close to the borders creates a div beyond the container. Divs created should appear entirely inside the container even if the cursor is too close to the border. What do I have to change or add? :)

Problem --> MyImage goes beyond the border

Goal -->Red dots indicate the clicks done

Note: I don't need the red dots.I just placed it there to show that when I click on that spot, the result would be the imagediv

HTML:

<div id="contain">
</div>

JavaScript:

$(function() {


$("#contain").click(function(e) {
    var x = e.pageX + 'px';
    var y = e.pageY + 'px';
    var img = $('<img src="" alt="myimage" />');
    var div = $('<div>').css({
      "position": "absolute",
      "left": x,
      "top": y
    });
    div.append(img);
    $(document.body).append(div);
  });
});

CSS:

#contain{
  height:300px;
  width:300px;
  border: 1px solid black;
}

Answer 1

First you have to append your div into the container and not in the body. After that set the position of your container to relative.

There's only two case of overflow : the right and the bottom of the container. So you just have to check if the position clicked is higher than the position + the size of your image.

Example

$(function() {
  $("#contain").click(function(e) {
    var x = e.pageX + 'px';
    var y = e.pageY + 'px';
    var img = $('<img src="" alt="myimage" />');
    var imgwidth = 68; //Here your image width
    var imgheight = 28; // Here your image height
    if((e.pageX+imgwidth)> ($(this).position().left + $(this).width()))
      x=($(this).position().left + $(this).width())-imgwidth +"px";
    if((e.pageY+imgheight)> ($(this).position().top + $(this).height()))
      y=($(this).position().top + $(this).height())-imgheight+"px";
    var div = $('<div class="content">').css({
      "position": "absolute",
      "left": x,
      "top": y
    });
    div.append(img);
    $(this).append(div);
  });
});

#contain{
  height:300px;
  width:300px;
  border: 1px solid black;
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contain">

</div>

Answer 2

The problem is, you use absolute positions and the new div don't know about the width of your Box.

To solve this, you should get the width of your text wrapper. and the width of your box.

Store this values as max x and maybe you do the same with y .

   $(function() {
          $("#contain").click(function(e) {
            var x = e.pageX;
            var y = e.pageY;
            var xMax = 300;
            var yMax = 300;
            var img = $('<img src="" alt="myimage" />');
            var div = $('<div>').css({
              "position": "absolute",
              "left": x + 'px',
              "top": y + 'px'
            });


            div.append(img);
            $(document.body).append(div);

            var imgHeight = img.outerHeight();
            if ((y + imgHeight) > yMax) {
                div.css('top', yMax - imgHeight);
            }

            var imgWidth = img.outerWidth();
            if ((x + imgWidth) > xMax) {
                div.css('left', yMax - imgWidth);
            }
          });
        });

This example works for me. The text is always in the box. I hope it helps. :)