Question

OK, here is my question.
Using jQuery UI position. It is possible to position an element in relation to another element on the screen. It sets the left and top css properties on the element being positioned which positions it on the screen.

What I want to do is instead of setting the left and top, I want to possibly set right and bottom instead so that if the positioned element grows or shrinks, it will grow / shrink in the correct direction.

Let me go into details.
Ok, what I want is if an element is positioned on it’s right, then I want to set the right css property instead of the left and if an element is positioned on its bottom, then I want to set bottom instead of top. I can do this using the using property of jQuery UI Position, but I run into problems with collision detection. If collision detection is set to flip and the element gets flipped, I want to detect this and figure out whether I need to set right instead of left and bottom instead of top. Check out the code below to get a better idea of what I’m trying to do.

$('#somediv').position({
    my: 'right bottom',
    at: 'right top',
    of: $('#someotherdiv'),
    offset: '0 5',
    collision: 'flip flip',
    using: function(pos) {

      // Figure out the right and bottom css properties 
      var right = $(window).width() - pos.left - $(this).outerWidth(true);
      var bottom = $(window).height() - pos.top - $(this).outerHeight(true);

      // Position the element so that right and bottom are set.
      $(this).css({left: '', right: right, top: '', bottom: bottom});  
    }
});

That works great, except when the div gets flipped from collision detection. If it gets flipped horizontally, I want to set left instead of right and if it gets flipped vertically I want to set top instead of bottom.

The ideal solution would be if there was a way to tell (in the using function) whether the element was flipped and in what directions. So, anyone have any ideas to figure out whether an element was flipped using collision detection?

Answer 1

OK, figured it out…. Here is my attempt to explain how I made it work.
What you have to do is call position again within the using function. Call it once without collision detection and once with collision detection. If the position changes, then it was flipped. Here is some example code with comments.

$('#somediv').position({
    my: 'right bottom',
    at: 'right top',
    of: $('#someotherdiv'),
    offset: '0 5',
    collision: 'flip flip',
    using: function (pos1) {

        // OK, we got a position once inside the pos1 variable,
        // let's position it again this time without collision detection.
        $(this).position({
            my: 'right bottom',
            at: 'right top',
            of: $('#someotherdiv'),
            offset: '0 5',
            collision: 'none none',
            using: function(pos2) {
                var hpos = 'right';
                var vpos = 'bottom';

                // Check to see if it was flipped horizontal
                if (pos1.left != pos2.left) {
                    /* It was flipped horizontally so position is now
                       my: 'left bottom',
                       at: 'left top'
                    */
                    hpos = 'left';
                }

                // Check to see if it was flipped vertical
                if (pos1.top != pos2.top) {
                    /* It was flipped vertically */
                    vpos = 'top';
                }

                // Figure out the right and bottom css properties 
                var right = $(window).width() - pos1.left - $(this).outerWidth(true);
                var bottom = $(window).height() - pos1.top - $(this).outerHeight(true);

                // Set the horizontal position
                if (hpos == 'right') {
                    $(this).css({left: '', right: right});
                } else {
                    $(this).css({left: pos1.left, right: ''});
                }

                // Set the vertical position
                if (vpos == 'bottom') { 
                    $(this).css({top: '', bottom: bottom});
                } else {
                    $(this).css({top: pos1.top, bottom: ''});
                }
            }
        });
    }
});

If anyone has a more efficient idea, please let me know. Thanks.