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

Question

Hi All,

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} );

    });
}

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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 });

});