How do I stop a DIV display outside a table underneath it, using Jquery?

I have a table & when I click a cell, it displays a DIV(to the right of the mouse) with absolute positioning.

I want the DIV to display using minus co-ords(positioning), so it never display outside the table('#holiday-planner-table') .

Here's the concept I'm thinking of:

    if($('#DayInfo'). is outside of $('#holiday-planner-table')) { 

    display $('#DayInfo') with minus co-ordinates 
    } else
{

        $(开发者_运维知识库".WeekDay").click( function(event) {
            $("#DayInfo").css( {position:"absolute", top:event.pageY, left: event.pageX} );

    });
}

It's not a complete solution but you can use $("selector").offset().left or top and $("selector").width() or height to construct two rectangles, check if one is not inside the other and act accordingly.

the logic here is to check if the new div coordinates put the div position + size outside the table position + size. if it will, you set the div coordinates back the size of the div. you can do left and top independently.

this should get you pretty close:

$(".WeekDay").click(function (e) {

    var x = e.pageX;
    var y = e.pageY;
    var $div = $('#DayInfo');
    var $table = $('#holiday-planner-table');

    if (x + $div.width() > $table.offset().left + $table.width()) {

        x -= $div.width();
    }

    if (y + $div.height() > $table.offset().top + $table.height()) {

        y -= $div.height();
    }

    $div.css({ position: "absolute", top: y, left: x });

}); 

I'm thinking of something among the lines of:

if (mousex > (tablew-divw)) divx = mousex-divw
else divx=mousex

same thing goes for Y. Of course, that could mess stuff up if the table actually becomes smaller than the div.

I could be wrong, but are you wanting to create some sort of tooltip functionality? If so, have a look at http://flowplayer.org/tools/tooltip/index.html