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. :)

Edit
Report