Know when position collision has fired in jQuery UI

Question

I am trying to extend the jQuery UI dialog() to use arrow pointers to point to what was clicked. The issue I've run into is knowing when the collision method runs so I can change to pointers from the left side to the right side.

Is it possible to know when the position.collision method is triggered?

$('#myElem').dialog({
    position:{
        collision:'flip'
    }
});

Solution:

As it turns out you can pass more than they say in the documentation. Here is what I ended up using that solved my problem:

position:
{
    my: 'left top',
    at: 'right center',
    of: $trigger,
    offset: '20 -55',
    collision: 'flip',
    using: function(obj) {

        var $modal = $(this),
            trigger_l = $trigger.position().left,
            modal_l = obj.left,
            top;

        // Check IE's top position
        top = ( isIE ) ? obj.top - 48 : top = obj.top;

        $(this).css({
            left: obj.left + 'px',
            top: top + 'px'
        });

    }
}

I used the using method inside the position object to do the majority of the work. I then did a quick check to see if it's IE, done earlier in the document, and set my CSS accordingly.

I did this a while ago so let me know if you run into problems. :)

Answer 1

Don`t know how your solution could help, but this is actually close to the real solution. We need use the same "using" function, which recieves two arguments. The first one is actual coords of the positioned object, and we will need to manually set this coords to the positioned object, like you did in your solution. But to determine the direction of the flip-collision we need to use second argument. This argument provides feedback about the position and dimensions of both elements, as well as calculations to their relative position. You can read about this here.

If you have horizontal pointing arrow and you need to switch it direction from left to right and vice versa according to the current collision, you can get the value of "horizontal" property from the second argument to the "using" function. The "left" value of this property means that positioned object positioned to the right of the target, and vice versa. So you can change classes on the positioned element accordingly to current collision. Here is example:

position: 
{
    my: 'left top',
    at: 'right center',
    of: $trigger,
    offset: '20 -55',
    collision: 'flip',
    using: function(coords, feedback) {
            var $modal = $(this),
                top = ( isIE ) ? coords.top - 48 : coords.top,
                className = 'switch-' + feedback.horizontal;

            $modal.css({
                left: coords.left + 'px',
                top: top + 'px'
            }).removeClass(function (index, css) {
                   return (css.match (/\bswitch-\w+/g) || []).join(' ');
               }).addClass(className);

        }
    }

Note that in example above we removed from the $modal any 'switch-' classes added earlied. And then added current 'switch-' class. So any time you will be position your modal, it will have 'switch-left' or 'switch-right' class depending on current collision.