Question

I have a Main div inside which i am trying to display another small div on the coordinates captured on mouse click. Problem is that when i click on the extreme left, right, top, bottom the small div is going outside the main div. I have tried overflow:hidden on main div but i don’t want that. i want div to be positioned inside the main div no matter where i click.
Sample code:

$(document).ready(function() {
    $("#main_div").bind('click', function(event){

    var x = event.pageX-document.getElementById("main_div").scrollLeft;
    var y = event.pageY-document.getElementById("main_div").scrollTop;



    $("#container-5").css({"top":y,"left":x});
   });

Answer 1

You can check if the coordinates of the click would put part of the small div outside of the main div, and if so change the coordinates so that the small div remains inside the main div. (See this jsFiddle.)

$(document).ready(function() {
    $("#main_div").bind('click', function(event) {
        var $mainDiv = $("#main_div");
        var $container5 = $("#container-5");

        var x = event.pageX - $mainDiv.position().left;
        var y = event.pageY - $mainDiv.position().top;

        if (x + $container5.width() > $mainDiv.width()) {
            x = $mainDiv.width() - $container5.width();
        }
        if (y + $container5.height() > $mainDiv.height()) {
            y = $mainDiv.height() - $container5.height();
        }

        $container5.css({
            "top": y,
            "left": x
        });
    });
});​