Question

http://jqueryui.com/demos/position/

The jQuery UI Position utility detects when the element being positioned overflows the window and automatically places it inside the window using the ‘collision’ option.

Is it possible to do this when the element overflows a specific div instead of the entire window?

Thank you.

Answer 1

Yup, use the using property.

$('#somediv').position({
        my: 'right top',
        at: 'left top',
        of: $('#someotherdiv'),
        using: function(pos) {
            // Figure out the bounds of the position that will be set
            var x1 = pos.left;
            var x2 = pos.left + $(this).width();
            var y1 = pos.top;
            var y2 = pos.top + $(this).height();

            // Figure out the bounds of the div we want to make sure we are inside
            var bpos = $('#boundsdiv').offset();
            var bx1 = bpos.left;
            var bx2 = bpos.left + $('#boundsdiv').width();
            var by1 = bpos.top;
            var by2 = bpos.top + $('#boundsdiv').height();

            // Check if it is inside and if not, reposition
            if (x1 < bx1) { pos.left += (bx1 - x1); }
            if (x2 > bx2) { pos.left -= (x2 - bx2); }
            if (y1 < by1) { pos.top += (by1 - y1); }
            if (y2 > by2) { pos.top -= (y2 - by2); }

            // After calculating the final position, position it.
            $(this).css({top: pos.top, left: pos.left});

        }
    });